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);
});
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.