Usage

This package supplies a single class, RichTextEditor, which is a custom build of the CKEditor's classic editor. It extends from the ClassicEditor class provided by this project, so its usage is basically the same.

In your HTML page, add an element that MC2IT Rich Text Editor should make editable:

<textarea id="editor"></textarea>

Then call the RichTextEditor.create() method:

<script>
  RichTextEditor
    .create(document.querySelector('#editor'))
    .catch(error => console.error(error));
</script>

This code snippet will turn the <textarea id="editor"> into a rich text editor.

Features

• Essentials: Clipboard, Enter, ShiftEnter, Typing and Undo.
• Autoformatting
• Basic text styles: Bold, Italic, Strikethrough and Underline.
• Headings
• Images: Image, ImageCaption, ImageStyle and ImageToolbar.
• Media embed: MediaEmbed and MediaEmbedToolbar.
• Tables: Table and TableToolbar.
• Text alignment
• Other editing features: Link, List and Paragraph.

Localization

By default, the editor will display in French. This is the language built into the editor.js file.

In order to change the language of the editor UI, you need to load additional language file(s). These files are located in the build/i18n folder of this package.

<!-- jsDelivr -->
<script src="https://cdn.jsdelivr.net/npm/@sab-international/rich-text-editor/build/i18n/[lang].js"></script>

<!-- UNPKG -->
<script src="https://unpkg.com/@sab-international/rich-text-editor/build/i18n/[lang].js"></script>

For example:

<!-- jsDelivr -->
<script src="https://cdn.jsdelivr.net/npm/@sab-international/rich-text-editor/build/editor.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@sab-international/rich-text-editor/build/i18n/en.js"></script>

<!-- UNPKG -->
<script src="https://unpkg.com/@sab-international/rich-text-editor/build/editor.js"></script>
<script src="https://unpkg.com/@sab-international/rich-text-editor/build/i18n/en.js"></script>

Next, you can configure the editor to use one of the loaded language:

<script>
  RichTextEditor
    .create(document.querySelector('#editor'), {language: 'en'})
    .catch(error => console.error(error));
</script>

Advanced usage

For other uses and detailed instructions, you should look at the official CKEditor documentation.