How to Replace Strapi's Default WYSIWYG Editor with TinyMCE Editor

1

In this guide, you will learn how to replace the default WYSIWYG editor (Draftjs) in Strapi with the TinyMCE editor.

This is a companion discussion topic for the original entry at https://strapi.io/blog/replace-strapi-default-wysiwyg-editor-with-tiny-mce
2

Hi, I’m trying this tutorial but I’m encountering an error when I try to start Strapi after building the admin:

[2021-11-02T14:22:16.995Z] error /Users/francesco/projects/cpo-strapi/components/MediaLib/index.js:1
import React, { useEffect, useState } from "react";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (internal/modules/cjs/loader.js:1001:16)

any idea on how to fix it? thanks in advance
Francesco

3
4

Never mind, I was putting files In the wrong place (outside admin/src)

5

Hi, it’s me again.
I’ve got it working now, excellent job with the tutorial. Still, I’m facing a little problem which I hope someone as a solution for:

When I field is mandatory, if you try to save it no validation message appears in the interface, only a message in the js console. Is this problem solvable? thank you very much

6

Hello everyone!

I’ve replaced the default editor successfully and it worked fine after I edited the extended_valid_elements to fit my needs. The only issue I have is that when I run the server with strapi develop --watch-admin or when I change the admin url of the server in config/env/server.js I get the following error:

Uncaught SyntaxError: Unexpected token '<' Uncaught Error: tinymce should have been loaded into global scope

Any ideas on how to resolve this?

7

This worked really well and is a great upgrade.

However, the ‘insert’ function int he tinyMCE toolbar has no knowledge of the media library. It’s just a plain text input form. Where or how would we go about integraeting this with the media library, so images/files can simply be selected from the library?

8

Can we get updated version for v4? :slight_smile: pretty please

4 Likes
9

Yeah, I need this for V4 as well! :grin:

3 Likes
11

did you implement it ?

12

I have tried to implement it using Strapi v4, but is not working for me using strapi develop or strapi start. I need a hand to find the bug.

https://stackoverflow.com/questions/72588758/replace-the-default-wysiwyg-of-strapi-v4-with-tinymce

13

Your documentation is useless. What about deplyoment? Tinymce is giving major deployment issues that your documentation does not even touch. Like a said before, have competent people writing your docs with every edge case. This is pathetic.