CKEditor 5 for Strapi

Integrates CKEditor 5 into your Strapi project as a fully customizable custom field. You can also insert video from Media Library. (Unofficial integration)

👋 Get Started

• Features
• Installation
• Configuration
• Contributing
• Requirements

✨ Features

• Media library integration (image and video)
• Supports responsive images
• Supports Strapi's theme switching with the possibility to define your own theme
• Supports i18n for content and user's preferred language for UI
• Few predefined editor configs with the possibility to add your owns
• Possible to add new plugins

🔧 Installation

• Inside your Strapi app, add the package:

npm install strapi-plugin-ckeditor-video

or

yarn add strapi-plugin-ckeditor-video

• Then run build:

npm run build

or

yarn build

⚙️ Configuration

The plugin is based on Strapi's custom fields and CKEditor dll build

Plugin configuration should be defined in the /config/ckeditor.txt file.

It's highly recommended to explore the official ckeditor documentation

Content from ckeditor.txt will be passed into a script tag through the initialization process.

📂 Default configs: admin/src/components/Input/CKEditor/configs

📂 Default theme: admin/src/components/Input/CKEditor/theme

ckeditor.txt example:

1globalThis.CKEditorConfig = {
2
3    /* By default configs and theme
4    objects will be spread with
5    default configs and theme
6    these two properties specified below
7    allow you to redefine
8    default objects completely: */
9
10    //configsOverwrite:true,
11    //themeOverwrite:true,
12
13    /* Here you can redefine default configs
14    or add completely new ones.
15    Each config includes: 
16    "styles", "field" and "editorConfig" properties.
17    Property "field" is required. */
18
19    configs:{
20        toolbar:{
21            // styles:``,
22            // field:{},
23            // editorConfig:{}
24        },
25        custom:{
26            
27            /* Styles for this specific editor.
28            This will be passed into the editor's parent container. */
29
30            styles:`
31            //     --ck-focus-ring:3px dashed #5CB176;
32
33            //     .ck.ck-content.ck-editor__editable {
34            //       &.ck-focused:not(.ck-editor__nested-editable) {
35            //         border: var(--ck-focus-ring) !important;
36            //       }
37            //     }
38            //     .ck.ck-content.ck-editor__editable.ck-rounded-corners.ck-editor__editable_inline.ck-blurred{
39            //       min-height: 400px;
40            //       max-height: 400px;
41            //     }
42            //     .ck.ck-content.ck-editor__editable.ck-rounded-corners.ck-editor__editable_inline.ck-focused{
43            //       min-height: 400px;
44            //       max-height: 1700px;
45            //     }
46            `,
47
48            /* Custom field option */
49            field: {
50                key: "custom",
51                value: "custom",
52                metadatas: {
53                  intlLabel: {
54                    id: "ckeditor5.preset.custom.label",
55                    defaultMessage: "Custom version",
56                  },
57                },
58            },
59            /* CKEditor configuration */
60            editorConfig:{
61                /* All available built-in plugins
62                you can find in admin/src/components/Input/CKEditor/configs/base.js */
63                plugins: [
64                    CKEditor5.autoformat.Autoformat,
65                    CKEditor5.basicStyles.Bold,
66                    CKEditor5.basicStyles.Italic,
67                    CKEditor5.essentials.Essentials,
68                    CKEditor5.heading.Heading,
69                    CKEditor5.image.Image,
70                    CKEditor5.image.ImageCaption,
71                    CKEditor5.image.ImageStyle,
72                    CKEditor5.image.ImageToolbar,
73                    CKEditor5.image.ImageUpload,
74                    CKEditor5.indent.Indent,
75                    CKEditor5.link.Link,
76                    CKEditor5.list.List,
77                    CKEditor5.paragraph.Paragraph,
78                    CKEditor5.pasteFromOffice.PasteFromOffice,
79                    CKEditor5.table.Table,
80                    CKEditor5.table.TableToolbar,
81                    CKEditor5.table.TableColumnResize,
82                    CKEditor5.table.TableCaption,
83                    CKEditor5.strapiPlugins.StrapiMediaLib,
84                    CKEditor5.strapiPlugins.StrapiUploadAdapter,
85                  ],
86
87                  /* By default, for plugin's UI will use
88                  the language defined in this file
89                  or the preferred language from strapi's user config
90                  and 'en' as a fallback.
91                  language.ui -> preferred language -> 'en' */
92
93                  /* For content it will use language based on i18n (if! ignorei18n)
94                  or language.content defined here
95                  and it will use UI language as a fallback.
96                  ignorei18n ? language.content : i18n; -> language.ui */
97
98                  language:{
99                    // ignorei18n: true,
100                    // ui:'he',
101                    // content:'he'
102                  },
103                  toolbar: [
104                    'heading',
105                    '|',
106                    'bold', 'italic', 'link', 'bulletedList', 'numberedList',
107                    '|',
108                    'strapiMediaLib', 'insertTable',
109                    '|',
110                    'undo', 'redo'
111                  ],
112                  heading: {
113                    options: [
114                      { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
115                      { model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
116                      { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' },
117                      { model: 'heading3', view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3' },
118                      { model: 'heading4', view: 'h4', title: 'Heading 4', class: 'ck-heading_heading4' },
119                    ]
120                  },
121                  image: {
122                    toolbar: [
123                      'imageStyle:inline',
124                      'imageStyle:block',
125                      'imageStyle:side',
126                      '|',
127                      'toggleImageCaption',
128                      'imageTextAlternative'
129                    ]
130                  },
131                  table: {
132                    contentToolbar: [
133                      'tableColumn',
134                      'tableRow',
135                      'mergeTableCells',
136                      '|',
137                      'toggleTableCaption'
138                    ]
139                  }
140            }
141        }
142    },
143
144    /* Here you can customize the plugin's theme.
145    This will be passed as "createGlobalStyle". */
146    theme:{
147        // common:``,
148        // light:``,
149        // dark:``,
150        // additional:``
151    }
152
153}

If you use the default (local) upload provider you should specify a url property in the config/server.js in order to get the full URL on uploaded files eg:

1module.exports = ({ env }) => ({
2  url: env("PUBLIC_URL", "http://localhost:1337"),
3  host: env('HOST', '0.0.0.0'),
4  port: env.int('PORT', 1337),
5  app: {
6    keys: env.array('APP_KEYS'),
7  },
8});

In order to display some content from an external source on your admin side you should configure your middlewares.js check the docs about this

How to add plugins

Markdown plugin example

• Inside your app:

1yarn add @ckeditor/ckeditor5-markdown-gfm

or

1npm install @ckeditor/ckeditor5-markdown-gfm

• your-app/src/admin/app.js

1import ckeditor5Dll from "ckeditor5/build/ckeditor5-dll.js";
2import ckeditor5MrkdownDll from "@ckeditor/ckeditor5-markdown-gfm/build/markdown-gfm.js";
3
4
5const config = {};
6
7const bootstrap = (app) => {};
8
9export default {
10  config,
11  bootstrap,
12};

• your-app/config/ckeditor.txt

1globalThis.CKEditorConfig = {
2    configs:{
3        markdown:{
4            field: {
5                key: "markdown",
6                value: "markdown",
7                metadatas: {
8                  intlLabel: {
9                    id: "ckeditor.preset.markdown.label",
10                    defaultMessage: "Markdown version",
11                  },
12                },
13            },
14            editorConfig:{
15                placeholder: 'Markdown editor',
16                plugins: [
17                    CKEditor5.essentials.Essentials,
18                    CKEditor5.autoformat.Autoformat,
19                    CKEditor5.blockQuote.BlockQuote,
20                    CKEditor5.basicStyles.Bold,
21                    CKEditor5.heading.Heading,
22                    CKEditor5.image.Image,
23                    CKEditor5.image.ImageCaption,
24                    CKEditor5.image.ImageStyle,
25                    CKEditor5.image.ImageToolbar,
26                    CKEditor5.image.ImageUpload, 
27                    CKEditor5.indent.Indent,
28                    CKEditor5.basicStyles.Italic,
29                    CKEditor5.link.Link,
30                    CKEditor5.list.List,
31                    CKEditor5.mediaEmbed.MediaEmbed,
32                    CKEditor5.paragraph.Paragraph,
33                    CKEditor5.table.Table,
34                    CKEditor5.table.TableToolbar,
35                    CKEditor5.sourceEditing.SourceEditing, 
36                    CKEditor5.strapiPlugins.StrapiMediaLib,
37                    CKEditor5.strapiPlugins.StrapiUploadAdapter,
38                    CKEditor5.markdownGfm.Markdown,
39                    CKEditor5.basicStyles.Code, 
40                    CKEditor5.codeBlock.CodeBlock,
41                    CKEditor5.list.TodoList,
42                    CKEditor5.basicStyles.Strikethrough,
43                    CKEditor5.horizontalLine.HorizontalLine
44                ],
45                toolbar: {
46                    items: [
47                        'heading',
48                        '|',
49                        'bold',
50                        'italic',
51                        'strikethrough',
52                        'link',
53                        '|',
54                        'bulletedList',
55                        'numberedList',
56                        'todoList',
57                        '|',
58                        'code',
59                        'codeBlock',
60                        '|',
61                        'uploadImage',
62                        'strapiMediaLib',
63                        'blockQuote',
64                        'horizontalLine',
65                        '-',
66                        'sourceEditing',
67                        '|',
68                        'outdent',
69                        'indent',
70                        '|',
71                        'undo',
72                        'redo'
73                    ],
74                    shouldNotGroupWhenFull: true
75                },
76                image: {
77                    toolbar: [ 'imageStyle:inline', 'imageStyle:block', 'imageStyle:side', '|', 'toggleImageCaption', 'imageTextAlternative' ]
78                },
79                codeBlock: {
80                    languages: [
81                        { language: 'css', label: 'CSS' },
82                        { language: 'html', label: 'HTML' },
83                        { language: 'javascript', label: 'JavaScript' },
84                        { language: 'php', label: 'PHP' }
85                    ]
86                },
87            }
88        }
89    }
90}

• Then rebuild your app:

npm run build

or

yarn build

🛠 Contributing

This section covers the way how to configure your environment if you want to contribute to this package.

Setting up the environment

In order to start making changes in the plugin you first need to install Strapi infrastructure on top of the plugin repository.

1npx create-strapi-app --quickstart strapi
2cd strapi

By default Strapi does not create plugins folder so we need to create it.

1mkdir -p src/plugins

Now we should clone this repository so we can work on it.

1git clone https://github.com/hrahimi270/strapi-plugin-ckeditor-video.git src/plugins/strapi-plugin-ckeditor

Let's add an entry inside ./package.json file so, we won't need to use yarn inside plugin itself.

1"workspaces": ["./src/plugins/strapi-plugin-ckeditor"]

Install dependencies:

1yarn install

Now we need to register plugin so strapi can use it. In order to do that we need to create (if not already created) ./config/plugins.js file and add entry to it.

1module.exports = ({ env }) => ({
2  ckeditor5: {
3    enabled: true,
4    resolve: "./src/plugins/strapi-plugin-ckeditor"
5  },
6});

Rebuild the project and start the server:

1yarn build
2yarn develop

⚠️ Requirements

Strapi v4.4.0+

Node >=14.19.1 <=18.x.x

👍 This build includes some useful plugins based on these repos so thanks to them:

https://github.com/Roslovets-Inc/strapi-plugin-ckeditor5

https://github.com/leknoppix/ckeditor5-fullscreen

https://github.com/gtomato/ckeditor5-strapi-upload-plugin

https://github.com/pshurygin/ckeditor5-font-color