custom html element

[Benman2005]

Hi, not sure if it's worth asking. This question was a bit different, but i'd like to still be able to add a custom html element inside my ckeditor, like or or something.
The problem now is that when editing source it actually accepts the custom html element and saves it. It just doesnt show it outside of the source editor, so in the normal editor.
I did allow all elements in the editorConfig, but according to ckeditor documentation i would need to register the custom element in the DataSchema, but I have no idea where in this strapi implementation i would have to declare these.
Is it possible? It can just show as regular text, as long as it shows and is in the html source.
@nshenderov can you help me with this? oh yeah i'm on v5 right now

[nshenderov]

Hi, you can follow the "Adding Timestamp plugin [JS]" in the examples section https://github.com/nshenderov/strapi-plugin-ckeditor?tab=readme-ov-file#configuration-examples

[jcjdm]

Hey. I had a similar problem trying to add a responsive column layout option. After a day of source code research a figured out a solution.

First of all, create a new plugin, I put mine in src/plugins/MyAwesomeCKEditorPlugin.js:

 * Flex Layout plugin for CKEditor.
 *
 * This plugin adds multi-column layout functionality to the editor,
 * creating responsive column layouts using CSS flexbox.
 * Users can add 2, 3, or 4-column layouts with placeholder content.
 */
export default class MyAwesomeCKEditorPlugin extends Plugin {
  /**
   * Plugin name used by CKEditor to identify this plugin
   * @returns {String}
   */
  static get pluginName() {
    return "TextColumns";
  }

  /**
   * Initializes the plugin
   */
  init() {
    this._defineOptions();
    this._registerSchema();
    // other methods...
  }

  /**
   * Sets up plugin configuration options
   * @private
   */
  _defineOptions() {
    const t = this.editor.t;

    // Elements where containers cannot be inserted
    this.disallowContainerIn = [
      "paragraph",
      "heading3",
      "heading4",
      "heading5",
    ];

    // Allow these element types in both flexItem and flexContainer
    this.allowedElementTypes = [
      "paragraph",
      "heading3",
      "heading4",
      "heading5",
    ];

    // ... other options
  }

  /**
   * Registers schema elements and conversion rules
   * @private
   */
  _registerSchema() {
    const schema = this.editor.model.schema;
    const conversion = this.editor.conversion;

    // Register container element
    this._registerFlexContainer(schema, conversion);

    // Register item element
    this._registerFlexItem(schema, conversion);

    // Allow content elements inside flex items
    this._registerContentAllowances(schema);
  }

  /**
   * Registers the flex container element in schema
   *
   * @param {module:engine/model/schema~Schema} schema - Schema registry
   * @param {module:engine/conversion/conversion~Conversion} conversion - Conversion registry
   * @private
   */
  _registerFlexContainer(schema, conversion) {
    // Register the flex container element
    schema.register("flexContainer", {
      isBlock: true,
      allowAttributes: ["class"],
      allowChildren: ["flexItem"],
      allowContentOf: "$block",
      allowIn: ["$block"],
      disallowIn: this.disallowContainerIn,
    });

    // Element conversions for flex container
    conversion.elementToElement({
      model: "flexContainer",
      view: "div",
      upcastAlso: [ // Allow upcasting from HTML, e.g., <div class="columnLayout"></div> to flexContainer
        "div",
        {
          classes: [
            "columnLayout",
            "columnCount-2",
            "columnCount-3",
            "columnCount-4",
          ],
        },
      ],
    });
  }

  /**
   * Registers the flex item element in schema
   *
   * @param {module:engine/model/schema~Schema} schema - Schema registry
   * @param {module:engine/conversion/conversion~Conversion} conversion - Conversion registry
   * @private
   */
  _registerFlexItem(schema, conversion) {
    // Register the flex item element
    schema.register("flexItem", {
      inheritAllFrom: "$block",
      allowAttributes: ["class"],
      isLimit: true,
    });

    // Allow flex items inside flex containers
    schema.extend("flexItem", {
      allowIn: ["flexContainer"],
    });

    // Element conversions for flex item
    conversion.elementToElement({
      model: "flexItem",
      view: "div",
    });

    // Attribute conversion for classes
    conversion.attributeToAttribute({
      model: "class",
      view: "class",
    });
  }

  /**
   * Registers allowed content types within container elements
   *
   * @param {module:engine/model/schema~Schema} schema - Schema registry
   * @private
   */
  _registerContentAllowances(schema) {
    for (const elementType of this.allowedElementTypes) {
      schema.extend(elementType, {
        allowIn: ["flexItem", "flexContainer"],
      });
    }
  }

  // ... other methods for handling commands, UI, etc.
}

After that it's time to assemble a new preset. I took most of the stuff from default html editor
app.js:

import { Alignment,Autoformat,AutoImage,BalloonToolbar,BlockQuote,Bold,Code,CodeBlock,Essentials,FontBackgroundColor,FontColor,FontFamily,FontSize,GeneralHtmlSupport,Heading,HorizontalLine,HtmlEmbed,Image,ImageCaption,ImageInsert,ImageResize,ImageStyle,ImageToolbar,ImageUpload,Indent,IndentBlock,Italic,List,ListProperties,Link,LinkImage,MediaEmbed,Paragraph,PageBreak,PasteFromOffice,PictureEditing,RemoveFormat,SourceEditing,SpecialCharacters,SpecialCharactersEssentials,Strikethrough,Style,Subscript,Superscript,ShowBlocks,Table,TableCaption,TableCellProperties,TableColumnResize,TableProperties,TableToolbar,TodoList,Underline,WordCount,IconIndent} from "ckeditor5";
import { defaultTheme,setPluginConfig,StrapiMediaLib,StrapiUploadAdapter } from "@_sh/strapi-plugin-ckeditor";
import MyAwesomeCKEditorPlugin from "../plugins/MyAwesomeCKEditorPlugin";

const CK5_PLUGIN_LIST = [
  Alignment, Autoformat, AutoImage, BalloonToolbar, BlockQuote, Bold, Code, CodeBlock, Essentials, FontBackgroundColor, FontColor, FontFamily, FontSize, GeneralHtmlSupport, Heading, HorizontalLine, HtmlEmbed, Image, ImageCaption, ImageInsert, ImageResize, ImageStyle, ImageToolbar, ImageUpload, Indent, IndentBlock, Italic, List, ListProperties, Link, LinkImage, MediaEmbed, Paragraph, PageBreak, PasteFromOffice, PictureEditing, RemoveFormat, SourceEditing, SpecialCharacters, SpecialCharactersEssentials, Strikethrough, Style, Subscript, Superscript, ShowBlocks, Table, TableCaption, TableCellProperties, TableColumnResize, TableProperties, TableToolbar, TodoList, Underline, WordCount, StrapiMediaLib, StrapiUploadAdapter, MyAwesomeCKEditorPlugin
];

const CK5_TOOLBAR_OPTIONS_LIST = [
  "showBlocks", "|", "heading", "|", "fontSize", "fontFamily", "alignment", "bulletedList", "numberedList", "textColumns", "link", "mediaEmbed", "strapiMediaLib", "blockquote", "insertTable", "SourceEditing", "|", "undo", "redo"
];

const customPreset = {
  name: "customPreset",
  description: "Custom preset",
  editorConfig: {
    licenseKey: "GPL",
    plugins: CK5_PLUGIN_LIST,
    toolbar: CK5_TOOLBAR_OPTIONS_LIST,
    heading: {
      options: [
        {
          model: "paragraph",
          title: "Paragraph",
          class: "ck-heading_paragraph",
        },
        {
          model: "heading2",
          view: "h2",
          title: "Heading 2",
          class: "ck-heading_heading2",
        },
        {
          model: "heading3",
          view: "h3",
          title: "Heading 3",
          class: "ck-heading_heading3",
        },
        {
          model: "heading4",
          view: "h4",
          title: "Heading 4",
          class: "ck-heading_heading4",
        },
        {
          model: "heading5",
          view: "h5",
          title: "Heading 5",
          class: "ck-heading_heading5",
        },
        {
          model: "heading6",
          view: "h6",
          title: "Heading 6",
          class: "ck-heading_heading6",
        },
      ],
    },
    image: {
      styles: {
        options: [
          "inline",
          "alignLeft",
          "alignRight",
          "alignCenter",
          "alignBlockLeft",
          "alignBlockRight",
          "block",
          "side",
        ],
      },
      resizeOptions: [
        {
          name: "resizeImage:original",
          label: "Default image width",
          value: null,
        },
        {
          name: "resizeImage:50",
          label: "50% page width",
          value: "50",
        },
        {
          name: "resizeImage:75",
          label: "75% page width",
          value: "75",
        },
      ],
      toolbar: [
        "imageTextAlternative",
        "toggleImageCaption",
        "linkImage",
        "|",
        "imageStyle:inline",
        "imageStyle:wrapText",
        "imageStyle:breakText",
        "imageStyle:side",
        "|",
        "resizeImage",
      ],
    },
    htmlSupport: {
      allow: [
        {
          name: "div",
          attributes: true,
          classes: true,
          styles: true,
        },
      ],
    },
  },
};

const pluginConfig = {
  presets: [customPreset],
  theme: defaultTheme
};

export default {
  register() {
    setPluginConfig(pluginConfig);
  },
}