I want to add one plugin in custom ckeditor5 which will add one div with given css. But code is ignoring the div completely and replacing it with p tag.
Following is custom CKEditor config which is rendering editor in strapi. This is defined in strapi/src/plugins/strapi-plugin-ckeditor/admin/src/components/CKEditorInput/index.js
<CKEditor
editor={window.CKEditor5.editorClassic.ClassicEditor}
disabled={disabled}
data={value}
onReady={(editor) => {
const customSectionPlugin = editor.plugins.get(
"strapiCustomSection"
);
customSectionPlugin.connect(handleToggleCustomSectionClick);
editor.model.schema.register("simpleBoxDescription", {
// Cannot be split or left by the caret.
isLimit: true,
allowIn: "simpleBox",
// Allow content which is allowed in the root (e.g. paragraphs).
allowContentOf: "$root",
});
editor.conversion.for("upcast").elementToElement({
model: "simpleBoxDescription",
view: {
name: "div",
classes: "simple-box-description",
},
});
editor.conversion.for("dataDowncast").elementToElement({
model: "simpleBoxDescription",
view: {
name: "div",
classes: "simple-box-description",
},
});
editor.conversion.for("editingDowncast").elementToElement({
model: "simpleBoxDescription",
view: (modelElement, { writer: viewWriter }) => {
// Note: You use a more specialized createEditableElement() method here.
const div = viewWriter.createEditableElement("div", {
class: "simple-box-description",
});
return toWidgetEditable(div, viewWriter);
},
});
// editor.conversion.elementToElement( { model: 'div', view: 'div' } );
setEditorInstance(editor);
}}
onChange={(event, editor) => {
// data handling
}}
config={editorConfig}
/>
On clicking customSectionPlugin, following code is getting inserted in the editor box
<div class="simple-box-description">Should be formatted section...</div>
Adding custom css for simple-box-description
in strapi/src/plugins/strapi-plugin-ckeditor/admin/src/components/CKEditorInput/styles/common.js file
But, this custom div is not being considered and replace with p tag
Tried fixing css class name by appending ck-
to it.
Tried various random approaches but nothing is working out.
Expected output is here div should get added with specified class.