div element with class in custom ckeditor5(in strapi)

409 Views Asked by At

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.

0

There are 0 best solutions below