roslovets-inc / strapi-plugin-ckeditor5 Goto Github PK

Hi. Thanks for your work.

My custom ckeditor.js file doesn't rewrite default plugin's conficuration.

My step for reproduse:

1. Install plugin: yarn add strapi-plugin-ckeditor5@latest
2. Create file by path: src/extensions/ckeditor5/admin/src/config/ckeditor.js
3. Copy content from node_modules/strapi-plugin-ckeditor5/admin/src/config/ckeditor.js to my src/extensions/ckeditor5/admin/src/config/ckeditor.js
4. Remove all Items except fontFamily
5. Remove .cache and build folder
6. Run yarn build and run strupi

Result: I see default toolbar items
Expected: Change toobar by my config

My config

module.exports = {
 ////// CONFIGURATION TEMPLATE: uncomment desired lines to override default config.
 ////// While all lines are commented, config will not change anything.
 toolbar: {
   items: [
     "fontFamily",
   ],
   shouldNotGroupWhenFull: true
 },
 image: {
   styles: [
     "alignCenter",
     "alignRight",
   ],
   resizeOptions: [
     {
       name: "resizeImage:original",
       value: null,
       icon: "original"
     },
     {
       name: "resizeImage:50",
       value: "50",
       icon: "medium"
     },
     {
       name: "resizeImage:75",
       value: "75",
       icon: "large"
     }
   ],
   toolbar: [
     "imageStyle:alignLeft",
     "imageStyle:alignCenter",
     "imageStyle:alignRight",
     "|",
     "imageTextAlternative",
     "|",
     "resizeImage:50",
     "resizeImage:75",
     "resizeImage:original",
     "|",
     "linkImage",
   ]
 },
 table: {
   contentToolbar: [
     "tableColumn",
     "tableRow",
     "mergeTableCells",
     "tableProperties",
     "tableCellProperties",
   ]
 },
 fontColor: {
   colors: [
     {color: "hsl(0, 0%, 0%)", label: "Black"},
     {color: "hsl(0, 0%, 30%)", label: "Dim grey"},
     {color: "hsl(0, 0%, 60%)", label: "Grey"},
     {color: "hsl(0, 0%, 90%)", label: "Light grey"},
     {color: "hsl(0, 0%, 100%)", label: "White", hasBorder: true},
     {color: "hsl(0, 75%, 60%)", label: "Red"},
     {color: "hsl(30, 75%, 60%)", label: "Orange"},
     {color: "hsl(60, 75%, 60%)", label: "Yellow"},
     {color: "hsl(90, 75%, 60%)", label: "Light green"},
     {color: "hsl(120, 75%, 60%)", label: "Green"},
     {color: "hsl(150, 75%, 60%)", label: "Aquamarine"},
     {color: "hsl(180, 75%, 60%)", label: "Turquoise"},
     {color: "hsl(210, 75%, 60%)", label: "Light blue"},
     {color: "hsl(240, 75%, 60%)", label: "Blue"},
     {color: "hsl(270, 75%, 60%)", label: "Purple"},
   ],
 },
 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"},
   ]
 },
 highLight: {
   options: [
     {
       model: "yellowMarker",
       class: "marker-yellow",
       title: "Yellow marker",
       color: "var(--ck-highlight-marker-yellow)",
       type: "marker",
     },
     {
       model: "greenMarker",
       class: "marker-green",
       title: "Green marker",
       color: "var(--ck-highlight-marker-green)",
       type: "marker",
     },
     {
       model: "pinkMarker",
       class: "marker-pink",
       title: "Pink marker",
       color: "var(--ck-highlight-marker-pink)",
       type: "marker",
     },
     {
       model: "blueMarker",
       class: "marker-blue",
       title: "Blue marker",
       color: "var(--ck-highlight-marker-blue)",
       type: "marker",
     },
     {
       model: "redPen",
       class: "pen-red",
       title: "Red pen",
       color: "var(--ck-highlight-pen-red)",
       type: "pen",
     },
     {
       model: "greenPen",
       class: "pen-green",
       title: "Green pen",
       color: "var(--ck-highlight-pen-green)",
       type: "pen",
     },
   ],
 },
 htmlEmbed: {
   // showPreviews: true,
 },
 fontFamily: {
   options: [
     "default",
     "Arial, Helvetica, 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",
     "JetBrains Mono, monospace",
     "Lato, Inter, sans-serif",
   ],
 },
 link: {
   defaultProtocol: "http://",
   decorators: [
     {
       mode: "manual",
       label: "Open in a new tab",
       defaultValue: true,
       attributes: {
         target: "_blank",
         rel: "noopener noreferrer",
       },
     },
     {
       mode: "manual",
       label: "Downloadable",
       attributes: {
         download: "download",
       },
     },
   ],
 },
};

Hi!
First of all I want to thank you for the strapi-plugin-ckeditor5, it's really useful.
I found an issue trying to put heading titles in the editor content, I don't know if it's a ckeditor bug or if it depends on the custom build. When I put a Title 1 in the editor and save, when I look in my database I actually have a h2 instead of h1. Same thing for the Title 2, it gives me a h3, and Title 3 gives me a h4.

Thank you in advance

Hi!

Great plugin!

I would like to see an option to set which file size is used from the media library...

Something along the lines of:

const format = config.image?.format;
const url = prefixFileUrlWithBackendUrl(format && data.formats && data.formats[format] ? data.formats[format].url : data.url);

My client is always uploads high res images to the media library, and then they use those images in the content, without really thinking of changing it to be the lower res image...

What do you think?

Hello,

Before all thank you for your amazing work, the editor and its configuration really meets my needs.
I have one question though, which CSS should I use to reproduce the editor's style in the website's frontend ?
I looked into the source code but can't find any.

Thank you
Loïs

First great job on the plugin! It would be great if the collaboration features could be added so that people who enroll in premium could take advantage of those features such as revision history and comments.

please add RTL and LTR buttons too, thanks

Please add this feature ckeditor5 docs

I really want left/right aligned images to the content.

Hi, on the current strapi-plugin-ckeditor5 you cannot set the _target="blank" on links. Would be possible to add this option (or document how to do)? Thank you.

Hello,
strapi compiled successfully after executing strapi build, but strapi didn't start with strapi develop.

➜  strapi yarn strapi develop
yarn run v1.22.4
$ strapi develop
[2021-04-24T11:04:16.412Z] debug ⛔️ Server wasn't able to start properly.
[2021-04-24T11:04:16.414Z] error TypeError: Cannot read property 'routes' of undefined
    at /home/jonathan/Public/cms/strapi/node_modules/strapi-plugin-users-permissions/middlewares/users-permissions/index.js:35:35
    at /home/jonathan/Public/cms/strapi/node_modules/lodash/lodash.js:4967:15
    at baseForOwn (/home/jonathan/Public/cms/strapi/node_modules/lodash/lodash.js:3032:24)
    at /home/jonathan/Public/cms/strapi/node_modules/lodash/lodash.js:4936:18
    at Function.forEach (/home/jonathan/Public/cms/strapi/node_modules/lodash/lodash.js:9410:14)
    at Object.initialize (/home/jonathan/Public/cms/strapi/node_modules/strapi-plugin-users-permissions/middlewares/users-permissions/index.js:34:11)
    at /home/jonathan/Public/cms/strapi/node_modules/strapi/lib/middlewares/index.js:43:28
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

How can I solve this problem. I am using node v14.14.0 && strapi v3.0.0-beta.19.3

Hey and thanks for the awesome plugin.

CK5 Editor supports 'todolist' and 'strikethrough' ootb via their plugin system. It would be great, if these two could be included :)

• https://ckeditor.com/docs/ckeditor5/latest/features/todo-lists.html
• https://ckeditor.com/docs/ckeditor5/latest/features/basic-styles.html

Thanks and kind regards
Luca

I have several dynamic zones configured within Strapi that contain CK editor. Everything works great, until you try to move one of those zones up or down. At that point the following error is thrown:

Cannot convert undefined or null to object
Read more: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-Cannot convert undefined or null to object
TypeError: Cannot convert undefined or null to object
    at Function.keys (<anonymous>)
    at cs.set (http://localhost:1337/admin/main.756de919.chunk.js:1:6876335)
    at cs.<anonymous> (http://localhost:1337/admin/main.756de919.chunk.js:1:6672788)
    at cs.fire (http://localhost:1337/admin/main.756de919.chunk.js:1:6664247)
    at cs.<computed> [as set] (http://localhost:1337/admin/main.756de919.chunk.js:1:6672839)
    at kw.setData (http://localhost:1337/admin/main.756de919.chunk.js:1:6942234)
    at Nt.shouldComponentUpdate (http://localhost:1337/admin/main.756de919.chunk.js:1:6323295)
    at bi (http://localhost:1337/admin/main.756de919.chunk.js:1:4238055)
    at Na (http://localhost:1337/admin/main.756de919.chunk.js:1:4257548)
    at gs (http://localhost:1337/admin/main.756de919.chunk.js:1:4294368)

This behavior persists with and without a custom config defined in /extensions/ckeditor5/admin/src/config/ckeditor.js.

CKeditor adds <p>text</p> tags to inline text after every save

how to get rid of that? I see that there's an option to add config.autoParagraph = false, but where in ckeditor would I add it?

doc link

Related links:

• https://stackoverflow.com/questions/3610422/ckeditor-prevent-the-p-at-the-beginning
• https://ckeditor.com/old/forums/Support/CK4-remove-%C2%A0-tags

The UI isn't compatible with Stapiv 4.1.6 new Dark Mode feature. It stays white. Which makes it look odd when in Dark Mode.

Hello, how to can add Code plugin?

Hey there! First, thank you very much for this plugin. It really is a strapi gamechanger.

Is there a way to customize or extend the CKEditor? e.g. I need to add a h4 to the editor and I dont find anything for this in the docs. Thanks in advance!

Crazy idea: Is it possible to choose different toolbar items depending on what the field name is?

For example, for field_a I might want italics and bold and for field_b I might only want superscript. Though admittedly, some combination of component name and field name might be best to avoid collisions.

strapi: "4.0.3",
strapi-plugin-ckeditor5: "^2.0.0-rc.2",
docker image: strapi/base

TypeError: Cannot read properties of undefined (reading 'components')

Adding a YouTube video in my RichText fields is possible and they are displayed correctly in the strapi/admin backend.
While fetching the data in NextJS does not display.

As per the documentation of CKEditor Media-Embed

this is the correct default behaviour.

There is a workaround though:

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:

How and where can I set this property?

Strapi = V4

Hi everyone!
I have been trying to remove the image, media lib, and embedded video icons. What I have done is to comment the icons in the config file in the toolbar array, and I also tried inserting the removePlugins: ['Image', 'ImageCaption', 'ImageStyle', 'ImageToolbar', 'ImageUpload', 'MediaEmbed'], but with no result so far.

How can I remove these icons?
Thanks for your help!

Deleted

I am saving some content with headings, with such a config:

module.exports = {
  heading: {
    options: [
      { model: "paragraph", title: "Paragraph", class: "ck-heading_paragraph" },
      {
        model: "heading1",
        view: {
          name: "p",
          classes: "title-1",
        },
        title: "Heading 1",
        class: "ck-heading_heading1",
      },
   ], ...
};

When I input content such as:

heading 1

paragraph

It gets saved properly, and when i try to retrieve the text, it shows the following:

<p class=\"title-1\">Header 1</p><p>&nbsp;</p><p>paragraph</p>

However, when i refresh the content page on strapi, the headings are gone from the editor, and I get asked to save the version without any defined heading.

hello, thanks for plugin,
when I try to change font-size, I find out editor add a new class name like text-huge, text-big on element but it didn't work
because .ck-editor__main class have font: revert; to override it, can I do anything to solve it?

thanks for asking the question!!!

Hello. Can you add Code and Code Block to this plugin?

Media library insertion when there are more than one rich text field lands on the second one. Please check the video preview.

Hello!

First of all, thanks a lot for the plugin!

Now let's talk about the bug.
I can't align images when using fullscreen mode, because the alignment balloon won't show up.

Alignment balloon

The media library modal also won't show up.

Thanks!! 🐛

First of all thanks a lot for the handy plugin! After going through the Strapi tutorial to get the ckeditor work the experience with your plugin is much more enjoyable. I like the fact that the translation is already works out of the box and that the plugin already has a set of nice features, especially image uploads! Maybe one thing would enhance my own experience: if the empty config had some kind of a commented template with features that could be used there, cause initially I was not attentive enough and just copied literally everything from the reference config. But that's just me! 😎

What I would really want to have is the button to use the ckeditor in the fullscreen mode. Just like the default Strapi editor does is fine. I would add to that that while the width of the editor area is more or less comfortable, it's height is not enough IMHO working with large volume texts. Thanks again!

Hey ! First, thanks for you plugin 😄

I copied your code to make a local plugin for my app, because I neede to change the configuration file (which cannot be currently changed on Strapi v4), but also because I needed to have the CKEditor to be displayed in my language.

I successfully implemented the correct language, with a import "@ckeditor/ckeditor5-build-classic/build/translations/fr"; in my custom CKEditor/index.js file.

I would like to contribute on how to implement internationalization for this plugin, which could use the Strapi interface language, but I'm quite lost between all the different docs. All that I have understand is that it's not easy, because the translation file should be implement at build time...

Any hints on how to implement the feature ?

Hello,

Thanks for this wonderful plugin :)

I want to display the uploaded images on my site but I cannot. Because the URL path is wrong. I get something like "/uploads/test.png".

How can I change the path to put my server path before "/ uploads /" please?

Hi! I was wondering if this excellent strapi plugin of the CKeditor 5 also supports the sourceEditing and removeFormatplugins? Activating them in the config/ckeditor.js does not work.

According to the demo given:
https://roslovets-inc.github.io/ckeditor5-build-strapi-wysiwyg/
or the config.js here:
https://github.com/Roslovets-Inc/ckeditor5-build-strapi-wysiwyg/blob/main/src/ckeditor.js
removeFormat should actually be available. Not sure what I am doing wrong...

However, what can be done to implement "sourceEditing"?
Thank you very much!

First of all thank you very much for this plugin! Works like a charm! :)
I am very happy with the wide functionalities, especially that I can insert different programming languages and mark them as such.

One thing I noticed is that when I make changes via the code option like assigning an ID to a heading to set jump marks in the code, this is deleted again as soon as I change the view again or save the document.
Would be very cool if this would work too!

Strapi Version 4.1.7
ckeditor 2.1.1-rc.1

Bug report

Describe the bug

I'm trying to edit a page with dynamic zones in the 'Content Manager'. Some components within a dynamic zone can be clicked, and expand when clicked to show the component fields. Components with the CKEditor however are triggering the front-end to crash. The entire page turns white and we get 3 errors in the developer console:

main.9eeb4fd0.js:2 TypeError: Cannot read properties of undefined (reading 'components')
    at t.default (main.9eeb4fd0.js:2)
    at c (main.9eeb4fd0.js:2)
    at la (main.9eeb4fd0.js:2)
    at $s (main.9eeb4fd0.js:2)
    at jl (main.9eeb4fd0.js:2)
    at Cl (main.9eeb4fd0.js:2)
    at Ml (main.9eeb4fd0.js:2)
    at wl (main.9eeb4fd0.js:2)
    at main.9eeb4fd0.js:2
    at t.unstable_runWithPriority (main.9eeb4fd0.js:2)

main.9eeb4fd0.js:2 Error: react-error-boundary requires either a fallback, fallbackRender, or FallbackComponent prop
    at t.n.render (3706.c60e5bcc.chunk.js:2)
    at Qa (main.9eeb4fd0.js:2)
    at Ya (main.9eeb4fd0.js:2)
    at $s (main.9eeb4fd0.js:2)
    at jl (main.9eeb4fd0.js:2)
    at Cl (main.9eeb4fd0.js:2)
    at Ml (main.9eeb4fd0.js:2)
    at wl (main.9eeb4fd0.js:2)
    at main.9eeb4fd0.js:2
    at t.unstable_runWithPriority (main.9eeb4fd0.js:2)

Uncaught Error: react-error-boundary requires either a fallback, fallbackRender, or FallbackComponent prop
    at t.n.render (3706.c60e5bcc.chunk.js:2)
    at Qa (main.9eeb4fd0.js:2)
    at Ya (main.9eeb4fd0.js:2)
    at $s (main.9eeb4fd0.js:2)
    at jl (main.9eeb4fd0.js:2)
    at Cl (main.9eeb4fd0.js:2)
    at Ml (main.9eeb4fd0.js:2)
    at wl (main.9eeb4fd0.js:2)
    at main.9eeb4fd0.js:2
    at t.unstable_runWithPriority (main.9eeb4fd0.js:2)

Steps to reproduce the behavior

1. Go to 'Content Manager'
2. Click on a page with a dynamic zone
3. Scroll down and try to expand components that have a rich text field within this dynamic zone
4. See error

Expected behavior

I expect to see the form including the CKEditor for this component rendered, with all fields for this component type.

Screenshots

This screencast shows the problem:

Definitely let me know if you need anything else.

### System

- Node.js version: v16
- NPM version: 8.1.3
- Yarn version: 1.22.17
- Strapi version: v4.0.4
- Database: PostgreSQL
- Operating system: Linux/MacOS

### Additional context

The problem occurs both locally and when built/deployed to Google App Engine.

Just wanted to post up on here as a member of the Strapi team and thank you for all that you are doing with this plugin. Our community as a whole are grateful to have dedicated members like you to build wonderful plugins.

With love ❤️
The Strapi Team

Hi, after adding the plugin and running Strapi in dev mode, I get the below errors

Any idea how this can be fixed?

Thanks

Hello! Thanks for building this plugin! I was wondering if there was any way of disabling some of the buttons on the toolbar. I want to disable the image and media library button.

The docs say:

Automatically upload Inserted images to Media Library

I have a Strapi project setup with strapi/provider-upload-cloudinary where images uploaded to the media library are automatically saved to Cloudinary CDN when using the default editor.

Will this plugin work with this setup out-of-the-box?

Strapi blog has a guide on adding CKEditor:
https://strapi.io/blog/how-to-change-the-wysiwyg-in-strapi

But it doesn't use this plugin. It adds:
yarn add @ckeditor/ckeditor5-react @ckeditor/ckeditor5-build-classic

Is this plugin an alternative to the above? What is the difference? Which should we use?
The docs here could use an update with more general explanation of what, how and why is this plugin used.

Thanks!

Hi there !

Thank you for your work it's really usefull !

I just have a problem this the resizing option and align with the text : it's not work on my html.
How can I resolve this?

Thank you very much !

I tried to remove strapi default markdown editor and trying to add strapi-plugin-ckeditor5 but strapi crashes and screen go white when i open any entry in content manager which includes rich text editor field.

Here is the error.

Here is my package.json

{
"name": project-name",
"private": true,
"version": "0.1.0",
"description": "A Strapi application",
"scripts": {
"develop": "strapi develop",
"start": "strapi start",
"build": "strapi build",
"strapi": "strapi"
},
"devDependencies": {},
"dependencies": {
"@strapi/plugin-i18n": "4.1.2",
"@strapi/plugin-users-permissions": "4.1.2",
"@strapi/provider-email-sendgrid": "^4.1.2",
"@strapi/strapi": "4.1.2",
"axios": "^0.26.1",
"bcrypt": "^5.0.1",
"lodash": "^4.17.21",
"pg": "^8.7.3",
"pg-connection-string": "^2.5.0",
"sqlite3": "5.0.2",
"strapi-plugin-ckeditor5": "^2.1.1-rc.1",
"strapi-utils": "^3.6.8",
"underscore": "^1.13.2"
},
"author": {
"name": "A Strapi developer"
},
"strapi": {
"uuid": "my-project's uuid"
},
"engines": {
"node": ">=12.x.x <=16.x.x",
"npm": ">=6.0.0"
},
"license": "MIT"
}

This is what i have done so far.

1. Delete node_modules
2. Delete .cache
3. Delete build
4. Delete package-lock.json or yarn.lock
5. Reinstall node modules
6. Rebuild admin

Hello,

I would like to use the highlight tool in the editor, but have not yet managed to add that myself. I know how to work with the config/ckeditor.js file, but not how to add the @ckeditor/ckeditor5-highlight as a dependancy.

Could you give me some guidance on how to implement this so I can make a PR for you to implement in the next release?

The documentation: https://ckeditor.com/docs/ckeditor5/latest/features/highlight.html

Kind regards,
Irian

Hello i use yarn , i install the packgage i make yarn build --clean then yard develop i try with rich text but still the markdwon strapi editor , i mith something i have just to install rigth ??

Hi, currently this plugin doesn't allow to use a lot of HTML tags, or at least I've not found any documentation.
I'm talking about:

• mark
• cite
• dfn
• abbr
• dd / dl / dt
• del
• ins
• kbd
• samp

Would be possible to add them? I use mark / cite / dfn and abbr, but other people could find useful the other common tags.

Thanks for your attention.

I'm using Strapi v4, changing font size does not affect the font size in editor preview even though the change is correctly saved

Hi
I've upgraded Strapi to ver 4.0.3 but strapi-plugin-ckeditor didn't work.

I have these warning :

warning "strapi-plugin-ckeditor5 > @strapi/[email protected]" has unmet peer dependency "@strapi/icons@^0.0.1-alpha.4".
warning "strapi-plugin-ckeditor5 > @strapi/[email protected]" has unmet peer dependency "react-router-dom@^5.2.0".
warning "strapi-plugin-ckeditor5 > @strapi/[email protected]" has unmet peer dependency "styled-components@^5.2.1".
warning "strapi-plugin-ckeditor5 > @strapi/[email protected]" has unmet peer dependency "formik@^2.2.6".
warning "strapi-plugin-ckeditor5 > @strapi/[email protected]" has unmet peer dependency "[email protected]".
warning "strapi-plugin-ckeditor5 > @strapi/[email protected]" has unmet peer dependency "[email protected]".
warning "strapi-plugin-ckeditor5 > @strapi/[email protected]" has unmet peer dependency "react-select@^4.0.2".

and this err in app

TypeError: Cannot read properties of undefined (reading 'components')
    at t.default (main.f3f7ea3d.js:2)
    at c (main.f3f7ea3d.js:2)
    at la (main.f3f7ea3d.js:2)
    at $s (main.f3f7ea3d.js:2)
    at jl (main.f3f7ea3d.js:2)
    at Cl (main.f3f7ea3d.js:2)
    at Ml (main.f3f7ea3d.js:2)
    at wl (main.f3f7ea3d.js:2)
    at main.f3f7ea3d.js:2
    at t.unstable_runWithPriority (main.f3f7ea3d.js:2)

I've downgraded to 4.0.2 but it doesn't work anymore

I'll start with thanks for this awesome plugin. It saved me so many hours.

In my project, I came across a need to add a tooltip feature for content, so that in the frontend, the user can hover over the text and a definition is displayed.

I believe it'll be a useful feature for lots of use cases. For now what I'm thinking of adding a simple feature like how adding links work in CKEditor. Instead of a tag, we can use some other tag and a different attribute for saving the tooltip description which we can utilize in the frontend.

I'll move ahead with this method in my local build but if there's a better option, I hope we can implement it in this plugin.

Hello. Thank you for the useful plugin.

I having one problem.
Trying to use regular expressions in htmlSupport but it is not working.
I'm trying to use Strapi as a CMS for my site.
The site uses an existing CSS framework and I want to write the classes provided by the CSS framework within CKEditor.

So far I have tried the following specifications, but none of them work: the class specification is removed.
How can I help...

• Strapi Ver.4.1.12
• Strapi Plugin CKEditor 5 Ver.1.1.0
• Work in Docker (use setup guide: https://blog.dehlin.dev/docker-with-strapi-v4 ) * use mariadb

Flow at build

1. Edit plugin.js
2. rm -rdf .cache ( in container )
3. rm -rdf build ( in container )
4. yarn cache clear --all ( in container )
5. yarn build ( in container )
6. docker-compose down
7. docker-compose up -d

Try. 1

// config/plugins.js
module.exports = () => {
    return {
        ckeditor: {
            enabled: true,
            plugin: {
                generalHtmlSupport: true,
            },
            config: {
                editor: {
                    htmlSupport: {
                        allow: [{
                            name: /.*/,
                            classes: true,
                        }]
                    }
                }
            }
        }
    }
}

Try. 2

// config/plugins.js
module.exports = () => {
    return {
        ckeditor: {
            enabled: true,
            plugin: {
                generalHtmlSupport: true,
            },
            config: {
                editor: {
                    htmlSupport: {
                        allow: [{
                            name: '/.*/',
                            classes: true,
                        }]
                    }
                }
            }
        }
    }
}

Try. 3

// config/plugins.js
module.exports = () => {
    return {
        ckeditor: {
            enabled: true,
            plugin: {
                generalHtmlSupport: true,
            },
            config: {
                editor: {
                    htmlSupport: {
                        allow: [{
                            name: "/.*/",
                            classes: true,
                        }]
                    }
                }
            }
        }
    }
}

Hi, Is it compatible with strapi 4 beta? I tried the install instructions and it did not replace the existing editor. No errors were encountered during the install either. Please suggest thanks.

First of all, thanks a lot for taking the time to develop this plugin. Overall it works fine, however, uploading images right in the ckeditor, returns a non working image:

However, it gets correctly saved to the media library. Calling it directly via the url in the dom also works. I can also see and open the image directly in strapifolder/public/upload/.jpg

Embedded in the rte, it throws a 404:

This is on Strapi 3.4.6 running on mongodb and your latest plugin version 1.4.0.
Im unsure how to debug this. Strapi logs no error, Browser only says 404.

Just referencing / reusing an image straight from the media library works fine.

Any ideas?

Hello!

Thanks a lot for this plugin!

Can you please tell me is it any way to set up editor to save width and height for images? I need to get width and height attribs for frontend.

Thanks in advance.