Search code examples
javascriptckeditor

CKEditor 5 toolbar is greyed out


I'm trying to upgrade my ckeditor to CKE5. After wrestling with the dismal documentation around the toolbar, I finally got most/all of the toolbar options to appear. The problem is the toolbar is greyed out and also the editing area is uneditable. I have a custom build downloaded as a zip file from the CKEditor website (build ID 7mg2hjrna9z9-7ljqut3s4uri if that helps). No errors are currently visible in the console.

Here's the script to initiate the ckEditor:

ClassicEditor
    .create(document.querySelector('#Content'), {
        toolbar: {
            items: [
                "undo",
                "redo",
                "heading",
                "|",
                "bold",
                "italic",
                "underline",
                "strikethrough",
                "subscript",
                "superscript",
                "removeFormat",
                "|",
                "numberedList",
                "bulletedList",
                "|",
                "blockQuote",
                "indent",
                "outdent",
                "|",
                "alignment",
                "highlight",
                "removeHighlight",
                "|",
                "link",
                "ckfinder",
                'mediaEmbed',
                "insertImage",
                "imageInsert",
                //"resizeImage",
                //"imageResize",
                //"linkImage",
                "|",
                "code",
                "codeBlock",
                "htmlEmbed",
                "|",
                "selectAll",
                "fontColor",
                "fontFamily",
                "fontSize",
                "horizontalLine",
                "specialCharacters",
                "|",
                "insertTable",
            ],
            shouldNotGroupWhenFull: true
        },
        image: {
            toolbar: [
                "imageStyle:full",
                "imageStyle:side",
                "|",
                "linkImage",
                "imageTextAlternative"
            ]
        },
        table: {
            contentToolbar: [
                'tableColumn',
                'tableRow',
                'mergeTableCells',
                'tableCellProperties',
                'tableProperties'
            ]
        },
        mediaEmbed: {
            toolbar: ['mediaEmbed'],
            previewsInData: true
        }
    })
    .then(editor => {
        //debugger;
        window.editor = editor;
        var tools = Array.from(editor.ui.componentFactory.names());
        console.log(tools);
        console.log(editor);
    })
    .catch(error => {
        console.error(error);
    });

Solution

  • I created a new build with a different set of features. I think maybe my original build had paid features which I didn't have a license for. The new build worked.