You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
196 lines
5.3 KiB
196 lines
5.3 KiB
= Inline CSS plugin
|
|
:navtitle: Inline CSS
|
|
:description: takes {productname} documents and outputs HTML formatted according to email-friendly HTML best practices (eg inlined CSS).
|
|
:description_short: Inlines {productname} CSS for better presentation in email.
|
|
:keywords: plugin, inlinecss, email friendly, email, output, inline, css, post-process, html
|
|
:pluginname: Inline CSS
|
|
:plugincode: inlinecss
|
|
:plugincategory: premium
|
|
|
|
include::partial$misc/admon-premium-plugin.adoc[]
|
|
|
|
As is normal and long-time best practice, {productname} documents keep CSS and HTML separate. This practice is not, however, email-friendly.
|
|
|
|
The {pluginname} plugin takes a {productname} document, and processes it such that the previously separate CSS is applied inline to each HTML element. This single output file is much closer to the common requirements for sending as an HTML-formatted email.
|
|
|
|
== Interactive example
|
|
|
|
liveDemo::inline-css[]
|
|
|
|
== Basic setup
|
|
|
|
To add the {pluginname} plugin to the editor, add `{plugincode}` to the `plugins` option in the editor configuration.
|
|
|
|
For example:
|
|
|
|
[source,js]
|
|
----
|
|
tinymce.init({
|
|
selector: 'textarea', // change this value according to your HTML
|
|
plugins: 'inlinecss',
|
|
});
|
|
----
|
|
|
|
== Usage notes
|
|
|
|
The {pluginname} plugin does not support
|
|
|
|
. https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes[Pseudo-classes].
|
|
+
|
|
For example:
|
|
+
|
|
[source,css]
|
|
----
|
|
button:hover {
|
|
color: blue;
|
|
}
|
|
----
|
|
|
|
. https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements[Pseudo-elements].
|
|
+
|
|
For example:
|
|
+
|
|
[source,css]
|
|
----
|
|
p::first-line {
|
|
color: blue;
|
|
}
|
|
----
|
|
|
|
. https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule[@ rules].
|
|
+
|
|
For example:
|
|
+
|
|
[source,html]
|
|
----
|
|
@media (screen)
|
|
----
|
|
|
|
. The `!important` property.
|
|
|
|
|
|
=== Classic or iframe mode support
|
|
|
|
xref:use-tinymce-classic.adoc[Classic or iframe mode] is a sandbox. Consequently, specifying CSS is constrained.
|
|
|
|
CSS can be specified in classic mode in the following ways:
|
|
|
|
. The `content_css` option
|
|
+
|
|
Setting the xref:add-css-options.adoc#content_css[`content_css`] option automatically creates the `<link>` tag and puts it in the {productname} document’s `<head>`.
|
|
+
|
|
NOTE: This is the only supported way of adding a stylesheet to {productname} in Classic mode.
|
|
|
|
. The `content_style` option
|
|
+
|
|
Setting the xref:add-css-options.adoc#content_style[`content_style`] option automatically creates the `<style>` tag and puts it in the {productname} document’s `<head>`.
|
|
+
|
|
NOTE: This is the only supported way of adding a `<style>` tag to {productname} in Classic mode.
|
|
|
|
. A CSS stylesheet specified in the `<head>` of the iframe with a `<link>` tag.
|
|
+
|
|
For example:
|
|
+
|
|
[source,html]
|
|
----
|
|
<link rel="stylesheet" href="styles.css">
|
|
----
|
|
|
|
. A `<style>` tag in the `<head>` of the iframe.
|
|
+
|
|
For example:
|
|
+
|
|
[source,html]
|
|
----
|
|
<style>p { color: red; }</style>
|
|
----
|
|
|
|
. `style` attributes applied to specific elements within a document. That is, inline CSS
|
|
|
|
NOTE: By default, {productname} does not support `<style>` tags in the document `<body>`.
|
|
|
|
|
|
=== Inline mode support
|
|
|
|
xref:use-tinymce-inline.adoc[Inline mode] is not sandboxed. Consequently, any specified CSS can effect how editor content presents.
|
|
|
|
CSS can be specified in inline mode in the following ways:
|
|
|
|
. The `content_css` option
|
|
+
|
|
Setting the xref:add-css-options.adoc#content_css[`content_css`] option automatically creates the `<link>` tag and puts it in the {productname} document’s `<head>`.
|
|
+
|
|
NOTE: This is not recommended.
|
|
|
|
. A CSS stylesheet specified in the `<head>` of the document with a `<link>` tag.
|
|
+
|
|
For example:
|
|
+
|
|
[source,html]
|
|
----
|
|
<head>
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
----
|
|
|
|
. A CSS stylesheet specified in the `<body>` of the document.
|
|
+
|
|
For example:
|
|
+
|
|
[source,html]
|
|
----
|
|
<body>
|
|
<link rel="stylesheet" href="styles.css">
|
|
</body>
|
|
----
|
|
+
|
|
IMPORTANT: This is https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link[not recommended]. Some browsers allow it, however, and it is, as a consequence, honored by {productname} when presented.
|
|
|
|
. A `<style>` tag in the `<head>` of the document.
|
|
+
|
|
For example:
|
|
+
|
|
[source,html]
|
|
----
|
|
<style>p { color: red; }</style>
|
|
----
|
|
|
|
. A `<style>` tag can also be manually inserted in the document `<head>`.
|
|
|
|
. `style` attributes applied to specific elements within a document. That is, inline CSS
|
|
|
|
NOTE: By default, {productname} does not support `<style>` tags in the document `<body>`.
|
|
|
|
|
|
=== Shadow DOM support
|
|
|
|
IMPORTANT: Running a {productname} instance inside a Shadow DOM is xref:shadow-dom.adoc[not supported].
|
|
|
|
Although running neither {productname} nor the {pluginname} plugin in a Shadow DOM is supported, when a {productname} instance _is_ in a shadow root, the {pluginname} will likely still present
|
|
|
|
* CSS specified by the `xref:add-css-options.adoc#content_css[content_css]` option; and
|
|
|
|
* CSS specified by the `xref:add-css-options.adoc#content_style[content_style]` option
|
|
|
|
as expected, whether running in xref:use-tinymce-classic.adoc[Classic mode] or xref:use-tinymce-inline.adoc[Inline mode].
|
|
|
|
|
|
== Options
|
|
|
|
The following configuration options affect the behavior of the {pluginname} plugin.
|
|
|
|
include::partial$configuration/inline-css.adoc[]
|
|
|
|
== Events
|
|
|
|
// Inline CSS-specific events.
|
|
|
|
The {pluginname} plugin provides the following events.
|
|
|
|
include::partial$events/{plugincode}-events.adoc[]
|
|
|
|
== APIs
|
|
|
|
The {pluginname} plugin provides the following APIs.
|
|
|
|
include::partial$plugin-apis/{plugincode}-apis.adoc[]
|