'CKEditor 4 works but CKEditor 5 doesn't

This works :

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CKEditor Classic Editing Sample</title>
    <!-- Make sure the path to CKEditor is correct. -->
    <script src="scripts/ckeditor/ckeditor.js"></script>
    <!-- this is with CKEDITOR 4 -->
    <script>
      window.addEventListener("load", function() {
        CKEDITOR.replace ('editor1');
      });
    </script>
</head>
<body>
    <form method="post">
        <p>
            My Editor:<br>
            <textarea name="editor1" id="editor1">&lt;p&gt;Initial editor content.&lt;/p&gt;</textarea>
        </p>
        <p>
            <input type="submit">
        </p>
    </form>
</body>
</html>

But the exact same HTML, with the script path changed to CKEditor 5, the <textarea> is not replaced :

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CKEditor Classic Editing Sample</title>
    <!-- Make sure the path to CKEditor is correct. -->
    <script src="scripts/ckeditor5-build-classic/ckeditor.js"></script>
    <!-- this is with CKEDITOR 5 -->
    <script>
      window.addEventListener("load", function() {
        CKEDITOR.replace ('editor1');
      });
    </script>
</head>
<body>
    <form method="post">
        <p>
            My Editor:<br>
            <textarea name="editor1" id="editor1">&lt;p&gt;Initial editor content.&lt;/p&gt;</textarea>
        </p>
        <p>
            <input type="submit">
        </p>
    </form>
</body>
</html>

I downloaded the CKeditor 5 zip file and unpacked to path as indicated. In the second case, the chrome error console shows :

Uncaught ReferenceError: CKEDITOR is not defined

What am I missing ?

javascript ckeditor

Solution 1:^[1]

So, eventually I found the relevant article on CKEditor web site : https://cdn.ckeditor.com/#ckeditor5

The API for v5 requires a different syntax :

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CKEditor Classic Editing Sample</title>
    <!-- Make sure the path to CKEditor is correct. -->
    <script src="https://cdn.ckeditor.com/ckeditor5/16.0.0/classic/ckeditor.js"></script>
    <script>
    window.addEventListener("load", function() {
      ClassicEditor
           .create( document.querySelector( '#editor' ) )
           .then( editor => {
                   console.log( editor );
           } )
           .catch( error => {
                   console.error( error );
           } );
    });
    </script>
</head>
<body>
  <div id="editor">This is some sample content.</div>
</body>
</html>

Maybe it's just me but I think the basic "get started" guide could be better. I also got errors with v5 until I put the initialisation code into an event listener.

Solution 2:^[2]

CKEditor 5 can provide any WYSIWYG editor type. Choose ClassicEditor with little config to assure the upadating textarea content by using the editor.updateSourceElement() method:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CKEditor Classic Editing Sample</title>
    <!-- Make sure the path to CKEditor is correct. -->
    <script src="https://cdn.ckeditor.com/ckeditor5/34.0.0/classic/ckeditor.js"></script>

    <script>
    window.addEventListener("load", function() {
        ClassicEditor
            .create( document.querySelector( '.kt_ckeditor' ), {
                toolbar: ['heading', '|',
                    'bold', 'italic', 'strikethrough', 'underline', 'subscript', 'superscript', '|',
                    'outdent', 'indent', '|',
                    'bulletedList', 'numberedList', 'todoList', '|',
                    'insertTable', '|',
                    'uploadImage', 'blockQuote', '|',
                    'undo', 'redo', 'editor'],
                shouldNotGroupWhenFull: true
            })
            .then( editor => {
                editor.editing.view.document.on( 'change', ( evt, data ) => {
                    editor.updateSourceElement();
                } );

            } )
            .catch( error => {
                console.error( error );
            })
    });
    </script>
</head>
<body>
  <div id="editor">This is some sample content.</div>
</body>
</html>

Note that the replaced element is updated automatically by CKEditor straight before the submission. If you need to access the value programatically with JavaScript (e.g. in the onsubmit handler to validate the entered data), there is a chance that the element would still store the original data. In order to update the value of the replaced , use the editor.updateSourceElement() method.

If you need to get the actual data from CKEditor at any moment using JavaScript, use the editor.getData() method as described in the next section.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Grindlay
Solution 2	Abdelkarim SEBTI

'CKEditor 4 works but CKEditor 5 doesn't

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]