Replaces the default Strapi WYSIWYG editor with a self-hosted build of the TinyMCE editor.
- Self-Hosted (No API Key Needed): Speedy native server loading speeds without API dependence.
- 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.
Inside your Strapi app, add the package:
With npm:
npm install @sharpetronics/strapi-plugin-tinymce-editorWith yarn:
yarn add @sharpetronics/strapi-plugin-tinymce-editorIn config/plugins.js file add:
tinymce:{ enabled:true };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)
//middlewares.js { name: "strapi::security", config: { contentSecurityPolicy: { useDefaults: true, directives: { "script-src": ["'self'", "https:"], "default-src": ["*.youtube.com", "*.vimeo.com", "rumble.com"], "connect-src": ["'self'", "blob:", "*.strapi.io", "*.github.com",], "img-src": [ "'self'", "data:", "blob:", ], "style-src": [ "'self'", "'unsafe-inline'", ], "font-src": ["'self'"], }, upgradeInsecureRequests: null, }, }, },Download tinymce_self-hosted package and extract the /tinymce/js/ into your Strapi /public/.
https://www.tiny.cloud/get-tiny/self-hosted/
You should now have a uploads directory and a tinymce folder.
Notice: the public/tinymce directory path should reflect the following:
/public/tinymce/ -themes -skins ... Then run build:
yarn build && yarn developCurrently, this is work-in-progress (WIP). The default configuration works, but customizing this hasn't been added yet.
Learn more about configuration from official documentation.
The Default Configuration:
// TinyMCE Default src/plugins/strapi-plugin-tinymce-editor/admin/src/components/Tinymce/index.js (WIP) ... <Editor tinymceScriptSrc={'/tinymce/tinymce.min.js'} // the root of the Strapi project from the public directory. value={value} tagName={name} onEditorChange={(editorContent) => { onChange({ target: { name, value: editorContent } }); }} outputFormat="html" init={{ height: 900, selector: 'textarea', skin: 'oxide', content_css: 'default', menubar: false, promotion: false, convert_urls: false, relative_urls : true, remove_script_host : true, toolbar_mode: 'wrap', plugins: [ 'advlist', 'autolink', 'lists', 'link', 'emoticons', 'image', 'charmap', 'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen', 'insertdatetime', 'media', 'table', 'codesample', 'preview', 'help', 'wordcount' ], toolbar: 'fullscreen | preview code | undo redo | blocks | ' + 'bold italic underline blockquote | ' + 'image media link codesample | ' + 'bullist numlist | table', content_style: 'body { font-family:Ubuntu,Arial,sans-serif; font-size:14px }' }} /> ...Strapi v4.x.x+
Node 14 - 18
Tested with Yarn v3.x.x
Tested on Strapi v4.9.2