@_sh/strapi-plugin-ckeditor 2.1.1 → 2.1.2
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 +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 +10 -12
- package/admin/src/components/Input/CKEditor/theme/light.js +6 -5
- package/admin/src/components/Input/MediaLib/index.js +5 -5
- package/package.json +1 -1
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;" >
|
|
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,137 @@ or
|
|
|
49
58
|
yarn build
|
|
50
59
|
```
|
|
51
60
|
|
|
61
|
+
## <a id="usage"></a>✍️ Usage
|
|
62
|
+
|
|
63
|
+
## Guide:
|
|
64
|
+
<details>
|
|
65
|
+
<summary><b>Open</b></summary>
|
|
66
|
+
|
|
67
|
+
* Go to the Content-Type Builder -> Add another field -> switch to `custom`
|
|
68
|
+
|
|
69
|
+
<p align="center">
|
|
70
|
+
<img src="https://raw.githubusercontent.com/nshenderov/strapi-plugin-ckeditor/master/assets/usage-guide1.png" width="700" />
|
|
71
|
+
</p>
|
|
72
|
+
|
|
73
|
+
* Click on CKEditor 5
|
|
74
|
+
<p align="center">
|
|
75
|
+
<img src="https://raw.githubusercontent.com/nshenderov/strapi-plugin-ckeditor/master/assets/usage-guide2.png" width="700" />
|
|
76
|
+
</p>
|
|
52
77
|
|
|
78
|
+
* Choose the editor version you want
|
|
79
|
+
<p align="center">
|
|
80
|
+
<img src="https://raw.githubusercontent.com/nshenderov/strapi-plugin-ckeditor/master/assets/usage-guide3.png" width="700" />
|
|
81
|
+
</p>
|
|
82
|
+
|
|
83
|
+
</details>
|
|
84
|
+
|
|
85
|
+
## Editor default versions:
|
|
86
|
+
<details>
|
|
87
|
+
<summary><b>Open</b></summary>
|
|
88
|
+
|
|
89
|
+
<p align="center">
|
|
90
|
+
<img src="https://raw.githubusercontent.com/nshenderov/strapi-plugin-ckeditor/master/assets/toolbar-version.png" width="700" />
|
|
91
|
+
</p>
|
|
92
|
+
|
|
93
|
+
<p align="center">
|
|
94
|
+
<img src="https://raw.githubusercontent.com/nshenderov/strapi-plugin-ckeditor/master/assets/toolbarballon-version.png" width="700" />
|
|
95
|
+
</p>
|
|
96
|
+
|
|
97
|
+
<p align="center">
|
|
98
|
+
<img src="https://raw.githubusercontent.com/nshenderov/strapi-plugin-ckeditor/master/assets/blockballon-version.png" width="700" />
|
|
99
|
+
</p>
|
|
100
|
+
|
|
101
|
+
</details>
|
|
53
102
|
|
|
54
103
|
## <a id="configuration"></a>⚙️ Configuration
|
|
55
104
|
___
|
|
56
|
-
The plugin
|
|
57
|
-
|
|
58
|
-
The plugin configuration should be defined in the `/config/ckeditor.txt` file.
|
|
105
|
+
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
106
|
|
|
60
|
-
It
|
|
107
|
+
It is highly recommended to explore [**the official CKEditor5 documentation**](https://ckeditor.com/docs/ckeditor5/latest/features/index.html).
|
|
61
108
|
|
|
62
|
-
|
|
109
|
+
The plugin configuration should be defined in `your-app/config/ckeditor.txt`.
|
|
63
110
|
|
|
64
|
-
|
|
111
|
+
The plugin provides three editor configurations by default. Each configuration includes a set of plugins, settings, and styles.
|
|
65
112
|
|
|
66
|
-
|
|
113
|
+
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
114
|
|
|
68
|
-
|
|
115
|
+
Config structure looks like this:
|
|
69
116
|
|
|
70
117
|
```js
|
|
71
118
|
globalThis.CKEditorConfig = {
|
|
119
|
+
configsOverwrite:bool,
|
|
120
|
+
themeOverwrite:bool,
|
|
121
|
+
configs:{
|
|
122
|
+
toolbar:{...},
|
|
123
|
+
toolbarBalloon:{...},
|
|
124
|
+
blockBalloon:{...},
|
|
125
|
+
customEditorVersion1:{...},
|
|
126
|
+
customEditorVersion2:{...}
|
|
127
|
+
...
|
|
128
|
+
}
|
|
129
|
+
theme:{...}
|
|
130
|
+
}
|
|
131
|
+
```
|
|
72
132
|
|
|
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: */
|
|
133
|
+
Every configuration in the `configs` object contains three properties:
|
|
77
134
|
|
|
78
|
-
|
|
79
|
-
|
|
135
|
+
1. `field (object)` Registers this configuration version in the Admin panel.
|
|
136
|
+
2. `styles (string)` Styles applied to the editor in this version.
|
|
137
|
+
3. `editorConfig (object)` The CKEditor configuration.
|
|
80
138
|
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
Each config includes:
|
|
84
|
-
"styles", "field" and "editorConfig" properties.
|
|
85
|
-
Property "field" is required. */
|
|
139
|
+
The `theme` object is used to modify the default global theme of the plugin.
|
|
140
|
+
It contains four properties:
|
|
86
141
|
|
|
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. */
|
|
142
|
+
1. `common (string)` Styles applied to the editor to ensure proper appearance of the input.
|
|
143
|
+
2. `light (string)` Styles applied to the editor when Strapi is in light mode.
|
|
144
|
+
3. `dark (string)` Styles applied to the editor when Strapi is in dark mode.
|
|
145
|
+
4. `additional (string)` Additional styles to further enhance the editors appearance.
|
|
97
146
|
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
147
|
+
By default, everything defined in the user’s configuration is merged with the
|
|
148
|
+
default configuration object. These two properties allow you to prevent
|
|
149
|
+
this behavior:
|
|
150
|
+
|
|
151
|
+
1. `configsOverwrite (bool)`
|
|
152
|
+
2. `themeOverwrite (bool)`
|
|
153
|
+
|
|
154
|
+
Since Strapi uses i18n for translation, the `ignorei18n` property is added to the
|
|
155
|
+
`editorConfig.language` object. This property allows you to manually set the
|
|
156
|
+
content language, bypassing i18n. The language object looks like this:
|
|
157
|
+
|
|
158
|
+
```js
|
|
159
|
+
language:{
|
|
160
|
+
ignorei18n (bool),
|
|
161
|
+
ui (string),
|
|
162
|
+
content (string)
|
|
163
|
+
}
|
|
164
|
+
```
|
|
165
|
+
The language determination follows this logic:
|
|
166
|
+
|
|
167
|
+
- Plugin UI language:
|
|
168
|
+
`language.ui -> preferred language -> 'en'`
|
|
169
|
+
|
|
170
|
+
- Content language:
|
|
171
|
+
`ignorei18n ? language.content : i18n -> language.ui`
|
|
115
172
|
|
|
116
|
-
|
|
173
|
+
**Example of adding a new editor configuration:**
|
|
174
|
+
<details>
|
|
175
|
+
<summary><b>ckeditor.txt</b></summary>
|
|
176
|
+
|
|
177
|
+
```js
|
|
178
|
+
globalThis.CKEditorConfig = {
|
|
179
|
+
configs:{
|
|
180
|
+
myCustomVariant:{
|
|
117
181
|
field: {
|
|
118
|
-
key: "
|
|
119
|
-
value: "
|
|
182
|
+
key: "myCustomVariant",
|
|
183
|
+
value: "myCustomVariant",
|
|
120
184
|
metadatas: {
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
185
|
+
intlLabel: {
|
|
186
|
+
id: "ckeditor5.preset.myCustomVariant.label",
|
|
187
|
+
defaultMessage: "My custom variant",
|
|
188
|
+
},
|
|
125
189
|
},
|
|
126
190
|
},
|
|
127
|
-
/* CKEditor configuration */
|
|
128
191
|
editorConfig:{
|
|
129
|
-
/* You can find all available built-in plugins
|
|
130
|
-
in the admin/src/components/Input/CKEditor/configs/base.js */
|
|
131
192
|
plugins: [
|
|
132
193
|
CKEditor5.autoformat.Autoformat,
|
|
133
194
|
CKEditor5.basicStyles.Bold,
|
|
@@ -150,25 +211,8 @@ globalThis.CKEditorConfig = {
|
|
|
150
211
|
CKEditor5.table.TableCaption,
|
|
151
212
|
CKEditor5.strapiPlugins.StrapiMediaLib,
|
|
152
213
|
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: [
|
|
214
|
+
],
|
|
215
|
+
toolbar: [
|
|
172
216
|
'heading',
|
|
173
217
|
'|',
|
|
174
218
|
'bold', 'italic', 'link', 'bulletedList', 'numberedList',
|
|
@@ -176,71 +220,115 @@ globalThis.CKEditorConfig = {
|
|
|
176
220
|
'strapiMediaLib', 'insertTable',
|
|
177
221
|
'|',
|
|
178
222
|
'undo', 'redo'
|
|
179
|
-
|
|
180
|
-
|
|
223
|
+
],
|
|
224
|
+
heading: {
|
|
181
225
|
options: [
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
226
|
+
{ model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
|
|
227
|
+
{ model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
|
|
228
|
+
{ model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' },
|
|
229
|
+
{ model: 'heading3', view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3' },
|
|
230
|
+
{ model: 'heading4', view: 'h4', title: 'Heading 4', class: 'ck-heading_heading4' },
|
|
187
231
|
]
|
|
188
|
-
|
|
189
|
-
|
|
232
|
+
},
|
|
233
|
+
image: {
|
|
190
234
|
toolbar: [
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
235
|
+
'imageStyle:inline',
|
|
236
|
+
'imageStyle:block',
|
|
237
|
+
'imageStyle:side',
|
|
238
|
+
'|',
|
|
239
|
+
'toggleImageCaption',
|
|
240
|
+
'imageTextAlternative'
|
|
197
241
|
]
|
|
198
|
-
|
|
199
|
-
|
|
242
|
+
},
|
|
243
|
+
table: {
|
|
200
244
|
contentToolbar: [
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
245
|
+
'tableColumn',
|
|
246
|
+
'tableRow',
|
|
247
|
+
'mergeTableCells',
|
|
248
|
+
'|',
|
|
249
|
+
'toggleTableCaption'
|
|
206
250
|
]
|
|
207
|
-
|
|
251
|
+
}
|
|
208
252
|
}
|
|
209
253
|
}
|
|
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
254
|
}
|
|
220
|
-
|
|
221
255
|
}
|
|
222
256
|
```
|
|
223
257
|
|
|
224
|
-
>
|
|
258
|
+
</details>
|
|
259
|
+
|
|
260
|
+
**Example of changing buttons, modifying the plugin list, and adding styles in the default toolbar configuration:**
|
|
261
|
+
<details>
|
|
262
|
+
<summary><b>ckeditor.txt</b></summary>
|
|
263
|
+
|
|
225
264
|
```js
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
265
|
+
globalThis.CKEditorConfig = {
|
|
266
|
+
configs:{
|
|
267
|
+
toolbar:{
|
|
268
|
+
styles:`
|
|
269
|
+
--ck-focus-ring:3px dashed #5CB176;
|
|
270
|
+
|
|
271
|
+
.ck.ck-content.ck-editor__editable {
|
|
272
|
+
&.ck-focused:not(.ck-editor__nested-editable) {
|
|
273
|
+
border: var(--ck-focus-ring) !important;
|
|
274
|
+
}
|
|
275
|
+
}
|
|
276
|
+
.ck.ck-content.ck-editor__editable.ck-rounded-corners.ck-editor__editable_inline.ck-blurred{
|
|
277
|
+
min-height: 400px;
|
|
278
|
+
max-height: 400px;
|
|
279
|
+
}
|
|
280
|
+
.ck.ck-content.ck-editor__editable.ck-rounded-corners.ck-editor__editable_inline.ck-focused{
|
|
281
|
+
min-height: 400px;
|
|
282
|
+
max-height: 1700px;
|
|
283
|
+
}
|
|
284
|
+
`,
|
|
285
|
+
editorConfig:{
|
|
286
|
+
plugins: [
|
|
287
|
+
CKEditor5.basicStyles.Bold,
|
|
288
|
+
CKEditor5.basicStyles.Italic,
|
|
289
|
+
CKEditor5.essentials.Essentials,
|
|
290
|
+
CKEditor5.heading.Heading,
|
|
291
|
+
CKEditor5.image.Image,
|
|
292
|
+
CKEditor5.image.ImageCaption,
|
|
293
|
+
CKEditor5.image.ImageStyle,
|
|
294
|
+
CKEditor5.image.ImageToolbar,
|
|
295
|
+
CKEditor5.link.Link,
|
|
296
|
+
CKEditor5.list.List,
|
|
297
|
+
CKEditor5.paragraph.Paragraph,
|
|
298
|
+
CKEditor5.strapiPlugins.StrapiMediaLib,
|
|
299
|
+
CKEditor5.strapiPlugins.StrapiUploadAdapter,
|
|
300
|
+
],
|
|
301
|
+
toolbar: [
|
|
302
|
+
'heading',
|
|
303
|
+
'|',
|
|
304
|
+
'bold', 'italic', 'link', 'bulletedList', 'numberedList',
|
|
305
|
+
'|',
|
|
306
|
+
'strapiMediaLib', 'insertTable',
|
|
307
|
+
'|',
|
|
308
|
+
'undo', 'redo'
|
|
309
|
+
]
|
|
310
|
+
}
|
|
311
|
+
}
|
|
312
|
+
}
|
|
313
|
+
}
|
|
234
314
|
```
|
|
235
315
|
|
|
236
|
-
>
|
|
316
|
+
</details>
|
|
317
|
+
|
|
318
|
+
> 📂 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)
|
|
319
|
+
|
|
320
|
+
> 📂 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)
|
|
321
|
+
|
|
322
|
+
> 📂 Default editor styles: [**admin/src/components/Input/CKEditor/theme**](https://github.com/nshenderov/strapi-plugin-ckeditor/blob/master/admin/src/components/Input/CKEditor/theme)
|
|
237
323
|
|
|
238
|
-
|
|
324
|
+
> 💡 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)
|
|
325
|
+
|
|
326
|
+
## Adding plugins
|
|
239
327
|
|
|
240
328
|
___
|
|
241
|
-
Markdown plugin
|
|
329
|
+
Exmple of adding the Markdown plugin
|
|
242
330
|
|
|
243
|
-
|
|
331
|
+
Add the plugin to you Strapi application:
|
|
244
332
|
|
|
245
333
|
```js
|
|
246
334
|
yarn add @ckeditor/ckeditor5-markdown-gfm
|
|
@@ -250,13 +338,12 @@ or
|
|
|
250
338
|
npm install @ckeditor/ckeditor5-markdown-gfm
|
|
251
339
|
```
|
|
252
340
|
|
|
253
|
-
|
|
341
|
+
Import the plugin in `your-app/src/admin/app.js`:
|
|
254
342
|
|
|
255
343
|
```js
|
|
256
344
|
import ckeditor5Dll from "ckeditor5/build/ckeditor5-dll.js";
|
|
257
345
|
import ckeditor5MrkdownDll from "@ckeditor/ckeditor5-markdown-gfm/build/markdown-gfm.js";
|
|
258
346
|
|
|
259
|
-
|
|
260
347
|
const config = {};
|
|
261
348
|
|
|
262
349
|
const bootstrap = (app) => {};
|
|
@@ -268,7 +355,11 @@ export default {
|
|
|
268
355
|
|
|
269
356
|
```
|
|
270
357
|
|
|
271
|
-
|
|
358
|
+
Add a new configuration option to your config file at `your-app/config/ckeditor.txt`:
|
|
359
|
+
|
|
360
|
+
## Example of a config file with the new configuration:
|
|
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`
|
|
@@ -7,18 +7,16 @@ export const dark = css`
|
|
|
7
7
|
--ck-focus-ring: 1px solid #4945ff !important;
|
|
8
8
|
--ck-color-button-default-hover-background: #262630 !important;
|
|
9
9
|
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
}
|
|
21
|
-
}
|
|
10
|
+
--ck-powered-by-background: #212134;
|
|
11
|
+
--ck-powered-by-border-color: #212134;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.ck.ck-powered-by > a > svg > path:first-child {
|
|
15
|
+
fill: rgb(236, 236, 236);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.ck.ck-powered-by > a > svg > path:nth-child(3) {
|
|
19
|
+
fill: rgb(172, 156, 251);
|
|
22
20
|
}
|
|
23
21
|
|
|
24
22
|
.ck {
|
|
@@ -7,11 +7,12 @@ export const light = css`
|
|
|
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
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
10
|
+
--ck-powered-by-background: #ffffff;
|
|
11
|
+
--ck-powered-by-border-color: #ffffff;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.ck.ck-powered-by > a > svg > path:first-child {
|
|
15
|
+
fill: #001234;
|
|
15
16
|
}
|
|
16
17
|
|
|
17
18
|
.ck {
|
|
@@ -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