ckeditor 5 online builder not showing

user_13585419 0
Viewed 2143

I used the ckeditor 5 online builder, downloaded a zipped file. I unzipped it and created an html file to include the editor as follow :

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>College Connect</title>

    <script src="ckeditor5/build/ckeditor.js"></script>
    
</head>

<body>
    <div id="editor"></div>
    
    <script>
        ClassicEditor
            .create(document.querySelector('#editor'))
            .then(editor => {
                console.log(editor);
            })
            .catch(error => {
                console.error(error);
            });
    </script>
</body>

</html>

that's not working and produces this error Uncaught ReferenceError: ClassicEditor is not defined however, when i used the full version from here , it worked fine.

Is there something i need to do before using the online builder ?

ckeditor5 ckeditor html javascript
2 Answers

You can use CDN in script tag instead of using downloaded file (provided in ckeditor.com itself). It will work. Else you are supposed to put your html file in the same folder in which your unzipped file exist or you can provide correct path of your downloded file in the script tag.

user_74612310

Setting the toolbar this way worked for me.

let editor;

ClassicEditor.create(document.querySelector('#id-textarea'), {
  toolbar: [
    'heading',
    'bold',
    'italic',
    'underline',
    'fontFamily',
    'fontSize',
    'fontColor',
    'undo',
    'redo',
    'alignment',
    'indent',
    'list',
    'horizontalLine',
    'paragraph',
    'removeFormat',
    'specialCharacters',
    'wordCount',
  ],
})
  .then((newEditor) => {
    editor = newEditor;
  })
  .catch((error) => {
    console.error(error);
  });
user_139109850
Related