Contribute to this guideReport an issue

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:

  • Admininistration and frontend themes in a CMS are different — as inheriting styles from the backend theme would make no sense here.
  • Edited content is rendered in different locations of a website that may have different styling — as in such case it is more efficient to just focus on creating semantically correct syntax.
  • The editor works in a changeable environment (e.g. a themable CMS) — where it is hard to predict how user themes will be constructed.

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

Get Sample Source Code

  • Classic editor with default styles
                    <!doctype html>
    <html lang="en">
    
    <head>
      <meta charset="utf-8">
      <meta name="robots" content="noindex, nofollow">
      <title>Classic editor with default styles</title>
      <script src="https://cdn.ckeditor.com/4.11.1/standard-all/ckeditor.js"></script>
    </head>
    
    <body>
      <textarea cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href=&quot;https://ckeditor.com/&quot;&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
      <script>
        CKEDITOR.replace('editor1', {
          height: 260,
          width: 700,
        });
      </script>
    </body>
    
    </html>
  • Classic editor with custom styles
                    <!doctype html>
    <html lang="en">
    
    <head>
      <meta charset="utf-8">
      <meta name="robots" content="noindex, nofollow">
      <title>Classic editor with custom styles</title>
      <script src="https://cdn.ckeditor.com/4.11.1/standard-all/ckeditor.js"></script>
    </head>
    
    <body>
      <textarea cols="80" id="editor2" name="editor2" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href=&quot;https://ckeditor.com/&quot;&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
      <script>
        CKEDITOR.replace('editor2', {
          height: 260,
          /* Default CKEditor styles are included as well to avoid copying default styles. */
          contentsCss: [
            'http://cdn.ckeditor.com/4.11.1/full-all/contents.css',
            'https://ckeditor.com/docs/vendors/4.11.1/ckeditor/assets/css/classic.css'
          ]
        });
      </script>
    </body>
    
    </html>