Add ckeditor plugins

Hi! is there any guide or post with steps to add plugins to the CKEditor 5? I got the classic build going, but I wanted the fonts plugin (or maybe use the decoupled editor instead of the classic).
Guide I followed and worked for the classic one: https://strapi.io/documentation/v3.x/guides/registering-a-field-in-admin.html#introduction
when I try adding plugins I get errors like:
https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-ckeditor-duplicated-modules (edited)

I would appreciate any help, since the ckeditor is a great upgrade, and adding the plugins would make it even better!

System Information
  • Strapi Version:
  • Operating System:
  • Database:
  • Node Version:
  • NPM Version:
  • Yarn Version:

Interested in seeing if anyone in the community has a response to this, for those of you using CKEditor :slight_smile:

Hi @msg

what you will need to do, is create, build and publish your own ckeditor. Ill explain how:

  1. Customize your own ckeditor with plugins of your chioce and download: https://ckeditor.com/ckeditor-5/online-builder/

  2. Create a repo and commit the downloaded files

  3. adapt name and info in package.json

  4. build it

  5. publish to npm

  6. add it to strapi / plugins package.json "my-custom-ckeditor": "^0.0.1"

  7. follow the strapi created tutorial to replace the wysiwyg editor but do the following:

  8. in ./plugins/wysiwyg/admin/src/components/CKEditor/index.js import your published editor: import Editor from 'my-custom-ckeditor/build/ckeditor'

  9. create your toolbar config:

const configuration = {
    toolbar: [
        'heading',
        '|',
        'bold',
        'italic',
        'underline',
        'subscript',
        'superscript',
        'strikethrough',
        'horizontalLine',
        '|',
        'link',
        'bulletedList',
        'numberedList',
        '|',
        'alignment',
        'indent',
        'outdent',
        '|',
        // 'insertTable',
        'removeFormat',
        'specialCharacters',
        'undo',
        'redo',
    ],
    language: 'de',
    table: {
        contentToolbar: [
            'tableColumn',
            'tableRow',
            'mergeTableCells',
        ],
    },
    licenseKey: '',
}
  1. Create and export your CustomEditor:
import React from 'react'
import PropTypes from 'prop-types'
import {CKEditor} from "@ckeditor/ckeditor5-react";
import styled from 'styled-components'
import Editor from 'my-custom-editor/build/ckeditor'

const CustomEditor = ({onChange, name, value}) => {
    return (
        <Wrapper>
            <CKEditor
                editor={Editor}
                config={configuration}
                data={value}
                onChange={(event, editor) => {
                    const data = editor.getData()
                    onChange({target: {name, value: data}})
                }}
            />
        </Wrapper>
    )
}

CustomEditor.propTypes = {
    onChange: PropTypes.func.isRequired,
    name: PropTypes.string.isRequired,
    value: PropTypes.string,
}

export default CustomEditor
  1. Use this CustomEditor in your wysiwyg plugin ./plugins/wysiwyg/admin/src/components/Wysiwyg/index.js:
import CustomEditor from '../CKEditor'
const Wysiwyg = ({
                   inputDescription,
                   errors,
                   label,
                   name,
                   noErrorsDescription,
                   onChange,
                   value,
                 }) => {
  return (
    <div
      style={{
        marginBottom: '1.6rem',
        fontSize: '1.3rem',
        fontFamily: 'Lato',
      }}
    >
      <Label htmlFor={name} message={label} style={{marginBottom: 10}}/>
      <CustomEditor name={name} onChange={onChange} value={value}/>
      <InputDescription
        message={inputDescription}
        style={!isEmpty(inputDescription) ? {marginTop: '1.4rem'} : {}}
      />
      <InputErrors errors={(!noErrorsDescription && errors) || []} name={name}/>
    </div>
  )
}

rebuild and redeploy

@DMehaffy maybe something like this could be added to the docs / tutorials? This is a very basic use case and will be relevant to almost everybody using ckeditor, since the “classic-react-ckeditor” doesnt even come with “underline” etc. So anyone who wants to use a proper RTE needs to build der own.

2 Likes

I’m actually hoping someone in the community can create a full featured plugin for CKEditor, it would be quite nice to have but we (Strapi) aren’t looking to maintain something like that ourselves.

2 Likes

Thank you!
The steps worked great for localhost. For some reason when I deploy to heroku the pages where the ckeditor would show up show an error:

Something went wrong.

Details
Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=undefined&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

Thanks!

check your imports, you are most likely missing { xxx } - the brackets somewhere.

I had a similar issue with:

import {CKEditor} from "@ckeditor/ckeditor5-react";
1 Like

you are right!

I continued this thread there:

1 Like

stock Strapi CKeditor is complete and easy to use, why not just give users a settings page to customize CKeditor toolbars?

Hi @hadifarnoud

Our default rich text medium right now is markdown whereas CKEditor is built for HTML based rich text. We don’t offer CKEditor stock with Strapi and it’s something a user will need to add to their project.

However I did notice over the weekend that someone is working on a plugin in the following draft PR to our awesome-strapi repo:

2 Likes

Hi,
All this worked. Now, I haven’t touched the site for a little while and I just logged in today and it suggested updating (from 3.3 to 3.4) so I did. Then I noticed that the plugin can’t pick up any content. Basically it looks as if there was nothing in the page . But the site can show it. That makes me think that it is stored in the postgres db. Also, if I update the content, it updates it in the site as well. So the only issue appears that the ckedtor plugin doesn’t pull the content already in the database to show in the editor.

The image attached shows the editor as I can see it, i.e. as if there was no content (but there is). Has anyone run into this issue? potentially as part of the update.

Finally: if I copy the content form the “live” page and paste it in the editor, it works, and I can then change it. BUT once you refresh the page, it goes blank again.

It appears that the cause is something about 3.4.1, I rolled back to 3.3.4 and it works fine. If I have more time in the future I may try to find out what caused the break, in the meantime if someone has a couple of pointers on how to identify the dependency that may have caused the issue I am happy to test it out.

im having the same issue as msg, the editor on first load is showing up blank after implementing ckeditor.

One thing to note is that if I remove the relational field display from the view then the richtext with CKeditor field populates properly.

Once I add it back to the view it loads up blank again

This plugin strapi-plugin-ckeditor5 works perfectly for me on the latest version (3.4.6) with no configuration at all.

Just make sure to remove any prior ckeditor plugins or custom code in /extensions/content-manager.

3 Likes

The question really to all of this is: Is it better?

I understand the issue of the default one (markdown), but what will have the most impact on the growth of MY strapi project? Changing the Editor to CKEditor in Strapi, or changing my frontend to handle the markdown?
I can follow this tutorial:

and I will be able to handle the markdown in my nuxtjs project.

But which is better?
I imagine the CKEditor bring also a big advantage but what is the impact to have to rely on this?

What is the impact on converting the markdown with nuxt?

Or maybe Quilll instead of CKEditor :

Or maybe just creating more fields in Strapi dedicated to special coloring or way of displaying the content of a text or paragraph?

Any chance you figured out what caused the blank page on refresh? Same issue occurs on 3.6.3

Thanks a ton @lnhh. You helped me steer in right direction
@DMehaffy I have also created a full featured npm package for CKEditor5.

In case someone needs it:

anancion-ckeditor5-custom-build - npm (npmjs.com)