@_sh/strapi-plugin-ckeditor 2.1.1 → 2.1.3
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/LICENSE +1 -1
- package/README.md +231 -140
- package/admin/src/components/Input/CKEditor/configs/base.js +9 -7
- package/admin/src/components/Input/CKEditor/index.js +2 -2
- package/admin/src/components/Input/CKEditor/styling.js +10 -2
- package/admin/src/components/Input/CKEditor/theme/dark.js +13 -12
- package/admin/src/components/Input/CKEditor/theme/light.js +9 -5
- package/admin/src/components/Input/MediaLib/index.js +5 -5
- package/package.json +88 -43
package/LICENSE
CHANGED
package/README.md
CHANGED
|
@@ -10,6 +10,7 @@
|
|
|
10
10
|
|
|
11
11
|
* [Features](#features)
|
|
12
12
|
* [Installation](#installation)
|
|
13
|
+
* [Usage](#usage)
|
|
13
14
|
* [Configuration](#configuration)
|
|
14
15
|
* [Contributing](#contributing)
|
|
15
16
|
* [Requirements](#requirements)
|
|
@@ -17,17 +18,25 @@
|
|
|
17
18
|
## <a id="features"></a>✨ Features
|
|
18
19
|
|
|
19
20
|
* **Media library integration**
|
|
20
|
-
* **
|
|
21
|
-
* **
|
|
21
|
+
* **Responsive images support**
|
|
22
|
+
* **Strapi theme switching support**
|
|
23
|
+
* **Supports custom styles for the editor**
|
|
22
24
|
* **Supports i18n and different UI translations**
|
|
23
|
-
* **
|
|
24
|
-
* **
|
|
25
|
+
* **A few predefined, modifiable editor configurations**
|
|
26
|
+
* **Allows custom editor configrations**
|
|
27
|
+
* **Plugins extensibility**
|
|
28
|
+
|
|
29
|
+
<p align="right">
|
|
30
|
+
<a href="https://www.buymeacoffee.com/nshenderov" target="_blank">
|
|
31
|
+
<img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;max-width: 217px !important;" >
|
|
32
|
+
</a>
|
|
33
|
+
</p>
|
|
25
34
|
|
|
26
35
|
|
|
27
36
|
## <a id="installation"></a>🔧 Installation
|
|
28
37
|
___
|
|
29
38
|
|
|
30
|
-
|
|
39
|
+
Add the package to your Strapi application:
|
|
31
40
|
|
|
32
41
|
```bash
|
|
33
42
|
npm install @_sh/strapi-plugin-ckeditor
|
|
@@ -39,7 +48,7 @@ or
|
|
|
39
48
|
yarn add @_sh/strapi-plugin-ckeditor
|
|
40
49
|
```
|
|
41
50
|
|
|
42
|
-
|
|
51
|
+
Then build the app:
|
|
43
52
|
```bash
|
|
44
53
|
npm run build
|
|
45
54
|
```
|
|
@@ -49,85 +58,135 @@ or
|
|
|
49
58
|
yarn build
|
|
50
59
|
```
|
|
51
60
|
|
|
61
|
+
## <a id="usage"></a>✍️ Usage
|
|
62
|
+
|
|
63
|
+
1. Go to the Content-Type Builder -> Add another field -> switch to `custom`
|
|
64
|
+
|
|
65
|
+
<p align="center">
|
|
66
|
+
<img src="https://raw.githubusercontent.com/nshenderov/strapi-plugin-ckeditor/master/assets/usage-guide1.png" width="700" />
|
|
67
|
+
</p>
|
|
68
|
+
|
|
69
|
+
2. Click on CKEditor 5
|
|
70
|
+
|
|
71
|
+
<p align="center">
|
|
72
|
+
<img src="https://raw.githubusercontent.com/nshenderov/strapi-plugin-ckeditor/master/assets/usage-guide2.png" width="700" />
|
|
73
|
+
</p>
|
|
74
|
+
|
|
75
|
+
3. Choose the editor version you want
|
|
76
|
+
|
|
77
|
+
<p align="center">
|
|
78
|
+
<img src="https://raw.githubusercontent.com/nshenderov/strapi-plugin-ckeditor/master/assets/usage-guide3.png" width="700" />
|
|
79
|
+
</p>
|
|
80
|
+
|
|
81
|
+
## Default versions:
|
|
52
82
|
|
|
83
|
+
<details>
|
|
84
|
+
<summary><b>Open</b></summary>
|
|
85
|
+
|
|
86
|
+
<p align="center">
|
|
87
|
+
<img src="https://raw.githubusercontent.com/nshenderov/strapi-plugin-ckeditor/master/assets/toolbar-version.png" width="700" />
|
|
88
|
+
</p>
|
|
89
|
+
|
|
90
|
+
<p align="center">
|
|
91
|
+
<img src="https://raw.githubusercontent.com/nshenderov/strapi-plugin-ckeditor/master/assets/toolbarballon-version.png" width="700" />
|
|
92
|
+
</p>
|
|
93
|
+
|
|
94
|
+
<p align="center">
|
|
95
|
+
<img src="https://raw.githubusercontent.com/nshenderov/strapi-plugin-ckeditor/master/assets/blockballon-version.png" width="700" />
|
|
96
|
+
</p>
|
|
97
|
+
|
|
98
|
+
</details>
|
|
53
99
|
|
|
54
100
|
## <a id="configuration"></a>⚙️ Configuration
|
|
55
101
|
___
|
|
56
|
-
The plugin
|
|
57
|
-
|
|
58
|
-
The plugin configuration should be defined in the `/config/ckeditor.txt` file.
|
|
102
|
+
The plugin is based on the [**Strapi Custom Field API**](https://docs.strapi.io/developer-docs/latest/development/custom-fields.html#registering-a-custom-field-on-the-server) and the [**CKEditor5 DLL build**](https://ckeditor.com/docs/ckeditor5/latest/installation/advanced/alternative-setups/dll-builds.html).
|
|
59
103
|
|
|
60
|
-
It
|
|
104
|
+
It is highly recommended to explore [**the official CKEditor5 documentation**](https://ckeditor.com/docs/ckeditor5/latest/features/index.html).
|
|
61
105
|
|
|
62
|
-
|
|
106
|
+
The plugin configuration should be defined in `your-app/config/ckeditor.txt`.
|
|
63
107
|
|
|
64
|
-
|
|
108
|
+
The plugin provides three editor configurations by default. Each configuration includes a set of plugins, settings, and styles.
|
|
65
109
|
|
|
66
|
-
|
|
110
|
+
You can select the configuration you need in the Content-Type Builder. Each configuration can be modified in the config file, and you can also create new ones.
|
|
67
111
|
|
|
68
|
-
|
|
112
|
+
Config structure looks like this:
|
|
69
113
|
|
|
70
114
|
```js
|
|
71
115
|
globalThis.CKEditorConfig = {
|
|
116
|
+
configsOverwrite:bool,
|
|
117
|
+
themeOverwrite:bool,
|
|
118
|
+
configs:{
|
|
119
|
+
toolbar:{...},
|
|
120
|
+
toolbarBalloon:{...},
|
|
121
|
+
blockBalloon:{...},
|
|
122
|
+
customEditorVersion1:{...},
|
|
123
|
+
customEditorVersion2:{...}
|
|
124
|
+
...
|
|
125
|
+
}
|
|
126
|
+
theme:{...}
|
|
127
|
+
}
|
|
128
|
+
```
|
|
72
129
|
|
|
73
|
-
|
|
74
|
-
defined in this file are going to be spread into
|
|
75
|
-
default configs and theme these two properties below
|
|
76
|
-
allow you to redefine default objects completely: */
|
|
130
|
+
Every configuration in the `configs` object contains three properties:
|
|
77
131
|
|
|
78
|
-
|
|
79
|
-
|
|
132
|
+
1. `field (object)` Registers this configuration version in the Admin panel.
|
|
133
|
+
2. `styles (string)` Styles applied to the editor in this version.
|
|
134
|
+
3. `editorConfig (object)` The CKEditor configuration.
|
|
80
135
|
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
Each config includes:
|
|
84
|
-
"styles", "field" and "editorConfig" properties.
|
|
85
|
-
Property "field" is required. */
|
|
136
|
+
The `theme` object is used to modify the default global theme of the plugin.
|
|
137
|
+
It contains four properties:
|
|
86
138
|
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
// editorConfig:{}
|
|
92
|
-
},
|
|
93
|
-
custom:{
|
|
94
|
-
|
|
95
|
-
/* Styles for this specific editor version.
|
|
96
|
-
This will be passed into the editor's parent container. */
|
|
139
|
+
1. `common (string)` Styles applied to the editor to ensure proper appearance of the input.
|
|
140
|
+
2. `light (string)` Styles applied to the editor when Strapi is in light mode.
|
|
141
|
+
3. `dark (string)` Styles applied to the editor when Strapi is in dark mode.
|
|
142
|
+
4. `additional (string)` Additional styles to further enhance the editors appearance.
|
|
97
143
|
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
144
|
+
By default, everything defined in the user’s configuration is merged with the
|
|
145
|
+
default configuration object. These two properties allow you to prevent
|
|
146
|
+
this behavior:
|
|
147
|
+
|
|
148
|
+
1. `configsOverwrite (bool)`
|
|
149
|
+
2. `themeOverwrite (bool)`
|
|
150
|
+
|
|
151
|
+
Since Strapi uses i18n for translation, the `ignorei18n` property is added to the
|
|
152
|
+
`editorConfig.language` object. This property allows you to manually set the
|
|
153
|
+
content language, bypassing i18n. The language object looks like this:
|
|
154
|
+
|
|
155
|
+
```js
|
|
156
|
+
language:{
|
|
157
|
+
ignorei18n (bool),
|
|
158
|
+
ui (string),
|
|
159
|
+
content (string)
|
|
160
|
+
}
|
|
161
|
+
```
|
|
162
|
+
The language determination follows this logic:
|
|
163
|
+
|
|
164
|
+
- Plugin UI language:
|
|
165
|
+
`language.ui -> preferred language -> 'en'`
|
|
166
|
+
|
|
167
|
+
- Content language:
|
|
168
|
+
`ignorei18n ? language.content : i18n -> language.ui`
|
|
169
|
+
|
|
170
|
+
**Example of adding a new editor configuration:**
|
|
115
171
|
|
|
116
|
-
|
|
172
|
+
<details>
|
|
173
|
+
<summary><b>ckeditor.txt</b></summary>
|
|
174
|
+
|
|
175
|
+
```js
|
|
176
|
+
globalThis.CKEditorConfig = {
|
|
177
|
+
configs:{
|
|
178
|
+
myCustomVariant:{
|
|
117
179
|
field: {
|
|
118
|
-
key: "
|
|
119
|
-
value: "
|
|
180
|
+
key: "myCustomVariant",
|
|
181
|
+
value: "myCustomVariant",
|
|
120
182
|
metadatas: {
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
183
|
+
intlLabel: {
|
|
184
|
+
id: "ckeditor5.preset.myCustomVariant.label",
|
|
185
|
+
defaultMessage: "My custom variant",
|
|
186
|
+
},
|
|
125
187
|
},
|
|
126
188
|
},
|
|
127
|
-
/* CKEditor configuration */
|
|
128
189
|
editorConfig:{
|
|
129
|
-
/* You can find all available built-in plugins
|
|
130
|
-
in the admin/src/components/Input/CKEditor/configs/base.js */
|
|
131
190
|
plugins: [
|
|
132
191
|
CKEditor5.autoformat.Autoformat,
|
|
133
192
|
CKEditor5.basicStyles.Bold,
|
|
@@ -150,25 +209,8 @@ globalThis.CKEditorConfig = {
|
|
|
150
209
|
CKEditor5.table.TableCaption,
|
|
151
210
|
CKEditor5.strapiPlugins.StrapiMediaLib,
|
|
152
211
|
CKEditor5.strapiPlugins.StrapiUploadAdapter,
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
/* By default, the language of the plugin's UI will be chosen
|
|
156
|
-
based on the language defined in this config file
|
|
157
|
-
or on the preferred language from the strapi's user config
|
|
158
|
-
and if both of them are not set then 'en' will be used as a fallback.
|
|
159
|
-
( language.ui -> preferred language -> 'en' ) */
|
|
160
|
-
|
|
161
|
-
/* For content it will chose the language based on i18n (if! ignorei18n)
|
|
162
|
-
or on language.content property defined here
|
|
163
|
-
and it will use UI language as a fallback.
|
|
164
|
-
ignorei18n ? language.content : i18n; -> language.ui */
|
|
165
|
-
|
|
166
|
-
language:{
|
|
167
|
-
// ignorei18n: true,
|
|
168
|
-
// ui:'he',
|
|
169
|
-
// content:'he'
|
|
170
|
-
},
|
|
171
|
-
toolbar: [
|
|
212
|
+
],
|
|
213
|
+
toolbar: [
|
|
172
214
|
'heading',
|
|
173
215
|
'|',
|
|
174
216
|
'bold', 'italic', 'link', 'bulletedList', 'numberedList',
|
|
@@ -176,71 +218,116 @@ globalThis.CKEditorConfig = {
|
|
|
176
218
|
'strapiMediaLib', 'insertTable',
|
|
177
219
|
'|',
|
|
178
220
|
'undo', 'redo'
|
|
179
|
-
|
|
180
|
-
|
|
221
|
+
],
|
|
222
|
+
heading: {
|
|
181
223
|
options: [
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
224
|
+
{ model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
|
|
225
|
+
{ model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
|
|
226
|
+
{ model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' },
|
|
227
|
+
{ model: 'heading3', view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3' },
|
|
228
|
+
{ model: 'heading4', view: 'h4', title: 'Heading 4', class: 'ck-heading_heading4' },
|
|
187
229
|
]
|
|
188
|
-
|
|
189
|
-
|
|
230
|
+
},
|
|
231
|
+
image: {
|
|
190
232
|
toolbar: [
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
233
|
+
'imageStyle:inline',
|
|
234
|
+
'imageStyle:block',
|
|
235
|
+
'imageStyle:side',
|
|
236
|
+
'|',
|
|
237
|
+
'toggleImageCaption',
|
|
238
|
+
'imageTextAlternative'
|
|
197
239
|
]
|
|
198
|
-
|
|
199
|
-
|
|
240
|
+
},
|
|
241
|
+
table: {
|
|
200
242
|
contentToolbar: [
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
243
|
+
'tableColumn',
|
|
244
|
+
'tableRow',
|
|
245
|
+
'mergeTableCells',
|
|
246
|
+
'|',
|
|
247
|
+
'toggleTableCaption'
|
|
206
248
|
]
|
|
207
|
-
|
|
249
|
+
}
|
|
208
250
|
}
|
|
209
251
|
}
|
|
210
|
-
},
|
|
211
|
-
|
|
212
|
-
/* Here you can customize the plugin's theme.
|
|
213
|
-
This will be passed as "createGlobalStyle". */
|
|
214
|
-
theme:{
|
|
215
|
-
// common:``,
|
|
216
|
-
// light:``,
|
|
217
|
-
// dark:``,
|
|
218
|
-
// additional:``
|
|
219
252
|
}
|
|
220
|
-
|
|
221
253
|
}
|
|
222
254
|
```
|
|
223
255
|
|
|
224
|
-
>
|
|
256
|
+
</details>
|
|
257
|
+
|
|
258
|
+
**Example of changing buttons, modifying the plugin list, and adding styles in the default toolbar configuration:**
|
|
259
|
+
|
|
260
|
+
<details>
|
|
261
|
+
<summary><b>ckeditor.txt</b></summary>
|
|
262
|
+
|
|
225
263
|
```js
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
264
|
+
globalThis.CKEditorConfig = {
|
|
265
|
+
configs:{
|
|
266
|
+
toolbar:{
|
|
267
|
+
styles:`
|
|
268
|
+
--ck-focus-ring:3px dashed #5CB176;
|
|
269
|
+
|
|
270
|
+
.ck.ck-content.ck-editor__editable {
|
|
271
|
+
&.ck-focused:not(.ck-editor__nested-editable) {
|
|
272
|
+
border: var(--ck-focus-ring) !important;
|
|
273
|
+
}
|
|
274
|
+
}
|
|
275
|
+
.ck.ck-content.ck-editor__editable.ck-rounded-corners.ck-editor__editable_inline.ck-blurred{
|
|
276
|
+
min-height: 400px;
|
|
277
|
+
max-height: 400px;
|
|
278
|
+
}
|
|
279
|
+
.ck.ck-content.ck-editor__editable.ck-rounded-corners.ck-editor__editable_inline.ck-focused{
|
|
280
|
+
min-height: 400px;
|
|
281
|
+
max-height: 1700px;
|
|
282
|
+
}
|
|
283
|
+
`,
|
|
284
|
+
editorConfig:{
|
|
285
|
+
plugins: [
|
|
286
|
+
CKEditor5.basicStyles.Bold,
|
|
287
|
+
CKEditor5.basicStyles.Italic,
|
|
288
|
+
CKEditor5.essentials.Essentials,
|
|
289
|
+
CKEditor5.heading.Heading,
|
|
290
|
+
CKEditor5.image.Image,
|
|
291
|
+
CKEditor5.image.ImageCaption,
|
|
292
|
+
CKEditor5.image.ImageStyle,
|
|
293
|
+
CKEditor5.image.ImageToolbar,
|
|
294
|
+
CKEditor5.link.Link,
|
|
295
|
+
CKEditor5.list.List,
|
|
296
|
+
CKEditor5.paragraph.Paragraph,
|
|
297
|
+
CKEditor5.strapiPlugins.StrapiMediaLib,
|
|
298
|
+
CKEditor5.strapiPlugins.StrapiUploadAdapter,
|
|
299
|
+
],
|
|
300
|
+
toolbar: [
|
|
301
|
+
'heading',
|
|
302
|
+
'|',
|
|
303
|
+
'bold', 'italic', 'link', 'bulletedList', 'numberedList',
|
|
304
|
+
'|',
|
|
305
|
+
'strapiMediaLib', 'insertTable',
|
|
306
|
+
'|',
|
|
307
|
+
'undo', 'redo'
|
|
308
|
+
]
|
|
309
|
+
}
|
|
310
|
+
}
|
|
311
|
+
}
|
|
312
|
+
}
|
|
234
313
|
```
|
|
235
314
|
|
|
236
|
-
>
|
|
315
|
+
</details>
|
|
316
|
+
|
|
317
|
+
> 📂 Configurations availibale by default: [**admin/src/components/Input/CKEditor/configs**](https://github.com/nshenderov/strapi-plugin-ckeditor/blob/master/admin/src/components/Input/CKEditor/configs)
|
|
318
|
+
|
|
319
|
+
> 📂 Built-in plugins: [**admin/src/components/Input/CKEditor/configs/base.js**](https://github.com/nshenderov/strapi-plugin-ckeditor/blob/master/admin/src/components/Input/CKEditor/configs/base.js)
|
|
320
|
+
|
|
321
|
+
> 📂 Default editor styles: [**admin/src/components/Input/CKEditor/theme**](https://github.com/nshenderov/strapi-plugin-ckeditor/blob/master/admin/src/components/Input/CKEditor/theme)
|
|
322
|
+
|
|
323
|
+
> 💡 To display content from an external source in your admin panel, you should configure your `middlewares.js`. [**Explore the documentation for more information**](https://docs.strapi.io/developer-docs/latest/setup-deployment-guides/configurations/required/middlewares.html)
|
|
237
324
|
|
|
238
|
-
##
|
|
325
|
+
## Adding plugins
|
|
239
326
|
|
|
240
327
|
___
|
|
241
|
-
Markdown plugin
|
|
328
|
+
Exmple of adding the Markdown plugin
|
|
242
329
|
|
|
243
|
-
|
|
330
|
+
Add the plugin to you Strapi application:
|
|
244
331
|
|
|
245
332
|
```js
|
|
246
333
|
yarn add @ckeditor/ckeditor5-markdown-gfm
|
|
@@ -250,13 +337,12 @@ or
|
|
|
250
337
|
npm install @ckeditor/ckeditor5-markdown-gfm
|
|
251
338
|
```
|
|
252
339
|
|
|
253
|
-
|
|
340
|
+
Import the plugin in `your-app/src/admin/app.js`:
|
|
254
341
|
|
|
255
342
|
```js
|
|
256
343
|
import ckeditor5Dll from "ckeditor5/build/ckeditor5-dll.js";
|
|
257
344
|
import ckeditor5MrkdownDll from "@ckeditor/ckeditor5-markdown-gfm/build/markdown-gfm.js";
|
|
258
345
|
|
|
259
|
-
|
|
260
346
|
const config = {};
|
|
261
347
|
|
|
262
348
|
const bootstrap = (app) => {};
|
|
@@ -268,7 +354,12 @@ export default {
|
|
|
268
354
|
|
|
269
355
|
```
|
|
270
356
|
|
|
271
|
-
|
|
357
|
+
Add a new configuration option to your config file at `your-app/config/ckeditor.txt`:
|
|
358
|
+
|
|
359
|
+
**Example of a config file with the new configuration:**
|
|
360
|
+
|
|
361
|
+
<details>
|
|
362
|
+
<summary><b>ckeditor.txt</b></summary>
|
|
272
363
|
|
|
273
364
|
```js
|
|
274
365
|
globalThis.CKEditorConfig = {
|
|
@@ -363,7 +454,10 @@ globalThis.CKEditorConfig = {
|
|
|
363
454
|
}
|
|
364
455
|
```
|
|
365
456
|
|
|
366
|
-
|
|
457
|
+
</details>
|
|
458
|
+
|
|
459
|
+
|
|
460
|
+
Then rebuild the application:
|
|
367
461
|
```bash
|
|
368
462
|
npm run build
|
|
369
463
|
```
|
|
@@ -376,18 +470,16 @@ yarn build
|
|
|
376
470
|
## <a id="contributing"></a>🛠 Contributing
|
|
377
471
|
___
|
|
378
472
|
|
|
379
|
-
This section covers
|
|
380
|
-
|
|
381
|
-
### Setting up the environment
|
|
473
|
+
This section covers how to configure your environment if you want to contribute to this package.
|
|
382
474
|
|
|
383
|
-
|
|
475
|
+
To start making changes to the plugin, you first need to install the Strapi infrastructure on top of the plugin repository:
|
|
384
476
|
|
|
385
477
|
```
|
|
386
478
|
npx create-strapi-app --quickstart strapi
|
|
387
479
|
cd strapi
|
|
388
480
|
```
|
|
389
481
|
|
|
390
|
-
By default Strapi does not create plugins folder so we need to create it
|
|
482
|
+
By default, Strapi does not create a `plugins` folder, so we need to create it:
|
|
391
483
|
|
|
392
484
|
```
|
|
393
485
|
mkdir -p src/plugins
|
|
@@ -399,7 +491,7 @@ Now we should clone this repository so we can work on it.
|
|
|
399
491
|
git clone git@github.com:nshenderov/strapi-plugin-ckeditor.git src/plugins/strapi-plugin-ckeditor
|
|
400
492
|
```
|
|
401
493
|
|
|
402
|
-
|
|
494
|
+
Add an entry inside the `./package.json` file so we won't need to use yarn inside the plugin itself:
|
|
403
495
|
|
|
404
496
|
```
|
|
405
497
|
"workspaces": ["./src/plugins/strapi-plugin-ckeditor"]
|
|
@@ -411,8 +503,7 @@ Install dependencies:
|
|
|
411
503
|
yarn install
|
|
412
504
|
```
|
|
413
505
|
|
|
414
|
-
Now we need to register plugin so
|
|
415
|
-
to create (if not already created) `./config/plugins.js` file and add entry to it.
|
|
506
|
+
Now we need to register the plugin so Strapi can use it. To do that, we need to create the `./config/plugins.js` file (if it doesn't already exist) and add an entry to it:
|
|
416
507
|
|
|
417
508
|
```
|
|
418
509
|
module.exports = ({ env }) => ({
|
|
@@ -434,4 +525,4 @@ yarn develop
|
|
|
434
525
|
___
|
|
435
526
|
Strapi **v4.13.0+**
|
|
436
527
|
|
|
437
|
-
Node **>=18.0.0 <=20.x.x**
|
|
528
|
+
Node **>=18.0.0 <=20.x.x**
|
|
@@ -50,8 +50,6 @@ const w = {
|
|
|
50
50
|
CodeBlock: window.CKEditor5.codeBlock.CodeBlock,
|
|
51
51
|
DataFilter: window.CKEditor5.htmlSupport.DataFilter,
|
|
52
52
|
DataSchema: window.CKEditor5.htmlSupport.DataSchema,
|
|
53
|
-
DocumentList: window.CKEditor5.list.DocumentList,
|
|
54
|
-
DocumentListProperties: window.CKEditor5.list.DocumentListProperties,
|
|
55
53
|
Essentials: window.CKEditor5.essentials.Essentials,
|
|
56
54
|
FindAndReplace: window.CKEditor5.findAndReplace.FindAndReplace,
|
|
57
55
|
FontBackgroundColor: window.CKEditor5.font.FontBackgroundColor,
|
|
@@ -351,9 +349,6 @@ const base = {
|
|
|
351
349
|
"|",
|
|
352
350
|
"resizeImage",
|
|
353
351
|
],
|
|
354
|
-
insert: {
|
|
355
|
-
integrations: ["insertImageViaUrl"],
|
|
356
|
-
},
|
|
357
352
|
},
|
|
358
353
|
link: {
|
|
359
354
|
decorators: {
|
|
@@ -426,6 +421,13 @@ const base = {
|
|
|
426
421
|
},
|
|
427
422
|
],
|
|
428
423
|
},
|
|
424
|
+
ui: {
|
|
425
|
+
poweredBy: {
|
|
426
|
+
position: 'inside',
|
|
427
|
+
side: 'right',
|
|
428
|
+
label: ''
|
|
429
|
+
}
|
|
430
|
+
}
|
|
429
431
|
};
|
|
430
432
|
|
|
431
433
|
|
|
@@ -438,8 +440,6 @@ w.BlockQuote,
|
|
|
438
440
|
w.Bold,
|
|
439
441
|
w.Code,
|
|
440
442
|
w.CodeBlock,
|
|
441
|
-
w.DocumentList,
|
|
442
|
-
w.DocumentListProperties,
|
|
443
443
|
w.Essentials,
|
|
444
444
|
w.FontBackgroundColor,
|
|
445
445
|
w.FontColor,
|
|
@@ -459,6 +459,8 @@ w.ImageUpload,
|
|
|
459
459
|
w.Indent,
|
|
460
460
|
w.IndentBlock,
|
|
461
461
|
w.Italic,
|
|
462
|
+
w.List,
|
|
463
|
+
w.ListProperties,
|
|
462
464
|
w.Link,
|
|
463
465
|
w.LinkImage,
|
|
464
466
|
w.LinkImage,
|
|
@@ -11,8 +11,6 @@ import MediaLib from "../MediaLib";
|
|
|
11
11
|
import ckeditor5Dll from "ckeditor5/build/ckeditor5-dll.js";
|
|
12
12
|
import ckeditor5EditorClassicDll from "@ckeditor/ckeditor5-editor-classic/build/editor-classic.js";
|
|
13
13
|
|
|
14
|
-
const GlobalStyling = getGlobalStyling();
|
|
15
|
-
|
|
16
14
|
const Wrapper = styled("div")`${({ editorStyles }) => editorStyles}`;
|
|
17
15
|
|
|
18
16
|
const Editor = ({ onChange, name, value, disabled, preset, maxLength }) => {
|
|
@@ -32,6 +30,8 @@ const Editor = ({ onChange, name, value, disabled, preset, maxLength }) => {
|
|
|
32
30
|
const handleToggleMediaLib = () => setMediaLibVisible(prev => !prev);
|
|
33
31
|
|
|
34
32
|
const handleCounter = (number) => number > maxLength ? setLengthMax(true) : setLengthMax(false);
|
|
33
|
+
|
|
34
|
+
const GlobalStyling = getGlobalStyling();
|
|
35
35
|
|
|
36
36
|
useEffect(() => {
|
|
37
37
|
(async () => {
|
|
@@ -1,11 +1,19 @@
|
|
|
1
1
|
import baseTheme from "./theme";
|
|
2
2
|
import { createGlobalStyle } from "styled-components";
|
|
3
3
|
|
|
4
|
+
const getSystemColorScheme= () =>
|
|
5
|
+
window.matchMedia &&
|
|
6
|
+
window.matchMedia("(prefers-color-scheme: dark)").matches ?
|
|
7
|
+
"dark" : "light";
|
|
8
|
+
|
|
4
9
|
export const getGlobalStyling = () => {
|
|
5
|
-
|
|
6
|
-
const variant = localStorage.getItem("STRAPI_THEME") || "light";
|
|
10
|
+
|
|
7
11
|
const { theme: userTheme, themeOverwrite: overwrite } = globalThis.CKEditorConfig || {};
|
|
8
12
|
|
|
13
|
+
const profileTheme = localStorage.getItem("STRAPI_THEME");
|
|
14
|
+
|
|
15
|
+
const variant = profileTheme && profileTheme !== "system" ? profileTheme : getSystemColorScheme();
|
|
16
|
+
|
|
9
17
|
const theme = overwrite ? userTheme : { ...baseTheme, ...userTheme};
|
|
10
18
|
|
|
11
19
|
return createGlobalStyle`
|
|
@@ -6,19 +6,14 @@ export const dark = css`
|
|
|
6
6
|
--ck-color-focus-disabled-shadow: rgba(106, 114, 143, 0.4) !important;
|
|
7
7
|
--ck-focus-ring: 1px solid #4945ff !important;
|
|
8
8
|
--ck-color-button-default-hover-background: #262630 !important;
|
|
9
|
+
}
|
|
9
10
|
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
}
|
|
17
|
-
& > svg > #primary,
|
|
18
|
-
#primary-2 {
|
|
19
|
-
stroke: #7b79ff !important;
|
|
20
|
-
}
|
|
21
|
-
}
|
|
11
|
+
.ck.ck-powered-by > a > svg > path:first-child {
|
|
12
|
+
fill: rgb(236, 236, 236);
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.ck.ck-powered-by > a > svg > path:nth-child(3) {
|
|
16
|
+
fill: rgb(172, 156, 251);
|
|
22
17
|
}
|
|
23
18
|
|
|
24
19
|
.ck {
|
|
@@ -139,6 +134,12 @@ export const dark = css`
|
|
|
139
134
|
/* -- Overrides the default colors used by the ckeditor5-link package. ---------------------- */
|
|
140
135
|
|
|
141
136
|
--ck-color-link-default: hsl(216, 100%, 75%);
|
|
137
|
+
|
|
138
|
+
--ck-powered-by-background: transparrent;
|
|
139
|
+
--ck-powered-by-border-color: var(--ck-color-base-background);
|
|
140
|
+
|
|
141
|
+
--ck-color-dialog-background: var(--ck-custom-background);
|
|
142
|
+
--ck-color-dialog-form-header-border: var(--ck-color-base-border);
|
|
142
143
|
}
|
|
143
144
|
|
|
144
145
|
`;
|
|
@@ -6,12 +6,10 @@ export const light = css`
|
|
|
6
6
|
--ck-color-focus-disabled-shadow: #e4e3ff !important;
|
|
7
7
|
--ck-focus-ring: 1px solid rgb(73, 69, 255) !important;
|
|
8
8
|
--ck-color-button-default-hover-background: #F0F0FF !important;
|
|
9
|
+
}
|
|
9
10
|
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
stroke: #7b79ff !important;
|
|
13
|
-
}
|
|
14
|
-
}
|
|
11
|
+
.ck.ck-powered-by > a > svg > path:first-child {
|
|
12
|
+
fill: #001234;
|
|
15
13
|
}
|
|
16
14
|
|
|
17
15
|
.ck {
|
|
@@ -131,5 +129,11 @@ export const light = css`
|
|
|
131
129
|
/* -- Overrides the default colors used by the ckeditor5-link package. ---------------------- */
|
|
132
130
|
|
|
133
131
|
--ck-color-link-default: hsl(209, 89%, 33%);
|
|
132
|
+
|
|
133
|
+
--ck-powered-by-background: transparrent;
|
|
134
|
+
--ck-powered-by-border-color: var(--ck-color-base-background);
|
|
135
|
+
|
|
136
|
+
--ck-color-dialog-background: var(--ck-custom-background);
|
|
137
|
+
--ck-color-dialog-form-header-border: var(--ck-color-base-border);
|
|
134
138
|
}
|
|
135
139
|
`;
|
|
@@ -15,17 +15,17 @@ const MediaLib = ({ isOpen, onChange, onToggle, editor, uploadConfig: { responsi
|
|
|
15
15
|
let set = "";
|
|
16
16
|
let keys = Object.keys(formats).sort((a, b) => formats[a].width - formats[b].width);
|
|
17
17
|
keys.map((k) => (set += prefixFileUrlWithBackendUrl(formats[k].url) + ` ${formats[k].width}w,`));
|
|
18
|
-
newValue
|
|
18
|
+
newValue = `<img src="${prefixFileUrlWithBackendUrl(url)}" alt="${alt}" width="${width}" height="${height}" srcset="${set}" />`;
|
|
19
19
|
} else {
|
|
20
|
-
newValue
|
|
20
|
+
newValue = `<img src="${prefixFileUrlWithBackendUrl(url)}" alt="${alt}" width="${width}" height="${height}" />`;
|
|
21
21
|
}
|
|
22
|
-
} else if (mime.includes("application/pdf")) {
|
|
23
|
-
newValue = `<a href="${prefixFileUrlWithBackendUrl(url)}" download="${name}">${name || "Download PDF"}</a>`;
|
|
24
22
|
} else if (mime.includes("video")) {
|
|
25
23
|
newValue = `
|
|
26
24
|
<video class="video" controls width="500px">
|
|
27
25
|
<source src="${prefixFileUrlWithBackendUrl(url)}" type="${mime}" />
|
|
28
|
-
|
|
26
|
+
</video>`;
|
|
27
|
+
} else {
|
|
28
|
+
newValue = `<a href="${prefixFileUrlWithBackendUrl(url)}">${name || "Open document"}</a>`;
|
|
29
29
|
}
|
|
30
30
|
});
|
|
31
31
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@_sh/strapi-plugin-ckeditor",
|
|
3
|
-
"version": "2.1.
|
|
3
|
+
"version": "2.1.3",
|
|
4
4
|
"description": "Integrates CKEditor 5 into your Strapi project as a fully customizable custom field. (Unofficial integration)",
|
|
5
5
|
"private": false,
|
|
6
6
|
"keywords": [
|
|
@@ -25,48 +25,48 @@
|
|
|
25
25
|
"strapi-server.js"
|
|
26
26
|
],
|
|
27
27
|
"dependencies": {
|
|
28
|
-
"@ckeditor/ckeditor5-alignment": "^
|
|
29
|
-
"@ckeditor/ckeditor5-autoformat": "^
|
|
30
|
-
"@ckeditor/ckeditor5-autosave": "^
|
|
31
|
-
"@ckeditor/ckeditor5-basic-styles": "^
|
|
32
|
-
"@ckeditor/ckeditor5-block-quote": "^
|
|
33
|
-
"@ckeditor/ckeditor5-code-block": "^
|
|
34
|
-
"@ckeditor/ckeditor5-easy-image": "^
|
|
35
|
-
"@ckeditor/ckeditor5-editor-classic": "^
|
|
36
|
-
"@ckeditor/ckeditor5-essentials": "^
|
|
37
|
-
"@ckeditor/ckeditor5-find-and-replace": "^
|
|
38
|
-
"@ckeditor/ckeditor5-
|
|
39
|
-
"@ckeditor/ckeditor5-
|
|
40
|
-
"@ckeditor/ckeditor5-
|
|
41
|
-
"@ckeditor/ckeditor5-
|
|
42
|
-
"@ckeditor/ckeditor5-html-
|
|
43
|
-
"@ckeditor/ckeditor5-
|
|
44
|
-
"@ckeditor/ckeditor5-
|
|
45
|
-
"@ckeditor/ckeditor5-indent": "^
|
|
46
|
-
"@ckeditor/ckeditor5-language": "^
|
|
47
|
-
"@ckeditor/ckeditor5-link": "^
|
|
48
|
-
"@ckeditor/ckeditor5-list": "^
|
|
49
|
-
"@ckeditor/ckeditor5-media-embed": "^
|
|
50
|
-
"@ckeditor/ckeditor5-mention": "^
|
|
51
|
-
"@ckeditor/ckeditor5-page-break": "^
|
|
52
|
-
"@ckeditor/ckeditor5-paragraph": "^
|
|
53
|
-
"@ckeditor/ckeditor5-paste-from-office": "^
|
|
54
|
-
"@ckeditor/ckeditor5-remove-format": "^
|
|
55
|
-
"@ckeditor/ckeditor5-
|
|
56
|
-
"@ckeditor/ckeditor5-
|
|
57
|
-
"@ckeditor/ckeditor5-
|
|
58
|
-
"@ckeditor/ckeditor5-
|
|
59
|
-
"@ckeditor/ckeditor5-
|
|
60
|
-
"@ckeditor/ckeditor5-
|
|
61
|
-
"@ckeditor/ckeditor5-
|
|
62
|
-
"@ckeditor/ckeditor5-
|
|
63
|
-
"@ckeditor/ckeditor5-
|
|
64
|
-
"ckeditor5": "^
|
|
65
|
-
"@ckeditor/ckeditor5-react": "^
|
|
66
|
-
"@strapi/design-system": "^1.
|
|
28
|
+
"@ckeditor/ckeditor5-alignment": "^43.0.0",
|
|
29
|
+
"@ckeditor/ckeditor5-autoformat": "^43.0.0",
|
|
30
|
+
"@ckeditor/ckeditor5-autosave": "^43.0.0",
|
|
31
|
+
"@ckeditor/ckeditor5-basic-styles": "^43.0.0",
|
|
32
|
+
"@ckeditor/ckeditor5-block-quote": "^43.0.0",
|
|
33
|
+
"@ckeditor/ckeditor5-code-block": "^43.0.0",
|
|
34
|
+
"@ckeditor/ckeditor5-easy-image": "^43.0.0",
|
|
35
|
+
"@ckeditor/ckeditor5-editor-classic": "^43.0.0",
|
|
36
|
+
"@ckeditor/ckeditor5-essentials": "^43.0.0",
|
|
37
|
+
"@ckeditor/ckeditor5-find-and-replace": "^43.0.0",
|
|
38
|
+
"@ckeditor/ckeditor5-font": "^43.0.0",
|
|
39
|
+
"@ckeditor/ckeditor5-heading": "^43.0.0",
|
|
40
|
+
"@ckeditor/ckeditor5-highlight": "^43.0.0",
|
|
41
|
+
"@ckeditor/ckeditor5-horizontal-line": "^43.0.0",
|
|
42
|
+
"@ckeditor/ckeditor5-html-embed": "^43.0.0",
|
|
43
|
+
"@ckeditor/ckeditor5-html-support": "^43.0.0",
|
|
44
|
+
"@ckeditor/ckeditor5-image": "^43.0.0",
|
|
45
|
+
"@ckeditor/ckeditor5-indent": "^43.0.0",
|
|
46
|
+
"@ckeditor/ckeditor5-language": "^43.0.0",
|
|
47
|
+
"@ckeditor/ckeditor5-link": "^43.0.0",
|
|
48
|
+
"@ckeditor/ckeditor5-list": "^43.0.0",
|
|
49
|
+
"@ckeditor/ckeditor5-media-embed": "^43.0.0",
|
|
50
|
+
"@ckeditor/ckeditor5-mention": "^43.0.0",
|
|
51
|
+
"@ckeditor/ckeditor5-page-break": "^43.0.0",
|
|
52
|
+
"@ckeditor/ckeditor5-paragraph": "^43.0.0",
|
|
53
|
+
"@ckeditor/ckeditor5-paste-from-office": "^43.0.0",
|
|
54
|
+
"@ckeditor/ckeditor5-remove-format": "^43.0.0",
|
|
55
|
+
"@ckeditor/ckeditor5-show-blocks": "^43.0.0",
|
|
56
|
+
"@ckeditor/ckeditor5-source-editing": "^43.0.0",
|
|
57
|
+
"@ckeditor/ckeditor5-special-characters": "^43.0.0",
|
|
58
|
+
"@ckeditor/ckeditor5-style": "^43.0.0",
|
|
59
|
+
"@ckeditor/ckeditor5-table": "^43.0.0",
|
|
60
|
+
"@ckeditor/ckeditor5-theme-lark": "^43.0.0",
|
|
61
|
+
"@ckeditor/ckeditor5-typing": "^43.0.0",
|
|
62
|
+
"@ckeditor/ckeditor5-upload": "^43.0.0",
|
|
63
|
+
"@ckeditor/ckeditor5-word-count": "^43.0.0",
|
|
64
|
+
"ckeditor5": "^43.0.0",
|
|
65
|
+
"@ckeditor/ckeditor5-react": "^9.0.0",
|
|
66
|
+
"@strapi/design-system": "^1.19.0",
|
|
67
67
|
"lodash": "^4.17.21",
|
|
68
68
|
"prop-types": "^15.8.1",
|
|
69
|
-
"sanitize-html": "^2.
|
|
69
|
+
"sanitize-html": "^2.13.0"
|
|
70
70
|
},
|
|
71
71
|
"peerDependencies": {
|
|
72
72
|
"@strapi/strapi": "^4.13.0"
|
|
@@ -80,11 +80,56 @@
|
|
|
80
80
|
"url": "https://github.com/nshenderov/strapi-plugin-ckeditor.git"
|
|
81
81
|
},
|
|
82
82
|
"scripts": {
|
|
83
|
-
"
|
|
83
|
+
"release": "release-it"
|
|
84
84
|
},
|
|
85
85
|
"engines": {
|
|
86
86
|
"node": ">=18.0.0 <=20.x.x",
|
|
87
87
|
"npm": ">=6.0.0"
|
|
88
88
|
},
|
|
89
|
-
"license": "MIT"
|
|
89
|
+
"license": "MIT",
|
|
90
|
+
"devDependencies": {
|
|
91
|
+
"release-it": "^17.6.0",
|
|
92
|
+
"@release-it/conventional-changelog": "^8.0.1"
|
|
93
|
+
},
|
|
94
|
+
"release-it": {
|
|
95
|
+
"git": {
|
|
96
|
+
"commitMesage": "chore: release v${version}"
|
|
97
|
+
},
|
|
98
|
+
"github": {
|
|
99
|
+
"release": true,
|
|
100
|
+
"releaseName": "v${version}"
|
|
101
|
+
},
|
|
102
|
+
"npm": {
|
|
103
|
+
"publish": true
|
|
104
|
+
},
|
|
105
|
+
"plugins": {
|
|
106
|
+
"@release-it/conventional-changelog": {
|
|
107
|
+
"preset": {
|
|
108
|
+
"name": "conventionalcommits",
|
|
109
|
+
"types": [
|
|
110
|
+
{
|
|
111
|
+
"type": "feat",
|
|
112
|
+
"section": "🚀 Features"
|
|
113
|
+
},
|
|
114
|
+
{
|
|
115
|
+
"type": "fix",
|
|
116
|
+
"section": "🪲 Bug fixes"
|
|
117
|
+
},
|
|
118
|
+
{
|
|
119
|
+
"type": "docs",
|
|
120
|
+
"section": "⚙️ Chore"
|
|
121
|
+
},
|
|
122
|
+
{
|
|
123
|
+
"type": "chore",
|
|
124
|
+
"section": "⚙️ Chore"
|
|
125
|
+
},
|
|
126
|
+
{
|
|
127
|
+
"type": "style",
|
|
128
|
+
"section": "💅 Style"
|
|
129
|
+
}
|
|
130
|
+
]
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
}
|
|
90
135
|
}
|