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 4 editing area are different (e.g. the "Apollo 11" header is black, not green).

<h1><img alt="Saturn V carrying Apollo 11" class="right" src="assets/sample.jpg"/> Apollo 11</h1> <p><strong>Apollo 11</strong> was the spaceflight that landed the first humans, Americans <a href="http://en.wikipedia.org/wiki/Neil_Armstrong">Neil Armstrong</a> and <a href="http://en.wikipedia.org/wiki/Buzz_Aldrin">Buzz Aldrin</a>, on the Moon on July 20, 1969, at 20:18 UTC. Armstrong became the first to step onto the lunar surface 6 hours later on July 21 at 02:56 UTC.</p> <p>Armstrong spent about <s>three and a half</s> two and a half hours outside the spacecraft, Aldrin slightly less; and together they collected 47.5 pounds (21.5&nbsp;kg) of lunar material for return to Earth. A third member of the mission, <a href="http://en.wikipedia.org/wiki/Michael_Collins_(astronaut)">Michael Collins</a>, piloted the <a href="http://en.wikipedia.org/wiki/Apollo_Command/Service_Module">command</a> spacecraft alone in lunar orbit until Armstrong and Aldrin returned to it for the trip back to Earth.</p>

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.

<h1><img alt="Saturn V carrying Apollo 11" class="right" src="assets/sample.jpg"/> Apollo 11</h1> <p><strong>Apollo 11</strong> was the spaceflight that landed the first humans, Americans <a href="http://en.wikipedia.org/wiki/Neil_Armstrong">Neil Armstrong</a> and <a href="http://en.wikipedia.org/wiki/Buzz_Aldrin">Buzz Aldrin</a>, on the Moon on July 20, 1969, at 20:18 UTC. Armstrong became the first to step onto the lunar surface 6 hours later on July 21 at 02:56 UTC.</p> <p>Armstrong spent about <s>three and a half</s> two and a half hours outside the spacecraft, Aldrin slightly less; and together they collected 47.5 pounds (21.5&nbsp;kg) of lunar material for return to Earth. A third member of the mission, <a href="http://en.wikipedia.org/wiki/Michael_Collins_(astronaut)">Michael Collins</a>, piloted the <a href="http://en.wikipedia.org/wiki/Apollo_Command/Service_Module">command</a> spacecraft alone in lunar orbit until Armstrong and Aldrin returned to it for the trip back to Earth.</p>

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

Related Features

• Editor Types – Inline Editor
• Editor UI – Fixed User Interface
• Saving Data – Saving Data in CKEditor 4 Replacing a Textarea

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.25.0-lts/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,
        removeButtons: 'PasteFromWord'
      });
    </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.25.0-lts/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 4 styles are included as well to avoid copying default styles. */
        contentsCss: [
          'http://cdn.ckeditor.com/4.25.0-lts/full-all/contents.css',
          'https://ckeditor.com/docs/ckeditor4/4.25.0-lts/examples/assets/css/classic.css'
        ],
        removeButtons: 'PasteFromWord'
      });
    </script>
  </body>
  
  </html>