ckeditor / strapi-plugin-ckeditor

CKEditor 5 custom field for Strapi.

CKEditor 5 custom field for Strapi

This package provides a custom field for Strapi that lets you use and configure CKEditor in no time.

Custom fields are supported since Strapi 4.4+ and offer powerful API to create highly customizable fields.

This is an official plugin, provided to you by the CKEditor team 👋

✨ Features

• No code field customization: customize each field for its specific usage scenario – let it be short note, blog article, or a document.
• Predefined editor presets: a couple predefined editor presets (sets of CKEditor 5 plugins and their configuration) to choose from.
• Custom max length validation: Twitter-like length validation with visual indicators, based on the number of characters in the text, not the HTML string.
• Dark mode support: because you like it.
• Media library integration: inserting images directly from Strapi's media library.
• More features coming soon: upload adapter integration, more granular editor toolbar and plugins configuration, and more.

🔧 Installation

Inside your Strapi app, add the package:

With npm:

npm install @ckeditor/strapi-plugin-ckeditor

With yarn:

yarn add @ckeditor/strapi-plugin-ckeditor

Then run build:

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.

npx create-strapi-app --quickstart strapi
cd strapi

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

mkdir -p src/plugins

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

git clone [email protected]:ckeditor/strapi-plugin-ckeditor.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.

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

Install dependencies:

yarn 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.

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

Rebuild the project and start the server:

yarn build
yarn develop

strapi-plugin-ckeditor's Issues

Heading dropdown is broken ?

When I select a heading value into the dropdown, the choosen value is always incremented by one in the HTML code ...

Should it be possible to make Heading 1 --> h1 , Heading 2 --> h2 ...

Thanks

Open the link in a new tab

I was using https://github.com/Roslovets-Inc/strapi-plugin-ckeditor5 for ckeditor

now I switched to this plugin (thank you)

I missing open link in a new tab feature

similar to here

how can I configure this?

empty line when i paste the text from Word file

empty line when i paste the text from Word file

it won't appear on Tip-Tap editor！

Improve the dark theme

On hover:

Border:

Link balloon:

Media embed:

Misc:

• I think it's a too low contrast between icon face and bg.

Installing CKEditor with Strapi 4.4.3

I must be an idiot. I installed this plugin, rebuilt Strapi. In plugins, I see CKEditor | The rich text editor for every use case. But I don't see a choice to add the CKEditor field to my builder, I just Strapi's default Rich editor.

Not able to install the Plugin locally

I wanted to use the CKEditor custom field. But after running...

  yarn add @ckeditor/strapi-plugin-ckeditor

  yarn build

I could not log into my Strapi Admin panel due to a blank screen.

Then I tried to install it locally, following the steps in your README file to see if I could spot and error or something I was missing.

  git clone [email protected]:ckeditor/strapi-plugin-ckeditor.git src/plugins/strapi-plugin-ckeditor

After running the following command, I get the message below.

  Cloning into 'src/plugins/strapi-plugin-ckeditor'...
[email protected]: Permission denied (publickey).
fatal: Could not read from remote repository.

Please make sure you have the correct access rights  

Am I missing something on my end?

And was wondering if the custom field supports my current version of Strapi.

Strapi Version:  4.5.3
Node Version:   16.8.0

Thank you for your help in advance.  

Note: when reverting to Strapi version 4.4.0, everything works.  Not sure if there was a breaking change that was introduced with the new Strapi version. 

Error probably relate to package name change

[2022-09-28 09:58:28.510] error: Could not find Custom Field: plugin::@ckeditor/strapi-plugin-ckeditor.CKEditor
Error: Could not find Custom Field: plugin::@ckeditor/strapi-plugin-ckeditor.CKEditor
    at Object.get (/Users/p/Workspace/strapi/strapi/node_modules/@strapi/strapi/lib/core/registries/custom-fields.js:16:15)
    at /Users/p/Workspace/strapi/strapi/node_modules/@strapi/plugin-content-type-builder/server/services/schema-builder/utils/convert-custom-field-type.js:13:65
    at Array.forEach (<anonymous>)
    at convertCustomFieldType (/Users/p/Workspace/strapi/strapi/node_modules/@strapi/plugin-content-type-builder/server/services/schema-builder/utils/convert-custom-field-type.js:9:29)
    at Object.createContentType (/Users/p/Workspace/strapi/strapi/node_modules/@strapi/plugin-content-type-builder/server/services/schema-builder/content-type-builder.js:82:7)
    at Object.createContentType (/Users/p/Workspace/strapi/strapi/node_modules/@strapi/plugin-content-type-builder/server/services/content-types.js:87:34)
    at Object.createContentType (/Users/p/Workspace/strapi/strapi/node_modules/@strapi/plugin-content-type-builder/server/controllers/content-types.js:62:52)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async returnBodyMiddleware (/Users/p/Workspace/strapi/strapi/node_modules/@strapi/strapi/lib/services/server/compose-endpoint.js:52:18)
    at async policiesMiddleware (/Users/p/Workspace/strapi/strapi/node_modules/@strapi/strapi/lib/services/server/policy.js:24:5)

Most likely related to the package name change (from strapi-plugin-ckeditor to @ckeditor/strapi-plugin-ckeditor). Probably I should've changed it somewhere in the plugin code too.

This appears on the console when adding a CKEditor field to a type. So the custom field is actually shown and works, but upon saving this, this is logged.

Image emded url not pointing to Strapi Uploads URL in Next.js- Broken image links

Hello,

When i upload an image from Strapi Media Libray and the view my Next.js front end, I see broken image links.
I check the link and it is going to to my Next.js url (http://localhost:3000) becasue of the relative path (/uploads/image-file_name_2133913322.png. My local Strapi env is at path http://localhost:1337.

How do I get it to work on my local env?

Invariant Violation: 'maxLengthCharacters' must be prefixed with 'options.'

After installing this plugin on Strapi v4.5.3 I get an error and blank white screen when visiting admin.

Invariant Violation: 'maxLengthCharacters' must be prefixed with 'options.'

According to the documentation, name of the option has to start with options.

https://docs.strapi.io/developer-docs/latest/development/custom-fields.html#options

CKEditor 5 issue with the `mediaEmbed` plugin to insert YouTube iframe videos

Hello 👋

I have an issue using the mediaEmbed plugin when inserting YouTube videos, according to the ckeditor 5 docs this can be solved by:

https://ckeditor.com/docs/ckeditor5/latest/features/media-embed.html#including-previews-in-data
Optionally, by setting mediaEmbed.previewsInData to true you can configure the media embed feature to output media in the same way they look in the editor. So if the media element is “previewable”, the media preview (HTML) is saved to the database:

Currently I was not able to find a way to set previewsInData to true, looking at this post I edited my config file to look like this:

// config/plugin.js
module.exports = ({ env }) => ({
  ...
  // CKEditor 5 plugin
  ckeditor: {
    enabled: true,
    config: {
      editor: {
        mediaEmbed: {
          previewsInData: true,
        },
      },
    },
  },
  ...
});

Despite this it does not apply the change.

I was able to figure out that if I change the source code of this file it does work as expected:

// @ckeditor/strapi-plugin-ckeditor/admin/src/components/CKEditorInput/Configuration.js
export default class Configurator {
  ...
  getEditorConfig() {
    const customConfig = {
      mediaEmbed: {
        previewsInData: true
      }
    }
    
    const config = {
      ...this._getBaseConfig(),
      ...customConfig
    };

    if ( this.fieldConfig.maxLength ) {
      config.plugins.push( window.CKEditor5.maximumLength.MaximumLength );

      config.maximumLength = {
        characters: this.fieldConfig.maxLength
      };
    }

    return config;
  }
  ...
}

Not sure if i'm doing something wrong here, if so, let me know 😄

Invalid git uri in documentation.

In "contributing" section link to clone is invalid.

Add support for a custom configuration

Hi !

Is there a way to enable / disable some features of the editor ?

Thanks for helping !

Not able Install the Plugin

After installing the plugin I am getting a Black Screen.
Please Solve this I need this to work in my sytem

Feature Request: Select media from strapi media library

Hey there,

as the title says - I would like to select media from the media library in Strapi.

Best Regards

Unable to add video from media library

Hello, i'm not able to add any video from media library, and there is no error.

Nothing in console, nothing in log..

Do am i missing something?
Have I forgotten some configuration or is it a bug?

Thanks

Strapi 4.5.2
strapi-plugin-ckeditor 1.1.2

Didn't work with Strapi v4.5.6

Hi! I did
npm install @ckeditor/strapi-plugin-ckeditor
npm run build
npm run develop

But nothing changed in WYSIWYG editor for the field of Richtext. The same steps for the unofficial plugin worked.

Strapi project has been created with npx create-strapi-app --quickstart strapi.
npm version 8.19.3
node version v18.13.0

Integrate Tex/Latex through custom plugin

I have been trying to integrate some form of math library as a custom plugin to CKEDITOR for strapi. No luck so far.

Are custom plugins a possible addition here?

The kind of functionality I am looking to add is contained within this npm package: https://github.com/isaul32/ckeditor5-math#installation

Adding some support/documentation for adding custom plugins to this plugin would take things to the next level!

Add additional styling for word counter when limit is exceeded or close to limit.

We should indicate in word counter that limit is exceeded or close to limit, for example by adding additional classes for both cases.

Resizing Images by dragging corners not available

When placing an image in the editor it is not possible to resize it by dragging the corners on the image. The square indications on the corners are also not showing.

Is there a way to turn on this functionality?

Add support for the upload adapter

First of all it's greate that you did it already!

I have to implement upload adapter but I can find an example for strapi.
An example config would be very helpful.
Thank you.

Is there a way to add math/chem equations using MathJax or equivalent?

There seems to be the capability to add MathJax to CK editor V5. However the documentation is not the clearest when it comes to integrating this with strapi.

Is this possible/in the pipe-line for this repo? It would be great to add customisation to the editor for fractions/chemical equations.

This is what I would love to integrate into your plugin, but I can't figure it out:
https://www.npmjs.com/package/ckeditor5-math

Thanks!

Unable to add/upload any media (image or video)

First of all, thanks for your work on this awesome custom field !

Unfortunately I'm facing an issue which doesn't allow me to push in production. I am unable to add any media.

When trying to select an image from my files, it just ignore my action and stay the same. When I try to add a Youtube video for example, I get a weird blank space as shown in my screenshot below:

Did I miss something to configure ?

With the default Strapi Markdown editor, I can add images without any issues.

html5audio plugin

I'm looking for a way to upload audio in editor but I couldn't found it.
I find that there is already a plugin html5audio for CKEDITOR. How can I integrate that package into this package?

Add Third Party Plugins

Is there any way to add third parties plugins to this package?

Fro example I want to support latex in my editor by adding latex or math package, How can I do it?

Bug: Dropdown panel is partly hidden when screen size is not sufficient

Dropdown panel is partly hidden when screen size is not very wide, between 1100px and 1700px, see screenshot attached.

It appears that css variable --ck-toolbar-dropdown-max-width should be changed to 40vw instead of 60vw for screen size above 1100px.

Update setting dev env instructions since Strapi 4.4 is out

https://github.com/strapi/strapi/releases/tag/v4.4.0

Override CSS

How do I override the default font-face that this plugin sets for CKEditor?

Introduce CI

Some integration/E2E tests with Strapi would be great.

There's not much that can go wrong now, so basic ones would be enough.

Change styling of editor to match strapi themes.

Editor should have different (matching) css styling for both light and dark mode.

Interference or "Not Supported"

The plugin is interfering with other components created in Strapi and causing an issue when opening a selector inside of the same component. Here's a screenshot of the issues appearing in the console:

Strapi: v4.4.4
Node: v16.13.0 
Plugin: v0.0.4

P.S. I tried upgrading Strapi to v4.5.3 after the releasev0.0.5of the plugin and it started showing a "Not supported" placeholder with disabling the field like the screenshot below:

Update packages to 36.0.0

Current packages are outdated (35.1.0), so let's make the update to the latest version.

const data = editor.getData() cause laggy when typing fast with large text

My site is very slow when typing fast with Ckeditor
I investigated and saw that onChange event with editor.getData(); is root cause

**onChange={ ( event, editor ) => {
const data = editor.getData();
onChange( { target: { name, value: data } } );

        const wordCountPlugin = editor.plugins.get( 'WordCount' );
        const numberOfCharacters = wordCountPlugin.characters;

        if ( numberOfCharacters > maxLength ) {
          console.log( 'Too long' );
        }
      }}**

I tried it with setTimeout function but still lag if the editor already has large text

onChange={(event, editor) => {
if (inputTimeout) {
window.clearTimeout(inputTimeout);
}
inputTimeout = setTimeout(
() => {
const data = editor.getData();
onChange( { target: { name, value: data } } );
},
5000
);
}}
Do you have any solution to solve it?

Support Node 18.x

Hi team,
Do you any plan to support Node 18.x, it's LTS now and according to strapi document, Node v18.x is recommended for Strapi v4.3.9 and above
https://docs.strapi.io/developer-docs/latest/setup-deployment-guides/installation/cli.html#step-1-make-sure-requirements-are-met

Add Latex To CK editor

The official CK editor provides a way to add Latex to the editor. Is there a way to add that to this plugin.

Strapi 4.4.1 - Editor not enabling after following installation instructions through Marketplace

After installing CKEditor through the command shared on Strapi Marketplace, as well as running npm run build afterwards, the plugin does not seem to be enabled after running the application.

Tested this in my current application, as well as a clean freshly installed Strapi, both 4.4.1.

Things i've tried:

• adding entry to ./config/plugins.js:
  module.exports = () => ({ ckeditor: true });
• Reinstalling and rebuilding after removing node_modules/, build/ and .cache/ folders
• Registering the plugin in the lifecycle hooks (and encountering an error that CKEditor is already registered)

H4 is not available

H4 heading is not available. Also a bunch of other options are not available for use!

These are the options of https://www.npmjs.com/package/@_sh/strapi-plugin-ckeditor

And these are the options of customer field :

A lot of functionality was removed in customer field. How can I enable all of them ?

Packages versions:
"@strapi/strapi": "4.4.7",
"@ckeditor/strapi-plugin-ckeditor": "^0.0.4",

Strapi CKEditor output in HTML/Markdown does not correspond with the official Content styles from CKEditor5

I am writing to inquire about the display of CKEditor's rich text output in HTML/Markdown into Frontend(React) using React-Markdown. As an initial step, I have imported the official content styles into React from the CKEditor team. However, I have encountered an issue where the CSS class names are missing, and the HTML/Markdown output appears different from the actual CKEditor HTML output when viewed using Strapi REST API.

Specifically, when a table is rendered using CKEditor5 Custom field from Strapi REST API, the resulting HTML output is simply <table>...</table>. However, when inspecting the table generated from the CKEditor5 examples on the official site, the HTML output looks like this:

<figure class="table ck-widget ck-widget_with-selection-handle" contenteditable="false">
   <table></table>
</figure>

To ensure consistency in rendering the HTML/Markdown output in React with the CKEditor5 content style format, I would like to inquire whether there is a way to receive the HTML/Markdown output in this format, or if there is an alternative solution to achieve this.

Ckeditor <p> tag instead of <br>

By default, the plugin inserts a

tag with a space when the line breaks. How can it be replaced?

Mention supported Strapi versions in README.md

Can you indicate which Strapi versions are officially tested and supported in the README so that there is no confusion as to what to expect on newer versions ?

Problem while using generalHTMLSupport & sourceEditing plugin #375

I am facing problem for generalHTMLSupport and sourceEditing plugin
when I add these two in plugins, I get Cannot read properties of undefined (reading 'generalHTMLSupport')

I am using custom ckeditor5 with react.

config is defined as
const CKEDITOR_BASE_CONFIG_FOR_PRESETS = { plugins: [ window.CKEditor5.autoformat.Autoformat, window.CKEditor5.basicStyles.Bold, .......... window.Ckeditor5.generalHTMLSupport.GeneralHTMLSupport,],
toolbar: {.....}`

I am following second approach (custom build) from this - https://www.thirdrocktechkno.com/blog/how-to-integrate-ckeditor5-in-strapi/
I have not imported it
because,
If I import it like following
import GeneralHtmlSupport from '@ckeditor/ckeditor5-html-support/src/generalhtmlsupport';
it gives "ckeditor-duplicated-modules error".

if I don't import then I get - "Cannot read properties of undefined (reading 'generalHTMLSupport')" error

Markdown output support

The default strapi rich text output is markdown. It would be nice to preserve the output as markdown and change the editor experience.

htmlEmbed not working in Markdown mode

Is there a way to customize a custom toolbar?

Is there a way to create a customize toolbar?

How can I enable forcePasteAsPlainText?

https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-forcePasteAsPlainText

How to config sourceEditing to toolbar?

Does anyone know how can I add the sourceEditing to the toolbar in this plugin?

https://github.com/ckeditor/strapi-plugin-ckeditor/blob/master/admin/src/components/CKEditorInput/Configurator.js

it throws an error saying "sourceEditing" not found

https://ckeditor.com/docs/ckeditor5/latest/features/source-editing.html

If I add the custom package according to the above link, it will show duplicated plugin found in console error.

Source Editing Plugin not working.

I have cloned the repository, and added the plugin as custom field everything is working as expected.
And installed the ckeditor5-source-editing plugin, it enables me to edit the HTML, but on save the changes are reverted.
I cannot even add a single attribute to a <p> tag e.g., <p class="test">, it reverts to normal <p> tag

Iframely support

Is there a way to connect Iframely to this plugin to support oembed previews into custom field?

support more coding language

I would like to request a feature that would allow for more programming languages to be supported in the code block editor. Currently, only a few languages are supported, but highlight.js supports over 100 languages. It would be very helpful if we could have the option to specify the language of the code block by entering the language name. This would greatly enhance the formatting capabilities of the editor and make it easier for users to display their code.

Thank you for considering this feature request.

Youtube Embeds are stripped when saved

Title.

I have created a new field named "content" set output as HTML and not markdown. Add HTML snippets in the editor hit saved and it is stripped. Why is that?

EDIT: When I view the API, it is still sending markdown instead of HTML even when HTML is set as output and not markdown.

Image size bug

When you change the position of an image to centered or side, the image renders in its original size. The formatting only applies if you have the image in line.

Environment
strapi - 4.4.5
ckeditor - 0.0.4
node - 16.18.0

Add screenshot to the readme