TinyMCE
Replaces the default Strapi WYSIWYG editor with a customized build of TinyMCE editor.
Strapi plugin TinyMCE
Replaces the default Strapi WYSIWYG editor with a customized build of TinyMCE editor.
👋 Intro
✨ 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
Install now
npm install @sklinet/strapi-plugin-tinymce
Create your own plugin
Check out the available plugin resources that will help you to develop your plugin or provider and get it listed on the marketplace.