Css in content editor

How to get inline CSS in HTML for your apps

There’s many reasons why your CSS may not be showing in your HTML For instance, if you’re exporting HTML from a textbox or textarea in your app, or you’ve set up a WYSIWYG of some kind, it’s confusing if the styling is clearly showing in the text editor, but not available in the output.

However, there’s a text editor that overcomes this kind of CSS problem.

It does that by tying together the CSS and HTML content, and making sure inline CSS is associated with the target HTML tags. It’s called the Inline CSS plugin, and it’s built and maintained by TinyMCE.

The TinyMCE rich text editor is trusted for its quality features that speed up app development.Just a few of these features include:

What you’ll find in this article, is a guide on using the Inline CSS plugin – how to tie together CSS used to style HTML content in the text area, and export it with its style intact and working.

What is inline CSS?

Inline CSS has specific CSS style rules applied directly to HTML tags within a web page or app. You add them to HTML elements using the style attribute. For example:

A padded paragraph
 
A red Heading
 A brown background bold tag

Which results in the following inline CSS design:

What is external CSS?

External CSS are style rules that affect the appearance of a collection of HTML pages that make up a website. They are designed to create a consistent style across multiple different HTML pages. When done correctly, external CSS gives website visitors a consistent experience when they view different pages.

Inline CSS vs External CSS

The main advantage of inline CSS vs external CSS (apart from the location of the CSS), is loading speed. Because the browser only has to load the HTML file, and not a separate CSS file, it’s slightly faster to use inline CSS.

The disadvantage is that every inline CSS rule is associated with one specific tag. There’s no reusing rules. Without external CSS, you cannot apply one design rule to target all elements of the same tag, id, or class on a web page. There is a third type of CSS — embedded CSS — which is covered in the following paragraphs.

Inline CSS and pseudo classes

Another important limitation to be aware of is pseudo classes. External CSS can run a pseudo class like the :hover attribute. As noted on Stack Overflow by BoltClock: “In documents that make use of CSS, an inline style attribute can only contain property declarations; the same set of statements that appears in each ruleset in a stylesheet.”

What is embedded CSS?

Embedded CSS are style rules placed in a specific HTML document which style only that document’s content. This kind of CSS is not as specific as Inline CSS, nor is it as global as External CSS. When using embedded CSS, you could change the font of all headings in a specific index.html file, but in another .html file, the style rules would not apply. Embedded CSS usually appears within the head section of an HTML document.

How web apps use inline CSS?

Web apps use inline CSS to specify a style that’s required to overweight reused style across the page. Consider that id selectors have more weight compared to other HTML element selectors (that’s another thing to check if your CSS might not be working). Any inline CSS has priority and weighting over all other CSS selectors.

In their overview of CSS specificity, Vitaly Friedman writes:

“There are five distinct categories which define the specificity level of a given selector: inline styles, IDs, classes, attributes, and elements.” ~ Vitaly Freidman with Smashing Magazine, 2007.”

How to add inline CSS with a plugin

The inline CSS plugin runs by:

• Collecting CSS content specified in the TinyMCE configuration
• Combining it
• Applying it by iterating over the HTML content, and
• Then finally returning an object that contains the content now with InlineCSS added.

The documentation for the plugin explains more on how this process works.

The following demo sets up a basic TinyMCE rich text editor, and logs the inline css object to the developer console:

First, set up an API key. This key gives you free access to TinyMCE Premium plugins for 14 days.

1. Navigate to the Get-tiny sign up page to get your FREE API key.
2. Create an index.html file in your development environment
3. With your file open, in the head section, add script tags, and include the reference TinyMCE Cloud through a CDN link:

Note: When you use your key, you get access to Premium TinyMCE plugins for 14 days, as well as no warning messages concerning API keys in the text area.

1. Add another pair of script tags, add the following JavaScript. It’s the tinymce.init method, and it’s how you control TinyMCE:

1. Add initial HTML content, and the CSS selector class to some textarea tags. The selector is set as an id with the value “editor” in the TinyMCE init script:

1. Test run the index.html file by opening it in your browser, or use a local server command with Python or with the PHP command:

 plugins: 'powerpaste casechange searchreplace autolink directionality advcode visualblocks visualchars image link media mediaembed codesample table charmap pagebreak nonbreaking anchor tableofcontents insertdatetime advlist lists checklist wordcount tinymcespellchecker editimage help formatpainter permanentpen charmap linkchecker emoticons advtable export autosave inlinecss',

1. Add the content style option to the TinyMCE configuration to provide some CSS to tie to the HTML content:

1. After the html body section, set up a pair of script tags and add a function that includes the inline CSS API method:

1. Save the changes
2. Open the demo in the browser using Python or with the PHP command to run the demo
3. Open the developer tools, and click the button to see the inline CSS added to the text area content and printed in the console:

Inline CSS working with HTML

The Inline CSS plugin can tie together CSS that you’ve set up for content in your text editor, removing any doubt and confusion that you can collect up the inline CSS style and add it to the HTML where it’s needed.

The Inline CSS plugin is a part of the TinyMCE 6.3 release, and you can find out more about what’s available in the TinyMCE 6.3 release update.

To see another, large-scale example of the Inline CSS plugin working, check on the Email use case defined in the TinyMCE email solutions page.

Contact us if you have any questions on the TinyMCE plugins, or about style and CSS in your app.

Источник

Adding or changing the editor content CSS

These content CSS files can be enabled in the editor using the content_css configuration option.

These content CSS files can also be used as a template for creating a custom content CSS file for the editor. For the CSS files, see: tinymce-dist GitHub Repository — Content CSS files.

Tiny also provides content CSS files with the premium skins, for a list of premium content CSS files, see: Tiny Skins and Icon Packs.

Tiny recommends using the same CSS for both the editor and the page where the editor content will be rendered.

If a relative path is specified, it will be resolved in relation to the URL of the webpage TinyMCE is rendered in.

Absolute path example

// File: http://domain.mine/mysite/index.html tinymce.init(< selector: 'textarea', // change this value according to your HTML content_css: '/myLayout.css' // resolved to http://domain.mine/myLayout.css >);

Relative path example

// File: http://domain.mine/mysite/index.html tinymce.init(< selector: 'textarea', // change this value according to your HTML content_css: 'mycontent.css' // resolved to http://domain.mine/mysite/mycontent.css >);

To load multiple stylesheets, provide the paths as either a array of strings or a comma-separated string.

Using multiple stylesheets example

Using multiple stylesheets as array example

Browser caching

Browser caching might cause TinyMCE to not read the contents of a changed CSS file. You’ll see «old» colors & styles.

One solution is to manually clear the browser cache when the file for content_css or editor_css has changed. Another solution is to use an old hack which adds a bogus parameter to the URL containing a present time stamp like «myFile.css?bogus=10023561235». Possible solutions could look like this:

To remove the margins between paragraphs (sometimes requested for using TinyMCE in email clients), add the following style to the content CSS:

/* Removes margins on paragraphs, might be useful for mail clients */ p

content_css_cors

When content_css_cors is set to true , the editor will add a crossorigin=»anonymous» attribute to the link tags that the StyleSheetLoader uses when loading the content_css . This allows you to host the content_css on a different server than the editor itself.

Type: Boolean

Default value: false

Possible values: true , false

Example: using content_css_cors

// File: http://domain.mine/mysite/index.html tinymce.init(< selector: 'textarea', // change this value according to your HTML content_css: 'http://www.somewhere.example/mycontent.css', content_css_cors: true >);

content_style

This option allows custom CSS styles to be set as a string. The styles are injected into the head of the page containing the editable area. In TinyMCE’s classic mode, it is injected into the head of TinyMCE’s iframe. In inline mode, it is injected into the head of the page TinyMCE is rendered in.

Type: String

content_style styles are not saved within TinyMCE’s content. If they are needed for display purposes, ensure the styles are also included in the page the content will be displayed on.

Example: applying one CSS style using content_style

To add two or more styles with this option, provide the styles as a single string.

Example: applying two or more CSS styles using content_style

Add fonts to the editor

font_css

The font_css option loads the specified font CSS files into both the editable area and the webpage TinyMCE is rendered in.

Font CSS files should only contain CSS for specifying custom fonts using the @font-face and related CSS rules.

Type: String , Array

This option is intended for use with TinyMCE’s classic mode, as the editable area is sandboxed within an iframe. For inline mode editors, relevant font CSS files should be loaded as part of the webpage TinyMCE is rendered in, not using the font_css option.

If a relative path is specified, it will be resolved in relation to the URL of the webpage TinyMCE is rendered in.

Absolute path example

// File: http://domain.mine/mysite/index.html tinymce.init(< selector: 'textarea', // change this value according to your HTML font_css: '/myFont.css' // resolved to http://domain.mine/myFont.css >);

Relative path example

// File: http://domain.mine/mysite/index.html tinymce.init(< selector: 'textarea', // change this value according to your HTML font_css: 'myFont.css' // resolved to http://domain.mine/mysite/myFont.css >);

To load multiple font CSS files, provide the paths as either a array of strings or a comma-separated string.

Using multiple stylesheets example

Источник