how to use CKEditor5

If you have a blog or a site and want to add rich text editor ,You can use ckeditor5.

how to use CKEditor5

In this article, we will learn the correct way to add ckeditor5 to our website.

CKEditor5 has many advantages

  1. Auto-formatting
  2. Paste from Word
  3. Embed media
  4. Responsive images

how to use CKEditor

it`s easy to use CKEditor5  just 3 steps 

first open CKEditor5 download page ,then you can see a five styles to choose from

  1. Classic
  2. Balloon 
  3. balloon-block
  4. inline
  5. document

if you select first style CKEditor 5 Classic you can see the CDN javasecript  link 

copy it and past befor </head> tag

<html>
    <head>
        <title>Hello ckeditor</title>
        <script src="https://cdn.ckeditor.com/ckeditor5/12.4.0/classic/ckeditor.js"></script>
    </head>

then add the selector to the text area element id="editor"

<html>
    <head>
        <title>Hello ckeditor</title>
        <script src="https://cdn.ckeditor.com/ckeditor5/12.4.0/classic/ckeditor.js"></script>
    </head>
    <body>
        <form>
            <textarea name="content" id="editor"></textarea>
        </form>

The last Steps is to create  instance , before the end of the </body>  tag add this script

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

ckeditor full demo

this code will show you the full code of CKEditor-5  and how to use it 

<html>
    <head>
        <title>Hello ckeditor</title>
        <script src="https://cdn.ckeditor.com/ckeditor5/12.4.0/classic/ckeditor.js"></script>
    </head>
    <body>
        <form>
            <textarea name="content" id="editor"></textarea>
        </form>
        
    <script>
        ClassicEditor
            .create( document.querySelector( '#editor' ) )
            .catch( error => {
                console.error( error );
            } );
    </script>
    </body>
</html>

how to use CKEditor5

 

 

Last modified