Example of Using CKEditor Version 5 (from CDN)

Here's a quick example of how to use CKEditor Version 5

Include the library in your head:

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

In your form, add the class to the textarea:

...
<input type="textarea" name="myfield" id="myfield" class="ckeditor"></textarea>
...

Initiate the editor with the following script:

<script>
    ClassicEditor
        .create( document.querySelector( '.ckeditor', {
            resize_dir: 'both',
        } ) )
        .catch( error => {
            console.error( error );
        } );
</script>

 

Additional Resources:

Editor Styles - https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/content-styles.html

Custom Builds / Configurations - https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/configuration.html

Share this Post