CKEditor SDK

Classic Editor Documentation

Classic editor is what most users traditionally learnt to associate with a rich text editor — a toolbar with an editing area placed in a specific position on the page, usually as a part of a form that you use to submit some content to the server. Sometimes it is also called "framed editing", because in this scenario the editor creates a temporary <iframe> element for itself.

In this editing solution the styles of the editor content are separated from the styles of the surrounding page. It is particularly useful when:

Due to focus on semantic markup and possible differences between the styles of content within the editor and the styles used when the content is rendered on a page, such editors are sometimes called WYSIWYM editors ("What You See Is What You Mean").

Classic editor is usually implemented with fixed user interface to replace a standard <textarea> element in an HTML form on the web page.

Classic Editor with Default Styles

Classic editor uses its own set of default styles for edited content. In the editor instance below you can see that the font style, size, and colors on this page and inside the CKEditor editing area are different (e.g. the "Apollo 11" header is black, not green).

Classic Editor with Custom Styles

It is possible to specify custom styles for edited content with the config.contentsCss option. In the editor instance below font size was increased and the colors of links, headers, and struck-through content were changed.

By fine-tuning a stylesheet for CKEditor you can make your content look exactly the same both on the page and inside the editor.

Related Features