How to Apply Ckeditor CSS to Output

How to apply ckeditor css to output

If you just want the HTML authored in CKEditor to look the same inside your page, first you must insert it inside a div element with a custom class, for example, "my-container".

Then you have to include contents.css in your page. Here you have to alternatives: 1) use Scoped Stylesheets or 2) modify contents.css, scoping each rule.

1. Using Scoped Stylesheets

In this case you should use Scoped Stylesheets and JQuery Scoped CSS plugin (due to current lack of browser support).

Your HTML code would look like this:

<div class="my-container">
    <style scoped>
        @import "ckeditor/contents.css";
    </style>
    <!-- Your HTML goes here -->
</div>

2. Scoping each rule inside contents.css

In this case you must link to a modified copy of CKEditor's contents.css file. Each of the rule's selector must be scoped to "my-container" class, so it doesn't affect the rest of the page. Example contents.css file:

.my-container
{
    /* Font */
    font-family: sans-serif, Arial, Verdana, "Trebuchet MS";
    font-size: 12px;

    /* Text color */
    color: #333;

    /* Remove the background color to make it transparent */
    background-color: #fff;

    margin: 20px;
}

.my-container .cke_editable
{
    font-size: 13px;
    line-height: 1.6em;
}

.my-container blockquote
{
    font-style: italic;
    font-family: Georgia, Times, "Times New Roman", serif;
    padding: 2px 0;
    border-style: solid;
    border-color: #ccc;
    border-width: 0;
}

.my-container .cke_contents_ltr blockquote
{
    padding-left: 20px;
    padding-right: 8px;
    border-left-width: 5px;
}

.my-container .cke_contents_rtl blockquote
{
    padding-left: 8px;
    padding-right: 20px;
    border-right-width: 5px;
}

.my-container a
{
    color: #0782C1;
}

.my-container ol,.my-container ul,.my-container dl
{
    /* IE7: reset rtl list margin. (#7334) */
    *margin-right: 0px;
    /* preserved spaces for list items with text direction other than the list.    (#6249,#8049)*/
    padding: 0 40px;
}

.my-container h1,.my-container h2,.my-container h3,.my-container h4,.my-container h5,.my-container h6
{
    font-weight: normal;
    line-height: 1.2em;
}

.my-container hr
{
    border: 0px;
    border-top: 1px solid #ccc;
}

.my-container img.right
{
    border: 1px solid #ccc;
    float: right;
    margin-left: 15px;
    padding: 5px;
}

.my-container img.left
{
    border: 1px solid #ccc;
    float: left;
    margin-right: 15px;
    padding: 5px;
}

.my-container pre
{
    white-space: pre-wrap; /* CSS 2.1 */
    word-wrap: break-word; /* IE7 */
}

.my-container .marker
{
    background-color: Yellow;
}

.my-container span[lang]
{
   font-style: italic;
}

.my-container figure
{
    text-align: center;
    border: solid 1px #ccc;
    border-radius: 2px;
    background: rgba(0,0,0,0.05);
    padding: 10px;
    margin: 10px 20px;
    display: block; /* For IE8 */
}

.my-container figure figcaption
{
    text-align: center;
    display: block; /* For IE8 */
}

Apply styles to HTML output of CKEditor 5

Your question boils down to this FAQ entry:

There is no such thing as the contents.css file because in CKEditor 5
features bring their own content styles, which are by default included
in the JavaScript build and loaded by the style–loader (they can be
extracted, too). It optimizes the size of the builds as the styles of
unused features are simply excluded.
Although some styles are provided by the features, it is up to the
developers to make sure the content created by CKEditor 5 is properly
styled, both in the front–end and in the back–end. To style the
content in the editor (back–end), use the .ck-content CSS class

There are very few content styles provided by the editor at this moment. That's why it's up to website maintainers to style the edited content in the front/back–end.

For instance, to make sure the <a> elements are properly styled, you'd probably want something like this:

#content-container-in-frontend a,
#backend-container .ck-content a {
   ...
}

P.S. Don't hesitate to have your say in the issue about content styles. We'd love to know more about your use–case (What's your environment? Do you use Webpack? How do you manage styles in the project?), what would you expect and what works best for you.

Update: You can now browse content styles used by the editor and use them in the front-end of your application. Learn more.

How can I couch the CKEditor inline output in custom surrounding HTML with custom CSS files?

I was not able to find a way to integrate html / styling in the way that I had asked for above. And given the radio silence on this issue, I suspect that what I've asked for here may not be possible. I did, however, figure out a way to achieve the next best thing using the preview button. Depending on the item our editors are editing, clicking the preview button will now show an instant preview for that particular item, styled as if it were live on our sites. Here's a step-by-step for those interested.

First, assume we have the following to start:

CKEDITOR.replace('editor', config);

Second, We'll want to add the following to the config and place it before the line above so that the event is registered to the editor:

Object.assign(config, {
  on: {
    contentPreview: function(e) {
      let match = e.data.dataValue.match(/<body[^>]*>((?:.|\s)*)<\/body>/),
        before = '' +
          '<html>' +
            '<head>' +
            '</head>' +
            '<body>',
        content = match[1],
        after = '' +
            '</body>' +
          '</html>;
      e.data.dataValue = before + content + after;
    }
  }
});

content will now contain whatever the user has entered in the editor. And by adding before, content, and after together, we end up with the web page that will be presented in the preview. Only now, the page is under our control, and we can make adjustments based on what page the editor is viewing, other fields on the page, and so on, and we can add in links to our site's live styles.

Let's say that I now want to add in Bootstrap and a link to my site's styling. And let's say I want to surround content with one type of container if an editor is working on a blog and another if he is working on a news story. In this case, I might do something like this:

Object.assign(config, {
  on: {
    contentPreview: function(e) {
      let match = e.data.dataValue.match(/<body[^>]*>((?:.|\s)*)<\/body>/),
        before = '' +
          '<html>' +
            '<head>' +
              '<link href="//stackpath.bootstrapcdn.com/bootstrap/4.5.6/css/bootstrap.min.css" rel="stylesheet" type="text/css">' +
              '<link href="//mylivesite.com/styles.css" rel="stylesheet" type="text/css">' +
              '<script src="//mylivesite.com/scripts.js"></' + 'script>' +
            '</head>' +
            '<body>',
        content = match[1],
        after = '' +
            '</body>' +
          '</html>;
      if (location.pathname.indexOf('blog') > -1)
        content = '' +
          '<div class="row blog">' +
            '<div class="col-sm-8">' + content + '</div>' +
            '<div class="col-sm-4">Blog Right Column Content</div>' +
          '</div>';
      else
        content = '' +
          '<div class="row news">' +
            '<div class="col-sm-8">' + content + '</div>' +
            '<div class="col-sm-4">News Right Column Content</div>' +
          '</div>';
      e.data.dataValue = before + content + after;
    }
  }
});

Now when the preview opens, it will have all the styling from the live site as well as bootstrap columns, so the editor can play with the browser and see how everything will look at various dimensions.

In a sense then, this is superior to just seeing styles in the editor as you type (although that still would be nice), since it allows editors to get a sense of what the content will look like in the context of the page on which it appears after styles have loaded and scripts executed. And if content will appear differently based upon which options the editor has selected, you can build the preview page dynamically based on those values prior to presenting the preview.

This was the solution I ended up with, and my people were very pleased with it, so I thought I would share.

How to make CKEditor render text with a CSS?

The actual best answer to this question would be:

CKEDITOR.config.contentsCss = '/mycustom.css';
CKEDITOR.replace('myfield');

Because you probably would like to have different styles in different editors. If you change the main content.css like Jalil did, you would not be able to do that.

CKEditor 4.7: Is it possible to apply css class to specific elements only in the WYSIWYG mode?

I would personally listen to the toDataFormat and toHtml events to add then remove the CSS class to the elements you want. This way, the user will not see the class when retrieving the data back from CKEditor or when switching to source mode.

Here is the updated code (you still need to customise it according to your needs):

CKEDITOR.plugins.add('emptytags', {
    lang: "de,en",
    onLoad: function(editor) {
        CKEDITOR.addCss(
        '.cke_editable .rte-empty {' +
            ' border: 1px dotted red;' +
        '}'
        );
    },
    init: function (editor) {

        editor.on('toHtml', function (evt) {

            markEmptyChildren(evt.data.dataValue);

        }, null, null, 14);

        editor.on('toDataFormat', function (evt) {

            unmarkEmptyChildren(evt.data.dataValue);

        },
        null, null, 14);

        function markEmptyChildren(element) {
            var children = element.children;
            if (children) {
                for (var i = children.length; i--; ) {
                var child = children[i];
                if (child.name == "p") {
                    if (isEmpty(child)) {
                    child.addClass("rte-empty")
                    } else {
                    child.removeClass("rte-empty")
                    }
                }
                markEmptyChildren(child);
                }
            }
        }

        function unmarkEmptyChildren(element) {
            var children = element.children;
            if (children) {
                for (var i = children.length; i--; ) {
                var child = children[i];
                if (child.name == "p") {
                    child.removeClass("rte-empty")
                }
                unmarkEmptyChildren(child);
                }
            }
        }

        function isEmpty(node) {

            if (node instanceof CKEDITOR.htmlParser.element) {
                if (node.name == "br") {
                    return true;
                } else {
                    var children = node.children;
                    for (var i = children.length; i--; ) {
                        var child = children[i];
                        if (!isEmpty(children[i])) {
                            return false;
                        }
                    }
                    return true;
                }
            } else if (node instanceof CKEDITOR.htmlParser.text) {
                return node.value.trim().length === 0;
            } else {
                return true;
            }

        }
    }
});

See JSFiddle here.

How to set datas with css style with CKEditor?

If you are using the new 4.1 CKEditor, it might be because of the new Advanced Content Filter feature. It nukes tags, attributes and attribute contents from content HTML, see demo. Turn it off by adding config.allowedContent = true to your config. More info on configuration in the API

You can test for this easily in your CKE instance by going to source mode, adding some attributes manually into the content, like <div class="MagicalPonies"><div><i></i><span... Then switch to wysiwyg mode and back to source mode. If your class definition is missing, it's most likely ACF. Also try to add a class like <img alt="X" class="left" src="http://b.cksource.com/a/1/img/sample.jpg" /> and see if that sticks. Standard CKE classes like that aren't removed.

How to Apply Ckeditor CSS to Output