<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>
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);
  });

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdn.ckeditor.com/ckeditor5/21.0.0/classic/ckeditor.js