nshenderov / strapi-plugin-ckeditor

Integrates CKEditor 5 into your Strapi project as a fully customizable custom field. (Unofficial integration)
https://www.npmjs.com/package/@_sh/strapi-plugin-ckeditor
MIT License
84 stars 53 forks source link

It will be good to have a custom element support #119

Open Kalgros20 opened 10 months ago

Kalgros20 commented 10 months ago

I'm a little bit frustrated, because it seems that we dont have a way to add a custom element, in the CMS. Thinking in user exp, i want to add custom classes to a <p> or any heading tag, and the user dont need to know what will be added. Because in front-end i want to have a bunch classes that will be used.... The CMS will be managed by people that dont know much html, and in thoses cases.. when more abstraction, i think will be better.... Aside, good repo and stuff. <3

Describe the solution you'd like Could be possible to use this feature of custom elements.

Ref

mikegazdag commented 10 months ago

I'm not sure what you mean, via the editorConfig options your able to add somewhat custom styles and elements. Here, I'm adding custom header elements that mostly output Tailwind classes.

/* CKEditor configuration */
configs: {
  custom: {
    editorConfig:{
      heading: {
        options: [
          { model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ds--h1' },
          { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ds--h2' },
          { model: 'heading3', view: 'h1', title: 'Display 1', class: 'ds--d1' },
          { model: 'heading4', view: 'h2', title: 'Display 2', class: 'ds--d2' },
          { model: 'heading5', view: 'p', title: 'Body', class: 'ds--d2' },
          { model: 'heading6', view: 'p', title: 'Body - Medium', class: 'ds--d2 ds--medium' },
          { model: 'heading7', view: 'p', title: 'Body Alt', class: 'ds--d2' },
        ]
      }
    }
  }
}