Strapi plugin TinyMCE

Replaces the default Strapi WYSIWYG editor with a customized build of TinyMCE editor.

👋 Intro

• Features
• Installation
• Configuration
• Requirements

✨ Key features

• Anchor: Add an anchor/bookmark button to the toolbar that inserts an anchor at the editor’s cursor insertion point.
• Autolink: Create hyperlinks automatically when a user inputs a valid and complete URL.
• Autoresize: Resize the editor automatically to the content inside it, and prevent the editor from expanding infinitely.
• Code: Add a toolbar button that allows a user to edit the HTML code hidden by the WYSIWYG view.
• Code sample: Insert and embed syntax color highlighted code snippets into the editable area.

And much more ! List of all features.

🔧 Installation

Inside your Strapi app, add the package:

With npm:

npm install @sklinet/strapi-plugin-tinymce

With yarn:

yarn add @sklinet/strapi-plugin-tinymce

In config/plugins.js file add:

1tinymce:{
2    enabled:true
3};

If you do not yet have this file, then create and add:

1module.exports = () => ({
2    tinymce:{
3      enabled:true
4    };
5})

You will also have to update strapi::security middleware in your middlewares.js file in config folder. If you didn't update this file yet, then replace "strapi::security" with following code (object)

1//middlewares.js
2
3 {
4    name: "strapi::security",
5    config: {
6      contentSecurityPolicy: {
7        useDefaults: true,  
8        directives: {
9          "script-src": ["'self'", "*.tinymce.com", "*.tiny.cloud", "https:"],
10          "connect-src": ["'self'", "*.tinymce.com", "*.tiny.cloud", "blob:", "*.strapi.io"],
11          "img-src": [
12            "'self'",
13            "*.tinymce.com",
14            "*.tiny.cloud",
15            "data:",
16            "blob:",
17            "dl.airtable.com",
18            "strapi.io",
19            "s3.amazonaws.com",
20            "cdn.jsdelivr.net",
21          ],
22          "style-src": [
23            "'self'",
24            "'unsafe-inline'",
25            "*.tinymce.com",
26            "*.tiny.cloud",
27          ],
28          "font-src": ["'self'", "*.tinymce.com", "*.tiny.cloud"],
29        },
30        upgradeInsecureRequests: null,
31      },
32    },
33  },

Then run build:

npm run build

or

yarn build

After starting your project please add API key for your TinyMCE editor in admin panel in settings/tinymce/configuration

If TinyMCE editor doesn't appear in your richtext field, please check your console for any hints, you might have incorrectly set your middlewares.

⚙️ Configuration

TinyMCE outputFormat should be defined in config.editor, and init object should be defined in config.editor.editorConfig field in plugins.js file.

⚠️ plugins.js not plugin.js ⚠️

plugins.js file should be placed in config folder.

Learn more about configuration from official documentation.

Default configuration:

1// plugins.js
2module.exports = ({ env }) => ({
3    tinymce: {
4        enabled: true,
5        config: {
6            editor: {
7                outputFormat: "html",
8                tinymceSrc: "/tinymce/tinymce.min.js", // USE WITH YOUR PUBLIC PATH TO TINYMCE LIBRARY FOR USING SELF HOSTED TINYMCE
9                editorConfig: {
10                    language: "sk",
11                    height: 500,
12                    menubar: false,
13                    extended_valid_elements: "span, img, small",
14                    forced_root_block: "",
15                    convert_urls: false,
16                    entity_encoding: "raw",
17                    plugins:
18                        "advlist autolink lists link image charmap preview anchor \
19                        searchreplace visualblocks code fullscreen table emoticons nonbreaking \
20                        insertdatetime media table code help wordcount",
21                    toolbar:
22                        "undo redo | styles | bold italic forecolor backcolor | \
23                        alignleft aligncenter alignright alignjustify | \
24                        media table emoticons visualblocks code|\
25                        nonbreaking bullist numlist outdent indent | removeformat | help",
26                    style_formats: [
27                        {
28                            title: "Headings",
29                            items: [
30                                { title: "h1", block: "h1" },
31                                { title: "h2", block: "h2" },
32                                { title: "h3", block: "h3" },
33                                { title: "h4", block: "h4" },
34                                { title: "h5", block: "h5" },
35                                { title: "h6", block: "h6" },
36                            ],
37                        },
38
39                        {
40                            title: "Text",
41                            items: [
42                                { title: "Paragraph", block: "p" },
43                                {
44                                    title: "Paragraph with small letters",
45                                    block: "small",
46                                },
47                            ],
48                        },
49                    ],
50                },
51            },
52        },
53    },
54});

⚠️ Requirements

Strapi v5.x.x+

Node >= 20.x.x

Tested on v5.1.1