CKEditor 5

WHAT IS CKEDITOR 5?

CKEditor 5 (also referred to as "CKEditor" throughout this blog) is a ready-to-use rich text editor. Correctly linked to a page, it will appear as a text-box with some common and simple editing options. The editor works much the same as others of similar kind, however, people do consider it to be wonky when compared to other rich text editors.

WHAT IS NEEDED TO SET UP CKEDITOR?

I will be using a code editor, Visual Studio Code (VSC), to utilize CKEditor. An html page should be created within the code editor, as this is where we will put the code. It is simple to input the editor, so I will include code samples below for inputting three different types of CKEditor rich text editors. Remember to keep all classes and ids consistent throughout the code for CKEditor to be incorporated correctly.

CODE SAMPLE EXAMPLES

CODE SAMPLE 1

There are multiple ways to put the Classic CKEditor into an html page. I will demonstrate one way using a script element with a src attribute having a specific url value as shown below (found here: Classic CKEditor on 04/05/2023).

SCRIPT ELEMENT

<script src="https://cdn.ckeditor.com/ckeditor5/36.0.1/classic/ckeditor.js"></script>

After linking through the above code, more script needs to be added to the html document to create the CKEditor as follows:

SCRIPT ELEMENT

<script>

    ClassicEditor
        .create( document.querySelector( '#editor' ) )
        .catch( error => {
            console.error( error );
        } );

</script>

To make Classic CKEditor appear and be usable on the web page, include the following code in the body of the html page.

HTML CODE

<div class="container">
    <div id="editor">Text to manipulate...</div>
</div>

Simply click into the text box on the webpage to type and start using its features intuitively, as it is similar to commonly used rich text editors which many people have used.

CODE SAMPLE 2

To instead input CKEditor with Inline configuration, some code simply needs to be updated as follows:

Change the value of the src attribute to the following url (found here: Inline CKEditor on 04/05/2023)

HTML SCRIPT ELEMENT

<script src="https://cdn.ckeditor.com/ckeditor5/36.0.1/inline/ckeditor.js"></script>

After linking through the above code, more script will need to be added to the html document to create the Inline CKEditor as follows:

SCRIPT ELEMENT

<script>

    InlineEditor
        .create( document.querySelector( '#editor' ) )
        .catch( error => {
            console.error( error );
        } );

</script>

To make the Inline CKEditor appear and be usable on the web page, include the following code in the body of the html page.

HTML CODE

<div class="container">
    <div id="editor">Text to manipulate...</div>
</div>

For Inline CKEditor, once the text area is clicked into the the editing options will appear.

CODE SAMPLE 3

And finally, to instead input the CKEditor with Balloon configuration, you guessed it, update the code again.

Change the value of the src attribute to the following url (found here: Balloon CKEditor on 04/05/2023)

SCRIPT ELEMENT

<script src="https://cdn.ckeditor.com/ckeditor5/36.0.1/balloon/ckeditor.js"></script>

Again, more script will need to be added to the html document to create the Balloon CKEditor as follows:

SCRIPT ELEMENT

<script>

    BalloonEditor
        .create( document.querySelector( '#editor' ) )
        .catch( error => {
            console.error( error );
        } );

</script>

And finally, to make it appear and be used on the web page, include the following code in the body of the html page.

HTML CODE

<div class="container">
    <div id="editor">Text to manipulate...</div>
</div>

The text-box is outlined when the text area is clicked into.

Once text is in the text area is highlighted, the options for editing appear as a balloon.

CONCLUSION

And there you go. CKEditor 5 rich text editor is simple to incorporate. The CKEditor 5 properties, methods and events can be found here ckdeitor.com (accessed on 04/05/2023) for further research into its use.

Information originally accessed through navigation of the cdn.ckeditor.com website (on 04/05/2023).