fontSize in Toolbar of ckeditor

jaeweb

Hi,
I managed to get ckeditor to work and show BulletedList, Undo and Redo in the toolbar. Bute fontSize is not working:

"type": "ckeditorClassic", "opts": { "toolbar" : ['fontsize','BulletedList', 'Undo', 'Redo'], },

Console shows:

ckeditor.js:6 toolbarview-item-unavailable {item: 'fontSize'} Read more: https://ckeditor.com/docs/ckeditor5/latest/support/error-codes.html#error-toolbarview-item-unavailable

I read the notes but don't now how to get this plugin and how to add it. Can you give me any support on this?

Every help will be highly appreciated.

Thank you very much.

allan

Hi,

Have you tried the method mentioned in the CKEditor docs to list all toolbar options available?

Array.from( editor.ui.componentFactory.names() );

It could be that something else just needs to be loaded in, or perhaps it is called fontSize (case sensitive).

Allan

jaeweb

Hi allan,
thank you very much for your reply. I tried several lower / uppercase variants as fontsize, FontSize, fontSize, unfortunately, it doesnt work.

I've seen
Array.from( editor.ui.componentFactory.names() );
but actually don't know where to use it...

Uncaught TypeError: Cannot read properties of undefined (reading 'componentFactory')

I'm using CKEditor v5

allan

Running it on their demo page (just in the console, editor is a global variable there), yields:

[
    "alignment:left",
    "alignment:right",
    "alignment:center",
    "alignment:justify",
    "alignment",
    "menuBar:alignment",
    "undo",
    "menuBar:undo",
    "redo",
    "menuBar:redo",
    "blockQuote",
    "menuBar:blockQuote",
    "bold",
    "menuBar:bold",
    "bookmark",
    "menuBar:bookmark",
    "bookmarkPreview",
    "editBookmark",
    "removeBookmark",
    "caseChange",
    "menuBar:caseChange",
    "ckboxImageEdit",
    "code",
    "menuBar:code",
    "codeBlock",
    "menuBar:codeBlock",
    "numberedList",
    "menuBar:numberedList",
    "bulletedList",
    "menuBar:bulletedList",
    "uploadImage",
    "imageUpload",
    "menuBar:uploadImage",
    "accessibilityHelp",
    "menuBar:accessibilityHelp",
    "selectAll",
    "menuBar:selectAll",
    "exportPdf",
    "menuBar:exportPdf",
    "exportWord",
    "menuBar:exportWord",
    "findAndReplace",
    "menuBar:findAndReplace",
    "fontFamily",
    "menuBar:fontFamily",
    "fontSize",
    "menuBar:fontSize",
    "fontColor",
    "menuBar:fontColor",
    "fontBackgroundColor",
    "menuBar:fontBackgroundColor",
    "fullscreen",
    "menuBar:fullscreen",
    "heading",
    "menuBar:heading",
    "highlight:yellowMarker",
    "highlight:greenMarker",
    "highlight:pinkMarker",
    "highlight:blueMarker",
    "highlight:redPen",
    "highlight:greenPen",
    "removeHighlight",
    "highlight",
    "menuBar:highlight",
    "horizontalLine",
    "menuBar:horizontalLine",
    "imageTextAlternative",
    "insertImage",
    "imageInsert",
    "menuBar:insertImage",
    "toggleImageCaption",
    "insertImageViaUrl",
    "menuBar:insertImageViaUrl",
    "resizeImage:original",
    "resizeImage:50",
    "resizeImage:75",
    "resizeImage",
    "imageResize",
    "imageStyle:inline",
    "imageStyle:alignLeft",
    "imageStyle:alignRight",
    "imageStyle:alignCenter",
    "imageStyle:alignBlockLeft",
    "imageStyle:alignBlockRight",
    "imageStyle:block",
    "imageStyle:side",
    "imageStyle:wrapText",
    "imageStyle:breakText",
    "importWord",
    "menuBar:importWord",
    "indent",
    "menuBar:indent",
    "outdent",
    "menuBar:outdent",
    "italic",
    "menuBar:italic",
    "link",
    "menuBar:link",
    "linkPreview",
    "unlink",
    "editLink",
    "linkProperties",
    "linkImage",
    "mediaEmbed",
    "menuBar:mediaEmbed",
    "insertMergeField",
    "menuBar:insertMergeField",
    "previewMergeFields",
    "menuBar:previewMergeFields",
    "multiLevelList",
    "menuBar:multiLevelList",
    "pageBreak",
    "menuBar:pageBreak",
    "removeFormat",
    "menuBar:removeFormat",
    "specialCharacters",
    "menuBar:specialCharacters",
    "strikethrough",
    "menuBar:strikethrough",
    "style",
    "subscript",
    "menuBar:subscript",
    "superscript",
    "menuBar:superscript",
    "insertTable",
    "menuBar:insertTable",
    "tableColumn",
    "tableRow",
    "mergeTableCells",
    "toggleTableCaption",
    "tableCellProperties",
    "tableProperties",
    "textPartLanguage",
    "menuBar:textPartLanguage",
    "todoList",
    "menuBar:todoList",
    "underline",
    "menuBar:underline",
    "wproofreader",
    "insertTemplate",
    "menuBar:insertTemplate",
    "formatPainter",
    "tableOfContents",
    "menuBar:tableOfContents",
    "emoji",
    "menuBar:emoji",
    "ckbox",
    "menuBar:ckbox"
]

fontSize is the one suggested there.

You could try it in line 56 in the plugin (conf._ckeditor = editor;). You might need an empty toolbar to see what the options are without an error though.

Allan

jaeweb

Hi allan,
thank you very much, I managed to get the list, but fontSize is missing. I now managed to "bend" the 'heading' styles to my needs.
Maybe I will get back to this later with more time.
thank you very much

['accessibilityHelp', 'selectAll', 'undo', 'redo', 'bold', 'italic', 'blockQuote', 'link', 'ckfinder', 'uploadImage', 'imageUpload', 'heading', 'imageTextAlternative', 'insertImage', 'imageInsert', 'toggleImageCaption', 'imageStyle:inline', 'imageStyle:alignLeft', 'imageStyle:alignRight', 'imageStyle:alignCenter', 'imageStyle:alignBlockLeft', 'imageStyle:alignBlockRight', 'imageStyle:block', 'imageStyle:side', 'imageStyle:wrapText', 'imageStyle:breakText', 'indent', 'outdent', 'numberedList', 'bulletedList', 'mediaEmbed', 'insertTable', 'tableColumn', 'tableRow', 'mergeTableCells']

allan

That would certainly explain the error message. I'm afraid I don't know enough about CKEditor to suggest why it would be missing though. Possibly a configuration option in the CKEditor build? You might need to reach out to their support.

Allan