Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="editor">
  <h2>Bilingual Personality Disorder</h2>
  <p>
    This may be the first time you hear about this made-up disorder but
    it actually isn’t so far from the truth. Even the studies that were conducted almost half a century show that
    <strong>the language you speak has more effects on you than you realise</strong>.
  </p>
  <p>
    One of the very first experiments conducted on this topic dates back to 1964.
    <a href="https://www.researchgate.net/publication/9440038_Language_and_TAT_content_in_bilinguals">In the experiment</a>
    designed by linguist Ervin-Tripp who is an authority expert in psycholinguistic and sociolinguistic studies,
    adults who are bilingual in English in French were showed series of pictures and were asked to create 3-minute stories.
    In the end participants emphasized drastically different dynamics for stories in English and French.
  </p>
  <p>
    Another ground-breaking experiment which included bilingual Japanese women married to American men in San Francisco were
    asked to complete sentences. The goal of the experiment was to investigate whether or not human feelings and thoughts
    are expressed differently in <strong>different language mindsets</strong>.
    <Here>is a sample from the the experiment:</Here>
  </p>
  <p>
    More recent <a href="https://books.google.pl/books?id=1LMhWGHGkRUC">studies</a> show, the language a person speaks affects
    their cognition, behaviour, emotions and hence <strong>their personality</strong>.
    This shouldn’t come as a surprise
    <a href="https://en.wikipedia.org/wiki/Lateralization_of_brain_function">since we already know</a> that different regions
    of the brain become more active depending on the person’s activity at hand. Since structure, information and especially
    <strong>the culture</strong> of languages varies substantially and the language a person speaks is an essential element of daily life.
  </p>
</div>
              
            
!

CSS

              
                
              
            
!

JS

              
                function AddClassToAllHeading1(editor) {
  // Both the data and the editing pipelines are affected by this conversion.
  editor.conversion.for("downcast").add((dispatcher) => {
    // Headings are represented in the model as a "heading1" element.
    // Use the "low" listener priority to apply the changes after the headings feature.
    dispatcher.on(
      "insert:listItem",
      (evt, data, conversionApi) => {
        const viewWriter = conversionApi.writer;

        viewWriter.addClass(
          "list-item",
          conversionApi.mapper.toViewElement(data.item)
        );
      },
      { priority: "low" }
    );
  });
}

ClassicEditor.create(document.querySelector(".editor"), {
  toolbar: {
    items: [
      "heading",
      "|",
      "bold",
      "italic",
      "bulletedList",
      "numberedList",
      "link",
      "blockQuote",
      "|",
      "undo",
      "redo",
      "|"
    ]
  },
  heading: {
    options: [
      {
        model: "paragraph",
        title: "Paragraph",
        class: "ck-heading_paragraph"
      },
      {
        model: "heading2",
        view: "h2",
        title: "Heading 2",
        class: "ck-heading_heading2"
      },
      {
        model: "heading3",
        view: "h3",
        title: "Heading 3",
        class: "ck-heading_heading3"
      },
      {
        model: "heading4",
        view: "h4",
        title: "Heading 4",
        class: "ck-heading_heading4"
      },
      {
        model: "heading2_class",
        view: {
          name: "p",
          classes: "h2"
        },
        title: "Heading 2 (class)",
        class: "ck-heading_heading2",
        // It needs to be converted before the standard 'heading2'.
        priority: "high"
      },
      {
        model: "heading3_class",
        view: {
          name: "p",
          classes: "h3"
        },
        title: "Heading 3 (class)",
        class: "ck-heading_heading3",
        // It needs to be converted before the standard 'heading2'.
        priority: "high"
      },
      {
        model: "heading4_class",
        view: {
          name: "p",
          classes: "h4"
        },
        title: "Heading 4 (class)",
        class: "ck-heading_heading4",
        // It needs to be converted before the standard 'heading2'.
        priority: "high"
      }
    ]
  },
  extraPlugins: [AddClassToAllHeading1],
  language: "ru"
})
  .then((editor) => {
    window.editor = editor;
  })
  .catch((error) => {
    console.error("Oops, something gone wrong!");
    console.error(
      "Please, report the following error in the https://github.com/ckeditor/ckeditor5 with the build id and the error stack trace:"
    );
    console.warn("Build id: qx0uru7ua4iy-lg3xgz2xd0rt");
    console.error(error);
  });

              
            
!
999px

Console