How to apply ckeditor css to output

Ck-editor works itself good, after i save editet text from ckeditor to database, and then i load it to page. Generated html is unformated, is there any aditional ckeditor js functions that have to be applied to target area, or is there any detault class needed to be added to text container ?

I checked ck-editor css files but there is no specific class, like when you check "contents.css" in ckeditor files and there is "img.left{border: 1px solid #ccc; .." thats pretty creepy since there is no specific class, it would work in plain iframe but if i show text from ckeditor in more complex page i have to rewrite css like ".wysiwyg img.left" and then reset all css by modified reset.css for .wysiwyg class, and its pretty hard to reset everything, isnt there some other way that i just missed badly in ck-editor documentation? since all i see in there are only examples in actual editor, not how to style generated text itself.

asked May 25 '14 at 19:51

Jiro Matchonson

3506 silver badges17 bronze badges

add a comment |

1 Answer 1

active oldest votes

+100

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 */
}

edited Sep 18 '14 at 16:50

answered Sep 18 '14 at 15:16

ncardeli

2,8532 gold badges16 silver badges22 bronze badges

I've added config.bodyClass = 'my-container'; to config.js and added the class my-container to the document container but with no luck still same ugly output – Youans Sep 18 '14 at 15:55
Are you linking to your custom CSS file from your page? A jsfiddle would be really useful. – ncardeli Sep 18 '14 at 16:13
Nop all I need is just to see the document just as entered I don't want any custom css. – Youans Sep 18 '14 at 16:17
But CKEditor loads contents.css file (which you can find in its main directory), so you need to load the same file. You can also modify it (or better copy and save outside CKEditor's directory and then edit), so all selectors there start with the same class (e.g. the my-container). – Reinmar Sep 19 '14 at 11:24
+1 for scoped Stylesheets. @Jiro you should upvote his answer too, since you've accepted it (unless you have reasons not to do that, which I guess you haven't). – Andrea Ligios Sep 22 '14 at 12:06

| show 1 more comment

Your Answer

Sign up or log in

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged css ckeditor or ask your own question.

标签

ckeditor

css