CKeditor options not working in 5.0.6?

[b-creative]

Do the ckeditor options, the ones one can apply in options.json (like bodyClass, clipboard_handleImages, contentsCss, customConfig, disableNativeSpellChecker, extraAllowedContent, extraPlugins, format_tags, stylesSet, toolbar, etc) not work in version 5.0.6?

[Timo-Breumelhof]

No, that's not implemented yet unless you use an edit.js file AFAIK

[b-creative]

What do you mean by: 'an edit.js file'? What can I do to get this working? Do I copy this from an older version?

[Timo-Breumelhof]

No, it's a new option. (edit.js is not, but the way you do this is).
It's will also make the filed available in the builder (which is one of the great things of the new VUE editor)
I have used it but the examples are a bit complex to post here.
I'll try to add a simpler version to one of the demo templates.

[b-creative]

Timo, did you manage to add this to a demo template? I really would like to implement a more streamlined ck-editor; you can also send me the complex one :)

Thanks!!

[Timo-Breumelhof]

I have used edit.js for other things, but I did not manage to load a custom editor config yet (tried today).
I asked Sacha for assistance and will get back to you when I get it fixed.

[b-creative]

At the moment I succesful use this edit.js file, which I only need to place in the template folder.

window.Lama.getFieldComponent('ckeditor').computed.editorConfig = function () {
return {
toolbar: [
{
name: "clipboard",
items: [
"Cut",
"Copy",
"PasteText",
"-",
"Undo",
"Redo",
],
},
{
name: "editing",
items: [
"SpellChecker",
"Scayt",
],
},
{
name: "insert",
items: [
"Table",
"SpecialChar"
],
},
{
name: "basicstyles",
items: [
"Bold",
"Italic",
"Underline",
"Subscript",
"Superscript",
"-",
"RemoveFormat",
],
},
{
name: "paragraph",
items: [
"NumberedList",
"BulletedList",
],
},
{ name: "links", items: ["Link", "Unlink", "Anchor"] },
{ name: "styles", items: ["Styles", "Format"] },
{
name: "tools",
items: ["Maximize", "ShowBlocks", "-", "Source"],
},
],
// Set the most common block elements.
bodyClass: "editorbody",
format_tags: "p;h2;h3",
//http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-allowedContent
allowedContentRules: true,
startupOutlineBlocks: true,
// Simplify the dialog windows.
removeDialogTabs: "image:advanced",
// Remove one plugin.
removePlugins: "link,easyimage",
extraPlugins: "dnnpages",
linkShowAdvancedTab: true,
//autoGrow_onStartup : true,
//autoGrow_minHeight : 400,
//autoGrow_maxHeight : 700,
height: 400,
//skin : 'flat',
contentsCss: "/portals/0-System/_lay-out/css/editor.css?v-2",
customConfig: "/portals/0-System/_lay-out/js/ckeditor_settings_modifier/config.js",
stylesSet: [
{ "name": "Blok blauw", "element": "div","attributes": { "class": "alert alert-primary" } },
{ "name": "Blok grijs", "element": "div","attributes": { "class": "alert alert-dark" } },
{ "name": "Blok groen", "element": "div","attributes": { "class": "alert alert-success" } },
{ "name": "Knop", "element": "a", "attributes": { "class": "btn btn-primary" } }
],
//easyimage_toolbar :['EasyImageAlignLeft', 'EasyImageAlignCenter', 'EasyImageAlignRight']
};
};

[b-creative]

With that ofcourse I use the extra editor.css and config.js. As a Bootstrap frame user, I also wrote an extra wrapping around the table.table, using:
$("table.table").wrap("<div class='table-responsive'></div>");

[Timo-Breumelhof]

Ah ok. I was trying to create a custom field based off the CkEditor field, which would then also be supported in the builder.
(which is what I have been doing with other fields too, but that was to manipulate the data)
But your example is less complicated :-)

[b-creative]

Does the extra plugin dnnpages still work for you in OC5.1.1? Mine generates an error...