Replaces the default Strapi WYSIWYG editor with a customized build of TinyMCE editor.
\r\n\r\n## 👋 Intro\r\n\r\n* [Features](#features)\r\n* [Installation](#installation)\r\n* [Configuration](#configuration)\r\n* [Requirements](#requirements)\r\n\r\n## ✨ Key features\r\n\r\n* **Anchor:** Add an anchor/bookmark button to the toolbar that inserts an anchor at the editor’s cursor insertion point.\r\n* **Autolink:** Create hyperlinks automatically when a user inputs a valid and complete URL.\r\n* **Autoresize:** Resize the editor automatically to the content inside it, and prevent the editor from expanding infinitely.\r\n* **Code:** Add a toolbar button that allows a user to edit the HTML code hidden by the WYSIWYG view.\r\n* **Code sample:** Insert and embed syntax color highlighted code snippets into the editable area.\r\n\r\n\r\nAnd much more ! [List of all features](https://www.tiny.cloud/tinymce/features/).\r\n\r\n## 🔧 Installation\r\n\r\nInside your Strapi app, add the package:\r\n\r\nWith `npm`:\r\n```bash\r\nnpm install @sklinet/strapi-plugin-tinymce\r\n```\r\nWith `yarn`:\r\n```bash\r\nyarn add @sklinet/strapi-plugin-tinymce\r\n```\r\n\r\nIn `config/plugins.js` file add:\r\n```js\r\ntinymce:{\r\n enabled:true\r\n};\r\n```\r\n\r\nIf you do not yet have this file, then create and add:\r\n```js\r\nmodule.exports = () => ({\r\n tinymce:{\r\n enabled:true\r\n };\r\n})\r\n```\r\n\r\nYou will also have to update strapi::security middleware in your middlewares.js file in config folder.\r\nIf you didn't update this file yet, then replace \"strapi::security\" with following code (object)\r\n```js\r\n//middlewares.js\r\n\r\n {\r\n name: \"strapi::security\",\r\n config: {\r\n contentSecurityPolicy: {\r\n useDefaults: true, \r\n directives: {\r\n \"script-src\": [\"'self'\", \"*.tinymce.com\", \"*.tiny.cloud\", \"https:\"],\r\n \"connect-src\": [\"'self'\", \"*.tinymce.com\", \"*.tiny.cloud\", \"blob:\"],\r\n \"img-src\": [\r\n \"'self'\",\r\n \"*.tinymce.com\",\r\n \"*.tiny.cloud\",\r\n \"data:\",\r\n \"blob:\",\r\n \"cdn.jsdelivr.net\",\r\n \"strapi.io\",\r\n \"s3.amazonaws.com\",\r\n ],\r\n \"style-src\": [\r\n \"'self'\",\r\n \"'unsafe-inline'\",\r\n \"*.tinymce.com\",\r\n \"*.tiny.cloud\",\r\n ],\r\n \"font-src\": [\"'self'\", \"*.tinymce.com\", \"*.tiny.cloud\"],\r\n },\r\n upgradeInsecureRequests: null,\r\n },\r\n },\r\n },\r\n```\r\n\r\nThen run build:\r\n```bash\r\nnpm run build\r\n```\r\n\r\nor\r\n```bash\r\nyarn build\r\n```\r\n\r\n**After starting your project please add API key for your TinyMCE editor in admin panel in settings/tinymce/configuration**\r\n\r\nIf TinyMCE editor doesn't appear in your richtext field, please check your console for any hints, you might have incorrectly set your middlewares.\r\n\r\n## ⚙️ Configuration\r\nTinyMCE outputFormat should be defined in `config.editor`, and init object should be defined in `config.editor.editorConfig` field in `plugins.js` file.\r\n\r\n**⚠️ `plugins.js` not `plugin.js` ⚠️**\r\n\r\n**`plugins.js` file should be placed in `config` folder.**\r\n\r\n\r\nLearn more about configuration from [official documentation](https://www.tiny.cloud/docs/tinymce/6/).\r\n\r\n**Default configuration:**\r\n```js\r\n// plugins.js\r\nmodule.exports = ({ env }) => ({\r\n tinymce: {\r\n enabled: true,\r\n config: {\r\n editor: {\r\n outputFormat: \"html\",\r\n editorConfig: {\r\n language: \"sk\",\r\n height: 500,\r\n menubar: false,\r\n extended_valid_elements: \"span, img, small\",\r\n forced_root_block: \"\",\r\n convert_urls: false,\r\n entity_encoding: \"raw\",\r\n plugins:\r\n \"advlist autolink lists link image charmap preview anchor \\\r\n searchreplace visualblocks code fullscreen table emoticons nonbreaking \\\r\n insertdatetime media table code help wordcount\",\r\n toolbar:\r\n \"undo redo | styles | bold italic forecolor backcolor | \\\r\n alignleft aligncenter alignright alignjustify | \\\r\n table emoticons visualblocks code|\\\r\n nonbreaking bullist numlist outdent indent | removeformat | help\",\r\n style_formats: [\r\n {\r\n title: \"Headings\",\r\n items: [\r\n { title: \"h1\", block: \"h1\" },\r\n { title: \"h2\", block: \"h2\" },\r\n { title: \"h3\", block: \"h3\" },\r\n { title: \"h4\", block: \"h4\" },\r\n { title: \"h5\", block: \"h5\" },\r\n { title: \"h6\", block: \"h6\" },\r\n ],\r\n },\r\n\r\n {\r\n title: \"Text\",\r\n items: [\r\n { title: \"Paragraph\", block: \"p\" },\r\n {\r\n title: \"Paragraph with small letters\",\r\n block: \"small\",\r\n },\r\n ],\r\n },\r\n ],\r\n },\r\n },\r\n },\r\n },\r\n});\r\n\r\n```\r\n\r\n## ⚠️ Requirements\r\nStrapi **v4.x.x+**\r\n\r\nNode **14 - 16**\r\n\r\nTested on **v4.3.4**\r\n","readmeFilename":"README.md"}