WIP How to replace strapi's v4 default WYSIWYG Editor

Update 12 Jan 2022: There is an existing integration for CKEditor5 that is working with Strapi v4. https://github.com/Roslovets-Inc/strapi-plugin-ckeditor5/ Since CK is my prefered wysiwyg editor anyway, I’m halting trying to get TinyMCE to work for now. Below the current status.

The headless CMS Strapi recently released version 4 with a rewritten plugin system which obsoletes current tutorials on how to replace the default markdown based editor with a different one.

Follow this GitHub issue for when the official tutorial will be updated
[Change default wysiwyg editor tutorial not working with v4] #581

If you are on an older version of Strapi you can follow this official tutorial:
Replace Strapi’s Default WYSIWYG Editor with TinyMCE editor

Below is my current process trying to make tinymce-react work with Strapi v4 based on the code of the default editor.

Current Status:

✅ Editor saves and loads text
✅ Use Strapi media dialog to upload and insert images
❌ Show validation errors
❌ Tiny MCE Editor configuration hardcoded
❌ Cursor resets to start when changes are passed to Strapi. Currenlty only saving onBlur
❌ Images always inserted at beginning because of the prior issue
❌ Create re-usable plugin

Repository on Github: https://github.com/victor-baumann/strapi-v4-tinymce-example

See all the changes required from a freshly generated pluin via npm run generate in this commit
basic working implementation of tinymce

Create the plugin

npm run generate

Select plugin and give it the name wysiwyg

Add the following to .config/plugins.js. In Strapi v4 plugins are no longer automatically loaded

...
  'wysiwyg': {
    enabled: true,
    resolve: './src/plugins/wysiwyg'
  },
...

Run strapi with the --watch-admin flag, otherwise you won’t see changes made

yarn develop --watch-admin

Install tinymce-react package in the plugins folder

cd src/plugins/wysiwyg
npm install --save @tinymce/tinymce-react

Create a Tinymce component to initialize the tinymce-react component

mkdir -p admin/src/components/Tinymce && cd $_
touch index.js && open $_

Add the code from here:
admin/src/components/Tinymce/index.js

Create a Wysiwyg component which will integrate the component in the prio step with the Strapi admin sytem

mkdir -p admin/src/components/Wysiwyg && cd $_
touch index.js && open $_

Add the code from here:
admin/src/components/Wysiwyg/index.js

Now we have the components nececarily to use them in Strapi. The integration with the Strapi media library is currently part of the Wysiwyg component not yet a seperate one like in the tutorials.

To replace the Strapi default field with our new component we need to need to register the field in the file src/plugins/wysiwyg/admin/src/index.js that was generated when the plugin was created in the first step. Add the following line somewhere within register

app.addFields({ type: "wysiwyg", Component: Wysiwyg });

Check this file if unclear:
src/plugins/wysiwyg/admin/src/index.js