How to change the default WYSIWYG in Strapi to Quill Editor

1

Our community is looking for talented writers who are passionate about our ecosystem (jamstack, open-source, javascript) and willing to share their knowledge/experiences through our Write for the community program.

This is a companion discussion topic for the original entry at https://strapi.io/blog/how-to-change-the-default-wysiwy-to-quill-editor
1 Like
2

Awesome post, this made setting up Quill a breeze today!

For others looking to extend Quill to feature an HTML edit button, this was super helpful as well:

4

First of all,

yarn strapi generate:plugin

command doesn’t work as expected.

And after the tutorial, nothing changed for my case. I guess there was an update that broke some things.

5

Anyone reading this comment, this post is for Strapi v3. If you want to use a better rich text editor on Strapi v4, my recommendation is:

strapi-plugin-ckeditor5

6

thanks tahaygun, that was a quick solution! +1 from me
I was tearing my hair out with errors due to /n characters when pasting the above code in. Not sure if it’s a mac/windows thing?

7

Hi @everyone!

The path under the topic Create the MediaLib is wrongly used.

./src/plugins/wysiwyg/admin/src/components/MediaLib/index.js INCORRECT
./src/plugins/quill-editor/admin/src/components/MediaLib/index.js CORRECT

8

Hi,
I’m sorry to say that but this tutorial does look a bit messy as explanations are not clear + files and/or paths are not the good ones.
Can you please review it ?

9

There is a significant error in the instructions that prevent the plugin from working. This probably explains why a few of the comments are pointing out that nothing happened for them when restarting Strapi.

The step that says:

Replace the content of your ".src\plugins\wysiwyg\admin\src\components\QuillEditor\index.js" with the following code:

Should instead say:

Replace the content of your ".src\plugins\wysiwyg\admin\src\index.js" with the following code:

Once I made that change, it worked as expected.

4 Likes
10

I had the same issue as @Jeff_Poulton, although it is not working as expected yet.

If I immediately click the ‘MediaLib’ button after the page loads, I get a white screen.

In order to get the MediaLibDialog component to work I have to first select the editor and type ‘something’. It doesn’t matter what I type, I can add a whitespace and then remove it again, as long as in the information component to the right the text with the label ‘created’ changes from ‘now’ to a time string.

After that it works as expected.

The information component also updates when I edit another field on the same collection type, but this does not fix the dialog.

I suspect something about the Quill editor initializes at the first interaction that the media-library component needs. But I don’t now what or how to find that out.

12

You might also want to set a background for a wrapper div since it won’t work for dark mode :slight_smile:

    <div style={{ background: 'white' }}>
      <ReactQuill
        theme="snow"
        value={value}

I think strapi core package should export theme context so that we can access theme from extensions.

2 Likes
13

watch out, this could possibly break your strapi on production deployment.

14

Is this a good solution for a React Native Expo project, and does it integrate with Cloudinary CDN images plugin?

16

btw its ‘yarn strapi generate’ , not ‘yarn strapitime generate’ ! :wink:

17

Thanks for the heads-up, it’s been updated cc @Mcastres

18

Thank you so much for this. Applying this correction worked for me.