Add Markdown Plugin to CKEditor 5 Plugin for Typescript Strapi

Discord Q&A strapi-questions
1

Hi everyone,
I am following this documentation CKEditor 5 | Strapi Market, and I want to install the Markdown plugin, what are the rights steps for this for a typescript project ?
on the step where I need to do this in the app.js, I tried to add it in the app.example.tsx, but it’s not working:

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

I am having an error on my ckeditor.txt:

TypeError
Cannot read properties of undefined (reading 'Markdown')
Call Stack
 undefined
  ckeditor-config:38:43

my final Goal is to have HTML / CSS script , that I can inject into my frontend directly. is it feasable ? ( I know it breaks the logic of Headless CMS, but unfortunately I need to do that )

I appreciate any help I can get !
thanks !

This topic has been created from a Discord post (1215025438200696922) to give it more visibility.
It will be on Read-Only mode here.
Join the conversation on Discord

2

What do you mean by “inject into my frontend directly.” ← which front-end? The plugin will only inject itself into the admin panel.

3

Sorry let me be more precise,
I want for example to add a CKEditor5 field with inside some HTML and CSS
and I want to retrieve exactly the script in my api, but currently the HTML is escaped and there is some \n added in there, I tought that maybe adding the markdown plugin will make this work, or at least remove the escape

4

Ah, I see. Well, I’ve never used CKEditor 5, but it seems to me that it’s saving the HTML-escaped version for display purposes; like, that’s what it would render in a blog post or something. If you want the actual HTML, unescaped, you might want to look for some method inside CKEditor 5 to do that. Does it only save to that one field, called HTML? Can you have it save the “raw” version, so-to-speak, to a different field?

5

dont add in app.example.tsx , its just a sample file, create one file name app.tsx in the same dir and add the code there

6

if you render this as innerHTML or set:html , it will remove the escape and render the html normally like you want it

7

just set the innerHTML of the main wrapper of the content in your frontend and it will going to work

8

I tried that and it’s still not working for the markdown plugin, should the import sentences be different ?
I tried all of this (my app.tsx):

import { Markdown } from "@ckeditor/ckeditor5-markdown-gfm";
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';

export default {
  config: {
    locales: [],
  },
  bootstrap(app) {
    console.log(app);
  },
};
9

and this is the ckeditor config file (config/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.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: [
            ....
          ],
          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'
            },
          ]
        }
      },
    },
  }
}
10

I am trying different options, will try this ^^

11

Can you please tell me why you want to use markdown plugin ?

12

I mean you can render the content directly by setting the HTML value as innerHTML , it will resolve all of you problem