@kookaat/strapi-plugin-tinymce 1.0.7 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +106 -51
- package/admin/src/components/Editor/index.js +13 -12
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -2,6 +2,28 @@
|
|
|
2
2
|
|
|
3
3
|
<p align="center">Replaces the default Strapi WYSIWYG editor with a customized build of TinyMCE editor.</p>
|
|
4
4
|
|
|
5
|
+
## Differences with the original version
|
|
6
|
+
|
|
7
|
+
The main difference in this forked repository is that, it only works with the self-host mode. The cloud-host mode has
|
|
8
|
+
been completely disabled.
|
|
9
|
+
|
|
10
|
+
To set the source of the hosted script, you need to set `tinymceScriptSrc` value in `config/plugins.js` of your strapi project
|
|
11
|
+
like below:
|
|
12
|
+
|
|
13
|
+
```js
|
|
14
|
+
module.exports = () => ({
|
|
15
|
+
tinymce: {
|
|
16
|
+
enabled: true,
|
|
17
|
+
config: {
|
|
18
|
+
editor: {
|
|
19
|
+
tinymceScriptSrc: "/path/to/tinymce.min.js",
|
|
20
|
+
},
|
|
21
|
+
},
|
|
22
|
+
},
|
|
23
|
+
});
|
|
24
|
+
|
|
25
|
+
```
|
|
26
|
+
|
|
5
27
|
## 👋 Intro
|
|
6
28
|
|
|
7
29
|
* [Features](#features)
|
|
@@ -11,13 +33,14 @@
|
|
|
11
33
|
|
|
12
34
|
## <a id="features"></a>✨ Key features
|
|
13
35
|
|
|
14
|
-
* **Anchor:** Add an anchor/bookmark button to the toolbar that inserts an anchor at the editor’s cursor insertion
|
|
36
|
+
* **Anchor:** Add an anchor/bookmark button to the toolbar that inserts an anchor at the editor’s cursor insertion
|
|
37
|
+
point.
|
|
15
38
|
* **Autolink:** Create hyperlinks automatically when a user inputs a valid and complete URL.
|
|
16
|
-
* **Autoresize:** Resize the editor automatically to the content inside it, and prevent the editor from expanding
|
|
39
|
+
* **Autoresize:** Resize the editor automatically to the content inside it, and prevent the editor from expanding
|
|
40
|
+
infinitely.
|
|
17
41
|
* **Code:** Add a toolbar button that allows a user to edit the HTML code hidden by the WYSIWYG view.
|
|
18
42
|
* **Code sample:** Insert and embed syntax color highlighted code snippets into the editable area.
|
|
19
43
|
|
|
20
|
-
|
|
21
44
|
And much more ! [List of all features](https://www.tiny.cloud/tinymce/features/).
|
|
22
45
|
|
|
23
46
|
## <a id="installation"></a>🔧 Installation
|
|
@@ -25,96 +48,127 @@ And much more ! [List of all features](https://www.tiny.cloud/tinymce/features/)
|
|
|
25
48
|
Inside your Strapi app, add the package:
|
|
26
49
|
|
|
27
50
|
With `npm`:
|
|
51
|
+
|
|
28
52
|
```bash
|
|
29
|
-
npm install @
|
|
53
|
+
npm install @kookaat/strapi-plugin-tinymce
|
|
30
54
|
```
|
|
55
|
+
|
|
31
56
|
With `yarn`:
|
|
57
|
+
|
|
32
58
|
```bash
|
|
33
|
-
yarn add @
|
|
59
|
+
yarn add @kookaat/strapi-plugin-tinymce
|
|
34
60
|
```
|
|
35
61
|
|
|
36
62
|
In `config/plugins.js` file add:
|
|
63
|
+
|
|
37
64
|
```js
|
|
38
65
|
tinymce:{
|
|
39
66
|
enabled:true
|
|
40
|
-
}
|
|
67
|
+
}
|
|
68
|
+
;
|
|
41
69
|
```
|
|
42
70
|
|
|
43
71
|
If you do not yet have this file, then create and add:
|
|
72
|
+
|
|
44
73
|
```js
|
|
45
74
|
module.exports = () => ({
|
|
46
|
-
tinymce:{
|
|
47
|
-
|
|
75
|
+
tinymce: {
|
|
76
|
+
enabled: true
|
|
48
77
|
};
|
|
49
78
|
})
|
|
50
79
|
```
|
|
51
80
|
|
|
52
81
|
You will also have to update strapi::security middleware in your middlewares.js file in config folder.
|
|
53
82
|
If you didn't update this file yet, then replace "strapi::security" with following code (object)
|
|
83
|
+
|
|
54
84
|
```js
|
|
55
85
|
//middlewares.js
|
|
56
86
|
|
|
57
|
-
|
|
87
|
+
{
|
|
58
88
|
name: "strapi::security",
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
89
|
+
config
|
|
90
|
+
:
|
|
91
|
+
{
|
|
92
|
+
contentSecurityPolicy: {
|
|
93
|
+
useDefaults: true,
|
|
94
|
+
directives
|
|
95
|
+
:
|
|
96
|
+
{
|
|
97
|
+
"script-src"
|
|
98
|
+
:
|
|
99
|
+
["'self'", "*.tinymce.com", "*.tiny.cloud", "https:"],
|
|
100
|
+
"connect-src"
|
|
101
|
+
:
|
|
102
|
+
["'self'", "*.tinymce.com", "*.tiny.cloud", "blob:", "*.strapi.io"],
|
|
103
|
+
"img-src"
|
|
104
|
+
:
|
|
105
|
+
[
|
|
106
|
+
"'self'",
|
|
107
|
+
"*.tinymce.com",
|
|
108
|
+
"*.tiny.cloud",
|
|
109
|
+
"data:",
|
|
110
|
+
"blob:",
|
|
111
|
+
"dl.airtable.com",
|
|
112
|
+
"strapi.io",
|
|
113
|
+
"s3.amazonaws.com",
|
|
114
|
+
"cdn.jsdelivr.net",
|
|
115
|
+
],
|
|
116
|
+
"style-src"
|
|
117
|
+
:
|
|
118
|
+
[
|
|
119
|
+
"'self'",
|
|
120
|
+
"'unsafe-inline'",
|
|
121
|
+
"*.tinymce.com",
|
|
122
|
+
"*.tiny.cloud",
|
|
123
|
+
],
|
|
124
|
+
"font-src"
|
|
125
|
+
:
|
|
126
|
+
["'self'", "*.tinymce.com", "*.tiny.cloud"],
|
|
127
|
+
}
|
|
128
|
+
,
|
|
129
|
+
upgradeInsecureRequests: null,
|
|
130
|
+
}
|
|
131
|
+
,
|
|
132
|
+
}
|
|
133
|
+
,
|
|
134
|
+
}
|
|
135
|
+
,
|
|
88
136
|
```
|
|
89
137
|
|
|
90
138
|
Then run build:
|
|
139
|
+
|
|
91
140
|
```bash
|
|
92
141
|
npm run build
|
|
93
142
|
```
|
|
94
143
|
|
|
95
144
|
or
|
|
145
|
+
|
|
96
146
|
```bash
|
|
97
147
|
yarn build
|
|
98
148
|
```
|
|
99
149
|
|
|
100
|
-
**After starting your project please add API key for your TinyMCE editor in admin panel in
|
|
150
|
+
**After starting your project please add API key for your TinyMCE editor in admin panel in
|
|
151
|
+
settings/tinymce/configuration**
|
|
101
152
|
|
|
102
|
-
If TinyMCE editor doesn't appear in your richtext field, please check your console for any hints, you might have
|
|
153
|
+
If TinyMCE editor doesn't appear in your richtext field, please check your console for any hints, you might have
|
|
154
|
+
incorrectly set your middlewares.
|
|
103
155
|
|
|
104
156
|
## <a id="configuration"></a>⚙️ Configuration
|
|
105
|
-
|
|
157
|
+
|
|
158
|
+
TinyMCE outputFormat should be defined in `config.editor`, and init object should be defined
|
|
159
|
+
in `config.editor.editorConfig` field in `plugins.js` file.
|
|
106
160
|
|
|
107
161
|
**⚠️ `plugins.js` not `plugin.js` ⚠️**
|
|
108
162
|
|
|
109
163
|
**`plugins.js` file should be placed in `config` folder.**
|
|
110
164
|
|
|
111
|
-
|
|
112
165
|
Learn more about configuration from [official documentation](https://www.tiny.cloud/docs/tinymce/6/).
|
|
113
166
|
|
|
114
167
|
**Default configuration:**
|
|
168
|
+
|
|
115
169
|
```js
|
|
116
170
|
// plugins.js
|
|
117
|
-
module.exports = ({
|
|
171
|
+
module.exports = ({env}) => ({
|
|
118
172
|
tinymce: {
|
|
119
173
|
enabled: true,
|
|
120
174
|
config: {
|
|
@@ -141,19 +195,19 @@ module.exports = ({ env }) => ({
|
|
|
141
195
|
{
|
|
142
196
|
title: "Headings",
|
|
143
197
|
items: [
|
|
144
|
-
{
|
|
145
|
-
{
|
|
146
|
-
{
|
|
147
|
-
{
|
|
148
|
-
{
|
|
149
|
-
{
|
|
198
|
+
{title: "h1", block: "h1"},
|
|
199
|
+
{title: "h2", block: "h2"},
|
|
200
|
+
{title: "h3", block: "h3"},
|
|
201
|
+
{title: "h4", block: "h4"},
|
|
202
|
+
{title: "h5", block: "h5"},
|
|
203
|
+
{title: "h6", block: "h6"},
|
|
150
204
|
],
|
|
151
205
|
},
|
|
152
206
|
|
|
153
207
|
{
|
|
154
208
|
title: "Text",
|
|
155
209
|
items: [
|
|
156
|
-
{
|
|
210
|
+
{title: "Paragraph", block: "p"},
|
|
157
211
|
{
|
|
158
212
|
title: "Paragraph with small letters",
|
|
159
213
|
block: "small",
|
|
@@ -170,8 +224,9 @@ module.exports = ({ env }) => ({
|
|
|
170
224
|
```
|
|
171
225
|
|
|
172
226
|
## <a id="requirements"></a>⚠️ Requirements
|
|
227
|
+
|
|
173
228
|
Strapi **v4.x.x+**
|
|
174
229
|
|
|
175
|
-
Node **14 -
|
|
230
|
+
Node **14 - 20**
|
|
176
231
|
|
|
177
232
|
Tested on **v4.3.4**
|
|
@@ -3,22 +3,22 @@ import PropTypes from "prop-types";
|
|
|
3
3
|
import { Editor } from "@tinymce/tinymce-react";
|
|
4
4
|
import { request } from "@strapi/helper-plugin";
|
|
5
5
|
import pluginId from "../../pluginId";
|
|
6
|
-
import taskRequests from "../../api/settings";
|
|
6
|
+
// import taskRequests from "../../api/settings";
|
|
7
7
|
import { prefixFileUrlWithBackendUrl } from "@strapi/helper-plugin";
|
|
8
8
|
|
|
9
9
|
const TinyEditor = ({ onChange, name, value }) => {
|
|
10
10
|
const [pluginConfig, setPluginConfig] = useState();
|
|
11
|
-
const [apiKey, setApiKey] = useState("");
|
|
11
|
+
// const [apiKey, setApiKey] = useState("");
|
|
12
12
|
const [loading, setLoading] = useState(true);
|
|
13
13
|
const uploadUrl = `${prefixFileUrlWithBackendUrl("/api/upload")}`;
|
|
14
14
|
|
|
15
15
|
useEffect(() => {
|
|
16
|
-
const getApiKey = async () => {
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
};
|
|
16
|
+
// const getApiKey = async () => {
|
|
17
|
+
// const data = await taskRequests.getSettings();
|
|
18
|
+
// if (data) {
|
|
19
|
+
// return setApiKey(data.data.apiKey);
|
|
20
|
+
// }
|
|
21
|
+
// };
|
|
22
22
|
const getPluginConfig = async () => {
|
|
23
23
|
const editor = await request(`/${pluginId}/config/editor`, {
|
|
24
24
|
method: "GET",
|
|
@@ -27,16 +27,17 @@ const TinyEditor = ({ onChange, name, value }) => {
|
|
|
27
27
|
setPluginConfig(editor);
|
|
28
28
|
}
|
|
29
29
|
};
|
|
30
|
-
getApiKey().then(() => {
|
|
31
|
-
|
|
32
|
-
});
|
|
30
|
+
// getApiKey().then(() => {
|
|
31
|
+
// setLoading(false)
|
|
32
|
+
// });
|
|
33
33
|
getPluginConfig();
|
|
34
34
|
}, []);
|
|
35
35
|
|
|
36
36
|
return (
|
|
37
37
|
!loading && pluginConfig ?
|
|
38
38
|
<Editor
|
|
39
|
-
|
|
39
|
+
tinymceScriptSrc={pluginConfig?.tinymceScriptSrc}
|
|
40
|
+
// apiKey={apiKey || ""}
|
|
40
41
|
value={value}
|
|
41
42
|
tagName={name}
|
|
42
43
|
onEditorChange={(editorContent) => {
|
package/package.json
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kookaat/strapi-plugin-tinymce",
|
|
3
|
-
"version": "1.0
|
|
3
|
+
"version": "1.1.0",
|
|
4
4
|
"description": "Replaces the default Strapi WYSIWYG editor with a customized build of TinyMCE editor.",
|
|
5
5
|
"private": false,
|
|
6
6
|
"keywords": [
|
|
7
7
|
"strapi",
|
|
8
|
-
"
|
|
8
|
+
"tinymce",
|
|
9
9
|
"tinymce 6",
|
|
10
10
|
"wysiwyg",
|
|
11
11
|
"rich text",
|