Block Based output and editor styling

[BlackWatch021]

Hey @nshenderov,

First of all, a big shoutout for your work on this plugin! I'm using Strapi version 4.25.10 and CKEditor version 2.1.3. I’m relatively new to using Strapi and its plugins, and I don’t have much experience integrating and managing plugins with Strapi.

1. Block-Based Output: Currently, CKEditor outputs content in HTML format. Is there a way to convert this into a block-based format like Strapi's default Rich Text (blocks)? For example:

2.Editor Styling: How can I adjust the styling of CKEditor to increase its height and make it full screen? I've tried modifying .css files within @node_modules/ckeditor5/dist/browser but haven't seen any changes.

Thanks in advance for your help!

[nshenderov]

Hi @BlackWatch021

1. The editor supports only two output formats: HTML and Markdown.
2. You can adjust the editor height by modifying the styles or theme in the configuration. While a full-screen option isn't officially implemented, it can be achieved by creating a custom ckeditor plugin.

[BlackWatch021]

Hi @nshenderov,

Markdown Output Issue: Since block-based output isn't available, I'm moving toward markdown output. I made some changes in plugins.js as per an old issue, but the output is still in HTML format.

module.exports = () => {
  return {
    ckeditor: {
      config: {
        plugin: {},
        editor: {
          removePlugins: [""],
        },
      },
    },
  };
};

My goal is to change the output format so that I can style the content as per my needs, which isn't as flexible with HTML output. Is there any way to achieve markdown output or an alternative method to customize and format the content better?

Styling Issue: I tried applying some custom styles in config/ckeditor.txt to modify the editor's appearance, but it seems the styles aren't being applied:

globalThis.CKEditorConfig = {
    configs: {
        default: {
            field: {
                key: "default",
                value: "default",
                metadatas: {
                    intlLabel: {
                        id: "ckeditor5.preset.default.label",
                        defaultMessage: "Default editor",
                    },
                },
            },
            editorConfig: {
                // Keeping the existing editorConfig and toolbar setup here
            },
            styles: `
            .ck.ck-editor__main .ck-blurred {
                    max-height: 200px;
            }
            .ck.ck-editor__main .ck-focused {
                min-height: 700px; /* Set minimum height */
                padding-bottom: 30px; /* Bottom padding */
            }
            `,
        },
    },
};

Could you help me identify why the styles are not taking effect and guide me on how to make the necessary adjustments?

Any additional guidance or suggestions would be greatly appreciated.

Thanks in advance!

[nshenderov]

@BlackWatch021 If your goal is only to apply CSS styles to the output, you can easily do this on the front end.

Configuration through the plugins.js file is only available in versions prior to 2 of the plugin.

To set up markdown output, you need to add the Markdown plugin to the editor configuration. If you're using version 2.1.3 of the plugin, follow the README.md from v2.1.3. For version 3.x.x, the configuration would look something like this:

presets: {
        markdown:{
          field: {
              key: "markdown",
              value: "markdown",
              metadatas: {
                intlLabel: {
                  id: "ckeditor.preset.markdown.label",
                  defaultMessage: "Markdown output",
                },
              },
          },
          editorConfig:{
              placeholder: 'Markdown editor',
              plugins: [
                  SH_CKE.Essentials,
                  SH_CKE.Autoformat,
                  SH_CKE.BlockQuote,
                  SH_CKE.Bold,
                  SH_CKE.Heading,
                  SH_CKE.Image,
                  SH_CKE.ImageCaption,
                  SH_CKE.ImageStyle,
                  SH_CKE.ImageToolbar,
                  SH_CKE.ImageUpload, 
                  SH_CKE.Indent,
                  SH_CKE.Italic,
                  SH_CKE.Link,
                  SH_CKE.List,
                  SH_CKE.MediaEmbed,
                  SH_CKE.Paragraph,
                  SH_CKE.Table,
                  SH_CKE.TableToolbar,
                  SH_CKE.SourceEditing, 
                  SH_CKE.StrapiMediaLib,
                  SH_CKE.StrapiUploadAdapter,
                  SH_CKE.Markdown,
                  SH_CKE.Code, 
                  SH_CKE.CodeBlock,
                  SH_CKE.TodoList,
                  SH_CKE.Strikethrough,
                  SH_CKE.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' }
                  ]
              },
          }
        },
     }

[nshenderov]

Since this question seems stale, I'm closing it.