Tips & Tricks

How to make CKEditor (almost) WYSIWYG

When using cutom theme, sometimes it is necessary to tell CKEditor to use the correct style.
Let's use as example the marinelli theme.

By default, it is hard to create a page with CKEditor: background color used by site and font color are too similar and it's very hard to read anything, text is aligned to the center:

Fortunately, there is a way to tell CKEditor to appear just like we expect.

Take a look at the source of marinelli template (you may use Firefox with Firebug to do that). The ID of main element is called "primary". The class is named "singlepage".

All we need to do is to tell CKEditor to use that styles:

  • Edit CKEditor profile, in the "CSS section" choose use theme css
  • In modules/ckeditor/ckeditor.config.js, add the following:
    config.bodyClass = 'singlepage';
    config.bodyId = 'primary';
  • Now our body inside of the CKEditor gets the right ID.
  • Well we still have the wrong background and text alignment. To fix this, add another line in ckeditor.config.js:
    config.extraCss += "body{background:#FFF;text-align:left;font-size:0.8em;}";
    because lists also don't look nice by default, we'll add some margin:
    config.extraCss += "#primary ol, #primary ul{margin:10px 0 10px 25px;}";
    (see in Firebug how styles for lists are defined in marinelli theme to understand the problem)
  • Remember to clear your browser's cache after applying changes to javascript files.

Here's the final result:

 

Necessary changes for marinelli theme are already available in ckeditor.config.js. They can be taken as an example.

Screencasts!

Comments

dsafdsafdafads

dsafdsafdafads

tach

tach

test

test

ljkbjhk dgsfdgsdfg rzect azer

ljkbjhk dgsfdgsdfg rzect azer

htfbfdvfdvfdvfdsvfdvfd

htfbfdvfdvfdvfdsvfdvfd

test

test

WTF?  No, I didn't enter all

WTF?  No, I didn't enter all those spaces.

<p>
    it&#39;s yellow?</p>
<ul>
    <li>
        Foo
        <ul>
            <li>
                Bar</li>
        </ul>
    </li>
    <li>
        Baz</li>
</ul>


TEST

(No subject)


Test for Drupal.

Test for Drupal.

Post new comment

  • HTML tags will be transformed to conform to HTML standards.

More information about formatting options