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
95 stars 58 forks source link

How to enable General HTML Support plugin? #75

Closed StructByLightning closed 2 months ago

StructByLightning commented 1 year ago

I tried to install the general html support plugin but the editor still strips out divs in the markdown source. Any idea what I'm doing wrong?

My src/admin/app.js

import ckeditor5Dll from "ckeditor5/build/ckeditor5-dll.js";
import ckeditor5MrkdownDll from "@ckeditor/ckeditor5-markdown-gfm/build/markdown-gfm.js";
import GeneralHtmlSupportDll from '@ckeditor/ckeditor5-html-support/build/html-support.js';

const config = {};

const bootstrap = (app) => {};

export default {
  config,
  bootstrap,
};

And this is my ckeditor.txt:

globalThis.CKEditorConfig = {
  configs: {
    markdown: {
      field: {
        key: "markdown",
        value: "markdown",
        metadatas: {
          intlLabel: {
            id: "ckeditor.preset.markdown.label",
            defaultMessage: "Markdown version",
          },
        },
      },
      editorConfig: {
        placeholder: 'Markdown editor',
        plugins: [
          CKEditor5.essentials.Essentials,
          CKEditor5.autoformat.Autoformat,
          CKEditor5.blockQuote.BlockQuote,
          CKEditor5.basicStyles.Bold,
          CKEditor5.heading.Heading,
          CKEditor5.image.Image,
          CKEditor5.image.ImageCaption,
          CKEditor5.image.ImageStyle,
          CKEditor5.image.ImageToolbar,
          CKEditor5.image.ImageUpload, 
          CKEditor5.indent.Indent,
          CKEditor5.basicStyles.Italic,
          CKEditor5.link.Link,
          CKEditor5.list.List,
          CKEditor5.mediaEmbed.MediaEmbed,
          CKEditor5.paragraph.Paragraph,
          CKEditor5.table.Table,
          CKEditor5.table.TableToolbar,
          CKEditor5.sourceEditing.SourceEditing, 
          CKEditor5.strapiPlugins.StrapiMediaLib,
          CKEditor5.strapiPlugins.StrapiUploadAdapter,
          CKEditor5.markdownGfm.Markdown,
          CKEditor5.htmlSupport.GeneralHtmlSupport,
          CKEditor5.basicStyles.Code, 
          CKEditor5.codeBlock.CodeBlock,
          CKEditor5.list.TodoList,
          CKEditor5.basicStyles.Strikethrough,
          CKEditor5.horizontalLine.HorizontalLine
        ],
        toolbar: {
          items: [
            'heading',
            '|',
            'bold',
            'italic',
            'strikethrough',
            'link',
            '|',
            'bulletedList',
            'numberedList',
            'todoList',
            '|',
            'code',
            'codeBlock',
            '|',
            'uploadImage',
            'strapiMediaLib',
            'blockQuote',
            'horizontalLine',
            '-',
            'sourceEditing',
            '|',
            'outdent',
            'indent',
            '|',
            'undo',
            'redo'
          ],
          shouldNotGroupWhenFull: true
        },
        image: {
          toolbar: [ 'imageStyle:inline', 'imageStyle:block', 'imageStyle:side', '|', 'toggleImageCaption', 'imageTextAlternative']
        },
        codeBlock: {
          languages: [
            { language: 'css', label: 'CSS'},
            { language: 'html', label: 'HTML'},
            { language: 'javascript', label: 'JavaScript'},
            { language: 'php', label: 'PHP'}
          ]
        },
        htmlSupport: {
          allow: [
            {
              name: 'div'
            },
          ]
        }
      },
    },
  }
}
nocom91 commented 1 year ago

@StructByLightning I struggle the same problem you do. I also need to preserve some HTML tags in the Markdown editor. I think keepHtml must solve the problem but I have no idea how to call this method inside Strapi. Regarding General HTML Support, I also didn't manage to make it work