@kookaat/strapi-plugin-tinymce 1.0.7 → 1.1.1

package/README.md

@@ -2,6 +2,28 @@
 
 <p align="center">Replaces the default Strapi WYSIWYG editor with a customized build of TinyMCE editor.</p>
 
+## Differences with the original version
+
+The main difference in this forked repository is that, it only works with the self-host mode. The cloud-host mode has
+been completely disabled.
+
+To set the source of the hosted script, you need to set `tinymceScriptSrc` value in `config/plugins.js` of your strapi project
+like below:
+
+```js
+module.exports = () => ({
+    tinymce: {
+        enabled: true,
+        config: {
+            editor: {
+                tinymceScriptSrc: "/path/to/tinymce.min.js",
+            },
+        },
+    },
+});
+
+```
+
 ## 👋 Intro
 
 * [Features](#features)
@@ -11,13 +33,14 @@
 
 ## <a id="features"></a>✨ Key features
 
-* **Anchor:** Add an anchor/bookmark button to the toolbar that inserts an anchor at the editor’s cursor insertion point.
+* **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.
+* **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](https://www.tiny.cloud/tinymce/features/).
 
 ## <a id="installation"></a>🔧 Installation
@@ -25,96 +48,127 @@ And much more ! [List of all features](https://www.tiny.cloud/tinymce/features/)
 Inside your Strapi app, add the package:
 
 With `npm`:
+
 ```bash
-npm install @sklinet/strapi-plugin-tinymce
+npm install @kookaat/strapi-plugin-tinymce
 ```
+
 With `yarn`:
+
 ```bash
-yarn add @sklinet/strapi-plugin-tinymce
+yarn add @kookaat/strapi-plugin-tinymce
 ```
 
 In `config/plugins.js` file add:
+
 ```js
 tinymce:{
     enabled:true
-};
+}
+;
 ```
 
 If you do not yet have this file, then create and add:
+
 ```js
 module.exports = () => ({
-    tinymce:{
-      enabled:true
+    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)
+
 ```js
 //middlewares.js
 
- {
+{
     name: "strapi::security",
-    config: {
-      contentSecurityPolicy: {
-        useDefaults: true,  
-        directives: {
-          "script-src": ["'self'", "*.tinymce.com", "*.tiny.cloud", "https:"],
-          "connect-src": ["'self'", "*.tinymce.com", "*.tiny.cloud", "blob:", "*.strapi.io"],
-          "img-src": [
-            "'self'",
-            "*.tinymce.com",
-            "*.tiny.cloud",
-            "data:",
-            "blob:",
-            "dl.airtable.com",
-            "strapi.io",
-            "s3.amazonaws.com",
-            "cdn.jsdelivr.net",
-          ],
-          "style-src": [
-            "'self'",
-            "'unsafe-inline'",
-            "*.tinymce.com",
-            "*.tiny.cloud",
-          ],
-          "font-src": ["'self'", "*.tinymce.com", "*.tiny.cloud"],
-        },
-        upgradeInsecureRequests: null,
-      },
-    },
-  },
+        config
+:
+    {
+        contentSecurityPolicy: {
+            useDefaults: true,
+                directives
+        :
+            {
+                "script-src"
+            :
+                ["'self'", "*.tinymce.com", "*.tiny.cloud", "https:"],
+                    "connect-src"
+            :
+                ["'self'", "*.tinymce.com", "*.tiny.cloud", "blob:", "*.strapi.io"],
+                    "img-src"
+            :
+                [
+                    "'self'",
+                    "*.tinymce.com",
+                    "*.tiny.cloud",
+                    "data:",
+                    "blob:",
+                    "dl.airtable.com",
+                    "strapi.io",
+                    "s3.amazonaws.com",
+                    "cdn.jsdelivr.net",
+                ],
+                    "style-src"
+            :
+                [
+                    "'self'",
+                    "'unsafe-inline'",
+                    "*.tinymce.com",
+                    "*.tiny.cloud",
+                ],
+                    "font-src"
+            :
+                ["'self'", "*.tinymce.com", "*.tiny.cloud"],
+            }
+        ,
+            upgradeInsecureRequests: null,
+        }
+    ,
+    }
+,
+}
+,
 ```
 
 Then run build:
+
 ```bash
 npm run build
 ```
 
 or
+
 ```bash
 yarn build
 ```
 
-**After starting your project please add API key for your TinyMCE editor in admin panel in settings/tinymce/configuration**
+**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.
+If TinyMCE editor doesn't appear in your richtext field, please check your console for any hints, you might have
+incorrectly set your middlewares.
 
 ## <a id="configuration"></a>⚙️ Configuration
-TinyMCE outputFormat should be defined in `config.editor`, and init object should be defined in `config.editor.editorConfig` field in `plugins.js` file.
+
+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](https://www.tiny.cloud/docs/tinymce/6/).
 
 **Default configuration:**
+
 ```js
 // plugins.js
-module.exports = ({ env }) => ({
+module.exports = ({env}) => ({
     tinymce: {
         enabled: true,
         config: {
@@ -141,19 +195,19 @@ module.exports = ({ env }) => ({
                         {
                             title: "Headings",
                             items: [
-                                { title: "h1", block: "h1" },
-                                { title: "h2", block: "h2" },
-                                { title: "h3", block: "h3" },
-                                { title: "h4", block: "h4" },
-                                { title: "h5", block: "h5" },
-                                { title: "h6", block: "h6" },
+                                {title: "h1", block: "h1"},
+                                {title: "h2", block: "h2"},
+                                {title: "h3", block: "h3"},
+                                {title: "h4", block: "h4"},
+                                {title: "h5", block: "h5"},
+                                {title: "h6", block: "h6"},
                             ],
                         },
 
                         {
                             title: "Text",
                             items: [
-                                { title: "Paragraph", block: "p" },
+                                {title: "Paragraph", block: "p"},
                                 {
                                     title: "Paragraph with small letters",
                                     block: "small",
@@ -170,8 +224,9 @@ module.exports = ({ env }) => ({
 ```
 
 ## <a id="requirements"></a>⚠️ Requirements
+
 Strapi **v4.x.x+**
 
-Node **14 - 16**
+Node **14 - 20**
 
 Tested on **v4.3.4**

package/admin/src/components/Editor/index.js

@@ -3,22 +3,22 @@ import PropTypes from "prop-types";
 import { Editor } from "@tinymce/tinymce-react";
 import { request } from "@strapi/helper-plugin";
 import pluginId from "../../pluginId";
-import taskRequests from "../../api/settings";
+// import taskRequests from "../../api/settings";
 import { prefixFileUrlWithBackendUrl } from "@strapi/helper-plugin";
 
 const TinyEditor = ({ onChange, name, value }) => {
     const [pluginConfig, setPluginConfig] = useState();
-    const [apiKey, setApiKey] = useState("");
+    // const [apiKey, setApiKey] = useState("");
     const [loading, setLoading] = useState(true);
     const uploadUrl = `${prefixFileUrlWithBackendUrl("/api/upload")}`;
 
     useEffect(() => {
-        const getApiKey = async () => {
-            const data = await taskRequests.getSettings();
-            if (data) {
-                return setApiKey(data.data.apiKey);
-            }
-        };
+        // const getApiKey = async () => {
+        //     const data = await taskRequests.getSettings();
+        //     if (data) {
+        //         return setApiKey(data.data.apiKey);
+        //     }
+        // };
         const getPluginConfig = async () => {
             const editor = await request(`/${pluginId}/config/editor`, {
                 method: "GET",
@@ -27,16 +27,17 @@ const TinyEditor = ({ onChange, name, value }) => {
                 setPluginConfig(editor);
             }
         };
-        getApiKey().then(() => {
-            setLoading(false)
-        });
+        // getApiKey().then(() => {
+        //     setLoading(false)
+        // });
         getPluginConfig();
     }, []);
 
     return (
         !loading && pluginConfig ?
             <Editor
-                apiKey={apiKey || ""}
+                tinymceScriptSrc={pluginConfig?.tinymceScriptSrc}
+                // apiKey={apiKey || ""}
                 value={value}
                 tagName={name}
                 onEditorChange={(editorContent) => {

package/admin/src/pluginId.js

@@ -1,5 +1,5 @@
 const pluginPkg = require("../../package.json");
 
-const pluginId = pluginPkg.name.replace(/^(@sklinet\/strapi-)plugin-/i, "");
+const pluginId = pluginPkg.name.replace(/^(@kookaat\/strapi-)plugin-/i, "");
 
 module.exports = pluginId;

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@kookaat/strapi-plugin-tinymce",
-  "version": "1.0.7",
+  "version": "1.1.1",
   "description": "Replaces the default Strapi WYSIWYG editor with a customized build of TinyMCE editor.",
   "private": false,
   "keywords": [
     "strapi",
-    "tiinymce",
+    "tinymce",
     "tinymce 6",
     "wysiwyg",
     "rich text",