Related Resources

Our Services

You May Also Like

How to integrate CKEditor in Strapi?

Anup Panchal

Dec 20, 2022

5 min readLast Updated Jul 13, 2023

Introduction

We all know that Strapi is an open-source headless CMS used to develop websites, mobile applications, e-commerce sites, and APIs. APIs can be created without knowing anything about backends or databases. APIs are generated automatically based on content models, making viewing data in the CMS easy with Strapi examples.

But in case if you want to use Strapi to add large content in your websites then strapi’s default WYSIWYG editor provides very few options to edit or style your content so at that time you have to integrate Rich Text editor which provides styling options. So CKEditor is a RichText editor which provides lots of options to edit your content.


So Let’s see how to integrate CKEditor in Strapi?

There are two ways to add CKEditor in Strapi

  1. By Installing CKEditor plugin
  2. By adding CKEditor custom build

Can you tell me what the differences between them are?

Let me help you differentiate it. By installing the CKEditor plugin, you can replace strapi's default WYSIWYG editor with the rich editor of CKEditor. You can style your content according to your needs. However, what if you need to add style to your content in addition to the options provided. There are many options in this CKEditor plugin, including FullScreen, SourceCode, etc. Organizations still want to develop a lot of style options to meet their objectives.

The second option CKEditor custom plugin allows you to create custom options with this custom build. Let's see how you can apply both options in your Strapi app.

Therefore, you have the Strapi app installed in your system

Requirements

  • Strapi v4.1.8+
  • Node 14 - 16
  • Tested on v4.1.8 - 4.3.4@strapi/plugin-i18n version 4.5.5+

1. Installing CKEditor plugin

In the root folder of your Strapi application, install

with npm

npm install @_sh/strapi-plugin-ckeditor

with yarn

yarn add @_sh/strapi-plugin-ckeditor

Once the plugin has been installed, we need to configure it. Add the following code to config/plugins.js :

ckeditor: true

Create this plugins.js file and add the following code if you don’t already have it.

module.exports = () => {
    return {
        ckeditor: true
    }
}

Following are more configuration options

// plugins.js
module.exports = () => {
  return {
    ckeditor: {
     enabled: true,
     config:{
        plugin:{
          // disable data-theme tag setting // 
          // setAttribute:false,

          // disable strapi theme, will use default ckeditor theme //
          // strapiTheme:false,
          
          // styles applied to editor container (global scope) //
          // styles:`
          // .ck.ck-editor__main .ck-focused{
          //   max-height: 700px;
          // }
          // :root{
          //   --ck-color-focus-border:red;
          //   --ck-color-text:red;
          // }
          // `
        },
        editor:{ // editor default config

          // https://ckeditor.com/docs/ckeditor5/latest/features/markdown.html
          // if you need markdown support and output set: removePlugins: [''],
          // default is 
          // removePlugins: ['Markdown'],

          // https://ckeditor.com/docs/ckeditor5/latest/features/toolbar/toolbar.html
          toolbar: {
            items: [
              'paragraph',
              'heading1',
              'heading2',
              '|',
              'bold',
              'italic',
              'fontColor',
              'fontBackgroundColor',
              'fontFamily',
              'underline',
              'fontSize',
              'removeFormat',
              '|',
              'bulletedList',
              'todoList',
              'numberedList',
              '|',
              'alignment',
              'outdent',
              'indent',
              'horizontalLine',
              '|',
              'StrapiMediaLib',
              'insertTable',
              'blockQuote',
              'mediaEmbed',
              'link',
              'highlight',
              '|',
              'htmlEmbed',
              'sourceEditing',
              'code',
              'codeBlock',
              '|',
              'subscript',
              'superscript',
              'strikethrough',
              'specialCharacters',
              '|',
              'heading',
              "fullScreen",
              'undo',
              'redo'
            ]
          },
          // https://ckeditor.com/docs/ckeditor5/latest/features/font.html
          fontSize: {
            options: [
                9,
                11,
                13,
                'default',
                17,
                19,
                21,
                27,
                35,
            ],
            supportAllValues: false
          },
          fontFamily: {
            options: [
              'default',
              'Arial, Helvetica Neue, Helvetica, Source Sans Pro, sans-serif',
              'Courier New, Courier, monospace',
              'Georgia, serif',
              'Lucida Sans Unicode, Lucida Grande, sans-serif',
              'Tahoma, Geneva, sans-serif',
              'Times New Roman, Times, serif',
              'Trebuchet MS, Helvetica, sans-serif',
              'Verdana, Geneva, sans-serif',
              'Roboto, Roboto Black, Roboto Medium, Roboto Light, sans-serif',
            ],
            supportAllValues: true
          },
          fontColor: {
            columns: 5,
            documentColors: 10,
          },
          fontBackgroundColor: {
            columns: 5,
            documentColors: 10,
          },
          // https://ckeditor.com/docs/ckeditor5/latest/features/ui-language.html
          // default language: 'en',
          // https://ckeditor.com/docs/ckeditor5/latest/features/images/images-overview.html
          image: {
            resizeUnit: "%",
            resizeOptions: [ {
              name: 'resizeImage:original',
              value: null,
              icon: 'original'
            },
            {
              name: 'resizeImage:25',
              value: '25',
              icon: 'small'
            },
            {
              name: 'resizeImage:50',
              value: '50',
              icon: 'medium'
            },
            {
              name: 'resizeImage:75',
              value: '75',
              icon: 'large'
            } ],
            toolbar: [
              'toggleImageCaption',
              'imageTextAlternative',
              'imageStyle:inline',
              'imageStyle:block',
              'imageStyle:side',
              'linkImage',
              'resizeImage:25', 'resizeImage:50', 'resizeImage:75', 'resizeImage:original'
            ]
          },
          // https://ckeditor.com/docs/ckeditor5/latest/features/table.html
          table: {
            contentToolbar: [
              'tableColumn',
              'tableRow',
              'mergeTableCells',
              'tableCellProperties',
              'tableProperties',
              'toggleTableCaption'
            ]
          },
          // https://ckeditor.com/docs/ckeditor5/latest/features/headings.html
          heading: {
            options: [
              { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
              { model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
              { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' },
              { model: 'heading3', view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3' },
              { model: 'heading4', view: 'h4', title: 'Heading 4', class: 'ck-heading_heading4' },
            ]
          },
          // https://ckeditor.com/docs/ckeditor5/latest/features/general-html-support.html
          // Regular expressions (/.*/  /^(p|h[2-4])$/' etc) for htmlSupport does not allowed in this config
          htmlSupport: {
            allow: [
                {
                  name: 'img',
                  attributes: {
                      sizes:true,
                      loading:true,
                  }
                },
            ]
          },
        }
      }
    }
  }
}

Several blog builders, including gatsby, support Markdown as an input format. By using the above editor option, you can add and remove markdown support.

The first method is straightforward and easy to implement. Now I’ll try to make the second method straightforward and easy to use.


2. CKEditor custom build

Install the following strapi module inside your strapi app to use the ckeditor custom plugin.

npm install @ckeditor/strapi-plugin-ckeditor
npm run build

Strapi by default does not create plugins folder so you have to create it.

mkdir -p src/plugins

Strapi provides customized CKEditor build so that developers can use this build in the Strapi app and make more customized options.

For that you need to clone the repo in order to work on it. After this you can add customized CKEditor plugins which will behave as your requirement. Thus, this custom build gives you the environment to change the existing plugin( or option ) behavior and add custom CKEditor plugins.

git clone git@github.com:ckeditor/strapi-plugin-ckeditor.git src/plugins/strapi-plugin-ckeditor

OR

Clone from here https://github.com/ckeditor/strapi-plugin-ckeditor

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

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

Install dependencies in Strapi root folder (For CKEditor custom build) :

yarn install

Inside plugins file ./config/plugins.js

module.exports = ({ env }) => ({
  ckeditor: {
    enabled: true,
    resolve: "./src/plugins/strapi-plugin-ckeditor"
  },
});

Now go to the Strapi root folder and rebuild the Strapi

npm run build
npm run develop
  • You can now view the custom field option available in the strapi Content-Type Builder
  • And you should to add Another Field and select custom >  CKEditor
  • You will get three types of rich text versions available in CKEditor personalized. You should choose between them. And the options are,
  • You will get three types of rich text versions available in CKEditor personalized. You should choose between them. And the options are,
    • Light Version
    • Standard Version
    • Rich Version
  • You will get the options to modify content depending on the selected version.

And finally Your personalized Rich Version of CKEditor looks like.

In customized build, you get the code structure and environment for developing new strapi plugins. Many developers build the various plugins and implement them in github. So you can use them or you can get the reference for plugins already created and create your own plugin just like me. I created a CKEditor plugin to add the Footnote function within the editor. This adds the anchor tag and the id/name attribute to the selected content.

Projects Completed till now.

Discover how we can help your business grow.

"Third Rock Techkno's work integrates complex frameworks and features to offer everything researchers need. They are open-minded and worked smoothly with the academic subject matter."

- Dr Daniel T. Michaels, NINS