@_sh/strapi-plugin-ckeditor 2.0.4 → 2.1.1
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 +24 -35
- package/admin/src/components/CKEditorIcon.js +3 -3
- package/admin/src/components/Input/CKEditor/configs/base.js +16 -7
- package/admin/src/components/Input/CKEditor/configs/blockBalloon.js +25 -0
- package/admin/src/components/Input/CKEditor/configs/index.js +4 -4
- package/admin/src/components/Input/CKEditor/configs/toolbarBalloon.js +17 -0
- package/admin/src/components/Input/CKEditor/configuration.js +2 -1
- package/admin/src/components/Input/CKEditor/plugins/StrapiUploadAdapter.js +1 -1
- package/admin/src/components/Input/CKEditor/theme/additional.js +0 -26
- package/admin/src/components/Input/MediaLib/index.js +23 -30
- package/admin/src/components/Input/index.js +3 -3
- package/admin/src/index.js +1 -1
- package/package.json +45 -41
- package/admin/src/components/Input/CKEditor/configs/blockBaloon.js +0 -25
- package/admin/src/components/Input/CKEditor/configs/toolbarBaloon.js +0 -17
package/README.md
CHANGED
|
@@ -18,9 +18,9 @@
|
|
|
18
18
|
|
|
19
19
|
* **Media library integration**
|
|
20
20
|
* **Supports responsive images**
|
|
21
|
-
* **Supports Strapi's theme switching with the
|
|
22
|
-
* **Supports i18n
|
|
23
|
-
* **Few predefined editor configs with the
|
|
21
|
+
* **Supports Strapi's theme switching with the ability to set a custom theme**
|
|
22
|
+
* **Supports i18n and different UI translations**
|
|
23
|
+
* **Few predefined editor configs with the ability to add custom ones**
|
|
24
24
|
* **Possible to add new plugins**
|
|
25
25
|
|
|
26
26
|
|
|
@@ -53,13 +53,13 @@ yarn build
|
|
|
53
53
|
|
|
54
54
|
## <a id="configuration"></a>⚙️ Configuration
|
|
55
55
|
___
|
|
56
|
-
The plugin
|
|
56
|
+
The plugin uses [**Strapi custom fields API**](https://docs.strapi.io/developer-docs/latest/development/custom-fields.html#registering-a-custom-field-on-the-server) and [**CKEditor dll build**](https://ckeditor.com/docs/ckeditor5/latest/installation/advanced/alternative-setups/dll-builds.html)
|
|
57
57
|
|
|
58
|
-
|
|
58
|
+
The plugin configuration should be defined in the `/config/ckeditor.txt` file.
|
|
59
59
|
|
|
60
60
|
It's highly recommended to explore [**the official ckeditor documentation**](https://ckeditor.com/docs/ckeditor5/latest/features/index.html)
|
|
61
61
|
|
|
62
|
-
Content
|
|
62
|
+
Content of ckeditor.txt will be passed into the script tag during the initialization process.
|
|
63
63
|
|
|
64
64
|
> 📂 Default configs: [**admin/src/components/Input/CKEditor/configs**](https://github.com/nshenderov/strapi-plugin-ckeditor/blob/master/admin/src/components/Input/CKEditor/configs)
|
|
65
65
|
|
|
@@ -70,12 +70,10 @@ Content from ckeditor.txt will be passed into a script tag through the initializ
|
|
|
70
70
|
```js
|
|
71
71
|
globalThis.CKEditorConfig = {
|
|
72
72
|
|
|
73
|
-
/* By default configs and theme
|
|
74
|
-
|
|
75
|
-
default configs and theme
|
|
76
|
-
|
|
77
|
-
allow you to redefine
|
|
78
|
-
default objects completely: */
|
|
73
|
+
/* By default custom configs and theme
|
|
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: */
|
|
79
77
|
|
|
80
78
|
//configsOverwrite:true,
|
|
81
79
|
//themeOverwrite:true,
|
|
@@ -94,7 +92,7 @@ globalThis.CKEditorConfig = {
|
|
|
94
92
|
},
|
|
95
93
|
custom:{
|
|
96
94
|
|
|
97
|
-
/* Styles for this specific editor.
|
|
95
|
+
/* Styles for this specific editor version.
|
|
98
96
|
This will be passed into the editor's parent container. */
|
|
99
97
|
|
|
100
98
|
styles:`
|
|
@@ -128,8 +126,8 @@ globalThis.CKEditorConfig = {
|
|
|
128
126
|
},
|
|
129
127
|
/* CKEditor configuration */
|
|
130
128
|
editorConfig:{
|
|
131
|
-
/*
|
|
132
|
-
|
|
129
|
+
/* You can find all available built-in plugins
|
|
130
|
+
in the admin/src/components/Input/CKEditor/configs/base.js */
|
|
133
131
|
plugins: [
|
|
134
132
|
CKEditor5.autoformat.Autoformat,
|
|
135
133
|
CKEditor5.basicStyles.Bold,
|
|
@@ -154,14 +152,14 @@ globalThis.CKEditorConfig = {
|
|
|
154
152
|
CKEditor5.strapiPlugins.StrapiUploadAdapter,
|
|
155
153
|
],
|
|
156
154
|
|
|
157
|
-
/* By default,
|
|
158
|
-
the language defined in this file
|
|
159
|
-
or the preferred language from strapi's user config
|
|
160
|
-
and 'en' as a fallback.
|
|
161
|
-
language.ui -> preferred language -> 'en' */
|
|
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' ) */
|
|
162
160
|
|
|
163
|
-
/* For content it will
|
|
164
|
-
or language.content defined here
|
|
161
|
+
/* For content it will chose the language based on i18n (if! ignorei18n)
|
|
162
|
+
or on language.content property defined here
|
|
165
163
|
and it will use UI language as a fallback.
|
|
166
164
|
ignorei18n ? language.content : i18n; -> language.ui */
|
|
167
165
|
|
|
@@ -223,7 +221,7 @@ globalThis.CKEditorConfig = {
|
|
|
223
221
|
}
|
|
224
222
|
```
|
|
225
223
|
|
|
226
|
-
> If you use the default (local) upload provider you should specify
|
|
224
|
+
> If you use the default (local) upload provider you should specify the `url` property in the `config/server.js` in order to get the full URL on uploaded files eg:
|
|
227
225
|
```js
|
|
228
226
|
module.exports = ({ env }) => ({
|
|
229
227
|
url: env("PUBLIC_URL", "http://localhost:1337"),
|
|
@@ -235,7 +233,7 @@ module.exports = ({ env }) => ({
|
|
|
235
233
|
});
|
|
236
234
|
```
|
|
237
235
|
|
|
238
|
-
> In order to display
|
|
236
|
+
> In order to display a content from an external source in your `admin` you should configure your middlewares.js [**check the docs about this**](https://docs.strapi.io/developer-docs/latest/setup-deployment-guides/configurations/required/middlewares.html)
|
|
239
237
|
|
|
240
238
|
## How to add plugins
|
|
241
239
|
|
|
@@ -434,15 +432,6 @@ yarn develop
|
|
|
434
432
|
|
|
435
433
|
## <a id="requirements"></a>⚠️ Requirements
|
|
436
434
|
___
|
|
437
|
-
Strapi **v4.
|
|
435
|
+
Strapi **v4.13.0+**
|
|
438
436
|
|
|
439
|
-
Node **>=
|
|
440
|
-
|
|
441
|
-
### 👍 This build includes some useful plugins based on these repos so thanks to them:
|
|
442
|
-
https://github.com/Roslovets-Inc/strapi-plugin-ckeditor5
|
|
443
|
-
|
|
444
|
-
https://github.com/leknoppix/ckeditor5-fullscreen
|
|
445
|
-
|
|
446
|
-
https://github.com/gtomato/ckeditor5-strapi-upload-plugin
|
|
447
|
-
|
|
448
|
-
https://github.com/pshurygin/ckeditor5-font-color
|
|
437
|
+
Node **>=18.0.0 <=20.x.x**
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import styled from "styled-components";
|
|
3
|
-
import { Icon } from "@strapi/design-system
|
|
4
|
-
import { Flex } from "@strapi/design-system
|
|
3
|
+
import { Icon } from "@strapi/design-system";
|
|
4
|
+
import { Flex } from "@strapi/design-system";
|
|
5
5
|
|
|
6
6
|
const IconBox = styled(Flex)`
|
|
7
7
|
background-color: #f0f0ff; /* primary100 */
|
|
@@ -43,4 +43,4 @@ const CKEditorIcon = () => (
|
|
|
43
43
|
</IconBox>
|
|
44
44
|
)
|
|
45
45
|
|
|
46
|
-
export default CKEditorIcon;
|
|
46
|
+
export default CKEditorIcon;
|
|
@@ -27,7 +27,9 @@ import ckeditor5LanguageDll from "@ckeditor/ckeditor5-language/build/language.js
|
|
|
27
27
|
import ckeditor5HighlightDll from "@ckeditor/ckeditor5-highlight/build/highlight.js";
|
|
28
28
|
import ckeditor5StyleDll from "@ckeditor/ckeditor5-style/build/style.js";
|
|
29
29
|
import ckeditor5MentionDll from "@ckeditor/ckeditor5-mention/build/mention.js";
|
|
30
|
-
import
|
|
30
|
+
import ckeditor5FontDll from "@ckeditor/ckeditor5-font/build/font.js";
|
|
31
|
+
import ckeditor5ShowBlocksDll from "@ckeditor/ckeditor5-show-blocks/build/show-blocks.js";
|
|
32
|
+
|
|
31
33
|
|
|
32
34
|
import sanitizeHtml from "sanitize-html";
|
|
33
35
|
|
|
@@ -52,10 +54,10 @@ const w = {
|
|
|
52
54
|
DocumentListProperties: window.CKEditor5.list.DocumentListProperties,
|
|
53
55
|
Essentials: window.CKEditor5.essentials.Essentials,
|
|
54
56
|
FindAndReplace: window.CKEditor5.findAndReplace.FindAndReplace,
|
|
55
|
-
FontBackgroundColor: window.CKEditor5.
|
|
56
|
-
FontColor: window.CKEditor5.
|
|
57
|
-
FontFamily: window.CKEditor5.
|
|
58
|
-
FontSize: window.CKEditor5.
|
|
57
|
+
FontBackgroundColor: window.CKEditor5.font.FontBackgroundColor,
|
|
58
|
+
FontColor: window.CKEditor5.font.FontColor,
|
|
59
|
+
FontFamily: window.CKEditor5.font.FontFamily,
|
|
60
|
+
FontSize: window.CKEditor5.font.FontSize,
|
|
59
61
|
GeneralHtmlSupport: window.CKEditor5.htmlSupport.GeneralHtmlSupport,
|
|
60
62
|
Heading: window.CKEditor5.heading.Heading,
|
|
61
63
|
// HeadingButtonsUI: window.CKEditor5.heading.HeadingButtonsUI,
|
|
@@ -84,6 +86,7 @@ const w = {
|
|
|
84
86
|
Paragraph: window.CKEditor5.paragraph.Paragraph,
|
|
85
87
|
// ParagraphButtonUI: window.CKEditor5.paragraph.ParagraphButtonUI,
|
|
86
88
|
PasteFromOffice: window.CKEditor5.pasteFromOffice.PasteFromOffice,
|
|
89
|
+
PictureEditing: window.CKEditor5.image.PictureEditing,
|
|
87
90
|
RemoveFormat: window.CKEditor5.removeFormat.RemoveFormat,
|
|
88
91
|
SourceEditing: window.CKEditor5.sourceEditing.SourceEditing,
|
|
89
92
|
SpecialCharacters: window.CKEditor5.specialCharacters.SpecialCharacters,
|
|
@@ -99,6 +102,7 @@ const w = {
|
|
|
99
102
|
Style: window.CKEditor5.style.Style,
|
|
100
103
|
Subscript: window.CKEditor5.basicStyles.Subscript,
|
|
101
104
|
Superscript: window.CKEditor5.basicStyles.Superscript,
|
|
105
|
+
ShowBlocks: window.CKEditor5.showBlocks.ShowBlocks,
|
|
102
106
|
Table: window.CKEditor5.table.Table,
|
|
103
107
|
TableCaption: window.CKEditor5.table.TableCaption,
|
|
104
108
|
TableCellProperties: window.CKEditor5.table.TableCellProperties,
|
|
@@ -462,6 +466,7 @@ w.MediaEmbed,
|
|
|
462
466
|
w.PageBreak,
|
|
463
467
|
w.Paragraph,
|
|
464
468
|
w.PasteFromOffice,
|
|
469
|
+
w.PictureEditing,
|
|
465
470
|
w.RemoveFormat,
|
|
466
471
|
w.SourceEditing,
|
|
467
472
|
w.SpecialCharacters,
|
|
@@ -476,6 +481,7 @@ w.Strikethrough,
|
|
|
476
481
|
w.Style,
|
|
477
482
|
w.Subscript,
|
|
478
483
|
w.Superscript,
|
|
484
|
+
w.ShowBlocks,
|
|
479
485
|
w.Table,
|
|
480
486
|
w.TableCaption,
|
|
481
487
|
w.TableCellProperties,
|
|
@@ -525,12 +531,13 @@ export const toolbarEditorConfig = {
|
|
|
525
531
|
'|',
|
|
526
532
|
'insertImage','mediaEmbed','strapiMediaLib','link','blockquote','insertTable','specialCharacters','htmlEmbed','codeBlock',
|
|
527
533
|
'|', 'horizontalLine', 'pageBreak', '|',
|
|
534
|
+
'|', 'showBlocks',
|
|
528
535
|
'|', 'undo', 'redo', '|',
|
|
529
536
|
],
|
|
530
537
|
|
|
531
538
|
}
|
|
532
539
|
|
|
533
|
-
export const
|
|
540
|
+
export const toolbarBalloonEditorConfig = {
|
|
534
541
|
plugins:[...basePlugins, w.BalloonToolbar],
|
|
535
542
|
...base,
|
|
536
543
|
toolbar: [
|
|
@@ -549,6 +556,7 @@ export const toolbarBaloonEditorConfig = {
|
|
|
549
556
|
'|',
|
|
550
557
|
'insertImage','mediaEmbed','strapiMediaLib','link','blockquote','insertTable','specialCharacters','htmlEmbed','codeBlock',
|
|
551
558
|
'|', 'horizontalLine', 'pageBreak', '|','SourceEditing',
|
|
559
|
+
'|', 'showBlocks',
|
|
552
560
|
'|', 'undo', 'redo', '|',
|
|
553
561
|
],
|
|
554
562
|
balloonToolbar: [
|
|
@@ -570,7 +578,7 @@ export const toolbarBaloonEditorConfig = {
|
|
|
570
578
|
]
|
|
571
579
|
}
|
|
572
580
|
|
|
573
|
-
export const
|
|
581
|
+
export const blockBalloonEditorConfig = {
|
|
574
582
|
plugins:[
|
|
575
583
|
...basePlugins.filter(({pluginName})=>
|
|
576
584
|
pluginName !== "SourceEditing" &&
|
|
@@ -606,6 +614,7 @@ export const blockBaloonEditorConfig = {
|
|
|
606
614
|
'indent',
|
|
607
615
|
'|',
|
|
608
616
|
'insertImage','strapiMediaLib','link','blockquote','insertTable',
|
|
617
|
+
'|', 'showBlocks',
|
|
609
618
|
'|', 'undo', 'redo', '|',
|
|
610
619
|
],
|
|
611
620
|
balloonToolbar: [
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { blockBalloonEditorConfig } from "./base";
|
|
2
|
+
|
|
3
|
+
export const blockBalloonEditor = {
|
|
4
|
+
blockBalloon: {
|
|
5
|
+
styles: `
|
|
6
|
+
.ck-content{
|
|
7
|
+
border-radius:4px !important;
|
|
8
|
+
}
|
|
9
|
+
.ck-sticky-panel{
|
|
10
|
+
display:none !important;
|
|
11
|
+
}
|
|
12
|
+
`,
|
|
13
|
+
field: {
|
|
14
|
+
key: "blockBalloon",
|
|
15
|
+
value: "blockBalloon",
|
|
16
|
+
metadatas: {
|
|
17
|
+
intlLabel: {
|
|
18
|
+
id: "ckeditor.preset.blockBalloon.label",
|
|
19
|
+
defaultMessage: "Block balloon version",
|
|
20
|
+
},
|
|
21
|
+
},
|
|
22
|
+
},
|
|
23
|
+
editorConfig: blockBalloonEditorConfig,
|
|
24
|
+
},
|
|
25
|
+
};
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { toolbarEditor } from './toolbar';
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
2
|
+
import { toolbarBalloonEditor } from './toolbarBalloon';
|
|
3
|
+
import { blockBalloonEditor } from './blockBalloon';
|
|
4
4
|
|
|
5
5
|
const baseConfigs = {
|
|
6
6
|
...toolbarEditor,
|
|
7
|
-
...
|
|
8
|
-
...
|
|
7
|
+
...toolbarBalloonEditor,
|
|
8
|
+
...blockBalloonEditor
|
|
9
9
|
}
|
|
10
10
|
|
|
11
11
|
export default baseConfigs;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { toolbarBalloonEditorConfig } from "./base";
|
|
2
|
+
|
|
3
|
+
export const toolbarBalloonEditor = {
|
|
4
|
+
toolbarBalloon: {
|
|
5
|
+
field: {
|
|
6
|
+
key: "toolbarBalloon",
|
|
7
|
+
value: "toolbarBalloon",
|
|
8
|
+
metadatas: {
|
|
9
|
+
intlLabel: {
|
|
10
|
+
id: "ckeditor.preset.toolbarBalloon.label",
|
|
11
|
+
defaultMessage: "Toolbar balloon version",
|
|
12
|
+
},
|
|
13
|
+
},
|
|
14
|
+
},
|
|
15
|
+
editorConfig: toolbarBalloonEditorConfig,
|
|
16
|
+
},
|
|
17
|
+
};
|
|
@@ -36,6 +36,7 @@ const importLang = async (config, language) => {
|
|
|
36
36
|
{ name: "SourceEditing", module: "ckeditor5-source-editing" },
|
|
37
37
|
{ name: "Highlight", module: "ckeditor5-highlight" },
|
|
38
38
|
{ name: "Style", module: "ckeditor5-style" },
|
|
39
|
+
{ name: "ShowBlocks", module: "ckeditor5-show-blocks" }
|
|
39
40
|
];
|
|
40
41
|
|
|
41
42
|
const basicStylesPlugin = [
|
|
@@ -73,7 +74,7 @@ const importLang = async (config, language) => {
|
|
|
73
74
|
).catch(() => null);
|
|
74
75
|
if (configPluginNames.some((p) => fontPlugin.includes(p)))
|
|
75
76
|
await import(
|
|
76
|
-
/* webpackMode: "lazy-once" */ `@
|
|
77
|
+
/* webpackMode: "lazy-once" */ `@ckeditor/ckeditor5-font/build/translations/${language}.js`
|
|
77
78
|
).catch(() => null);
|
|
78
79
|
};
|
|
79
80
|
|
|
@@ -148,7 +148,7 @@ class Adapter {
|
|
|
148
148
|
let keys = Object.keys(formats).sort(
|
|
149
149
|
(a, b) => formats[a].width - formats[b].width
|
|
150
150
|
);
|
|
151
|
-
keys.map((k) => (urls[formats[k].width] = backendUrl + formats[k].url));
|
|
151
|
+
keys.map((k) => (urls[formats[k].width] = provider !== 'local' ? url : backendUrl + formats[k].url));
|
|
152
152
|
resolve({ alt: alternativeText || name, urls: urls });
|
|
153
153
|
} else {
|
|
154
154
|
resolve(
|
|
@@ -32,32 +32,6 @@ export const additional = css`
|
|
|
32
32
|
border-radius: 2px;
|
|
33
33
|
}
|
|
34
34
|
|
|
35
|
-
/* --- color-picker --- */
|
|
36
|
-
|
|
37
|
-
.ck[dir=rtl] .ck-color-input{
|
|
38
|
-
margin: 0 8px 8px 0 !important;
|
|
39
|
-
padding: 3px 5px 0 0 !important;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
.ck .ck-color-input{
|
|
43
|
-
margin: 0 0 8px 8px ;
|
|
44
|
-
padding: 3px 0 0 6px;
|
|
45
|
-
border-radius:2px ;
|
|
46
|
-
font-size:.77rem !important;
|
|
47
|
-
width: 58px !important;
|
|
48
|
-
}
|
|
49
|
-
.ck .ck-color-picker{
|
|
50
|
-
margin: 0 3px 8px 3px;
|
|
51
|
-
border-radius:2px !important;
|
|
52
|
-
width: 27px !important;
|
|
53
|
-
}
|
|
54
|
-
.ck .ck-color-picker-save{
|
|
55
|
-
margin: 0 0 8px 0;
|
|
56
|
-
border-radius:2px !important;
|
|
57
|
-
width:27px !important;
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
|
|
61
35
|
/* ---- Style feature config ------------------------------------------------------ */
|
|
62
36
|
|
|
63
37
|
:root {
|
|
@@ -9,30 +9,29 @@ const MediaLib = ({ isOpen, onChange, onToggle, editor, uploadConfig: { responsi
|
|
|
9
9
|
const handleChangeAssets = (assets) => {
|
|
10
10
|
let newValue = "";
|
|
11
11
|
|
|
12
|
-
assets.map(({name, url, alt, formats, mime}) => {
|
|
13
|
-
|
|
12
|
+
assets.map(({ name, url, alt, formats, mime, width, height }) => {
|
|
14
13
|
if (mime.includes("image")) {
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
}
|
|
24
|
-
|
|
14
|
+
if (formats && responsiveDimensions) {
|
|
15
|
+
let set = "";
|
|
16
|
+
let keys = Object.keys(formats).sort((a, b) => formats[a].width - formats[b].width);
|
|
17
|
+
keys.map((k) => (set += prefixFileUrlWithBackendUrl(formats[k].url) + ` ${formats[k].width}w,`));
|
|
18
|
+
newValue += `<img src="${url}" alt="${alt}" width="${width}" height="${height}" srcset="${set}" />`;
|
|
19
|
+
} else {
|
|
20
|
+
newValue += `<img src="${url}" alt="${alt}" width="${width}" height="${height}" />`;
|
|
21
|
+
}
|
|
25
22
|
} else if (mime.includes("application/pdf")) {
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
23
|
+
newValue = `<a href="${prefixFileUrlWithBackendUrl(url)}" download="${name}">${name || "Download PDF"}</a>`;
|
|
24
|
+
} else if (mime.includes("video")) {
|
|
25
|
+
newValue = `
|
|
26
|
+
<video class="video" controls width="500px">
|
|
27
|
+
<source src="${prefixFileUrlWithBackendUrl(url)}" type="${mime}" />
|
|
28
|
+
<video/>`;
|
|
29
29
|
}
|
|
30
|
-
// Handle videos and other type of files by adding some code
|
|
31
30
|
});
|
|
32
31
|
|
|
33
|
-
const viewFragment = editor.data.processor.toView(
|
|
34
|
-
const modelFragment = editor.data.toModel(
|
|
35
|
-
editor.model.insertContent(
|
|
32
|
+
const viewFragment = editor.data.processor.toView(newValue);
|
|
33
|
+
const modelFragment = editor.data.toModel(viewFragment);
|
|
34
|
+
editor.model.insertContent(modelFragment);
|
|
36
35
|
|
|
37
36
|
onToggle();
|
|
38
37
|
};
|
|
@@ -43,25 +42,19 @@ const MediaLib = ({ isOpen, onChange, onToggle, editor, uploadConfig: { responsi
|
|
|
43
42
|
alt: f.alternativeText || f.name,
|
|
44
43
|
url: prefixFileUrlWithBackendUrl(f.url),
|
|
45
44
|
mime: f.mime,
|
|
46
|
-
formats: f.formats
|
|
45
|
+
formats: f.formats,
|
|
46
|
+
width: f.width,
|
|
47
|
+
height: f.height
|
|
47
48
|
}));
|
|
48
49
|
|
|
49
50
|
handleChangeAssets(formattedFiles);
|
|
50
51
|
};
|
|
51
52
|
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
53
|
if (!isOpen) {
|
|
56
54
|
return null;
|
|
57
55
|
}
|
|
58
56
|
|
|
59
|
-
return
|
|
60
|
-
<MediaLibraryDialog
|
|
61
|
-
onClose={onToggle}
|
|
62
|
-
onSelectAssets={handleSelectAssets}
|
|
63
|
-
/>
|
|
64
|
-
);
|
|
57
|
+
return <MediaLibraryDialog onClose={onToggle} onSelectAssets={handleSelectAssets} />;
|
|
65
58
|
};
|
|
66
59
|
|
|
67
60
|
MediaLib.defaultProps = {
|
|
@@ -76,4 +69,4 @@ MediaLib.propTypes = {
|
|
|
76
69
|
onToggle: PropTypes.func,
|
|
77
70
|
};
|
|
78
71
|
|
|
79
|
-
export default MediaLib;
|
|
72
|
+
export default MediaLib;
|
|
@@ -2,8 +2,8 @@ import React from "react";
|
|
|
2
2
|
import PropTypes from "prop-types";
|
|
3
3
|
import {default as CKEditor} from "./CKEditor";
|
|
4
4
|
import { useIntl } from "react-intl";
|
|
5
|
-
import { Field, FieldHint, FieldError, FieldLabel } from "@strapi/design-system
|
|
6
|
-
import { Stack } from "@strapi/design-system
|
|
5
|
+
import { Field, FieldHint, FieldError, FieldLabel } from "@strapi/design-system";
|
|
6
|
+
import { Stack } from "@strapi/design-system";
|
|
7
7
|
|
|
8
8
|
const Wysiwyg = ({ name, attribute, onChange, value, intlLabel, labelAction, disabled, error, description, required }) => {
|
|
9
9
|
const { formatMessage } = useIntl();
|
|
@@ -45,4 +45,4 @@ Wysiwyg.propTypes = {
|
|
|
45
45
|
required: PropTypes.bool,
|
|
46
46
|
value: PropTypes.string,
|
|
47
47
|
};
|
|
48
|
-
export default Wysiwyg;
|
|
48
|
+
export default Wysiwyg;
|
package/admin/src/index.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@_sh/strapi-plugin-ckeditor",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.1.1",
|
|
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,47 +25,51 @@
|
|
|
25
25
|
"strapi-server.js"
|
|
26
26
|
],
|
|
27
27
|
"dependencies": {
|
|
28
|
-
"ckeditor5": "^
|
|
29
|
-
"@ckeditor/ckeditor5-
|
|
30
|
-
"@ckeditor/ckeditor5-
|
|
31
|
-
"@ckeditor/ckeditor5-
|
|
32
|
-
"@ckeditor/ckeditor5-
|
|
33
|
-
"@ckeditor/ckeditor5-
|
|
34
|
-
"@ckeditor/ckeditor5-
|
|
35
|
-
"@ckeditor/ckeditor5-
|
|
36
|
-
"@ckeditor/ckeditor5-
|
|
37
|
-
"@ckeditor/ckeditor5-
|
|
38
|
-
"@ckeditor/ckeditor5-
|
|
39
|
-
"@ckeditor/ckeditor5-
|
|
40
|
-
"@ckeditor/ckeditor5-
|
|
41
|
-
"@ckeditor/ckeditor5-
|
|
42
|
-
"@ckeditor/ckeditor5-
|
|
43
|
-
"@ckeditor/ckeditor5-
|
|
44
|
-
"@ckeditor/ckeditor5-
|
|
45
|
-
"@ckeditor/ckeditor5-
|
|
46
|
-
"@ckeditor/ckeditor5-
|
|
47
|
-
"@ckeditor/ckeditor5-
|
|
48
|
-
"@ckeditor/ckeditor5-
|
|
49
|
-
"@ckeditor/ckeditor5-
|
|
50
|
-
"@ckeditor/ckeditor5-
|
|
51
|
-
"@ckeditor/ckeditor5-
|
|
52
|
-
"@ckeditor/ckeditor5-
|
|
53
|
-
"@ckeditor/ckeditor5-
|
|
54
|
-
"@ckeditor/ckeditor5-
|
|
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
|
-
"
|
|
65
|
-
"@
|
|
28
|
+
"@ckeditor/ckeditor5-alignment": "^41.0.0",
|
|
29
|
+
"@ckeditor/ckeditor5-autoformat": "^41.0.0",
|
|
30
|
+
"@ckeditor/ckeditor5-autosave": "^41.0.0",
|
|
31
|
+
"@ckeditor/ckeditor5-basic-styles": "^41.0.0",
|
|
32
|
+
"@ckeditor/ckeditor5-block-quote": "^41.0.0",
|
|
33
|
+
"@ckeditor/ckeditor5-code-block": "^41.0.0",
|
|
34
|
+
"@ckeditor/ckeditor5-easy-image": "^41.0.0",
|
|
35
|
+
"@ckeditor/ckeditor5-editor-classic": "^41.0.0",
|
|
36
|
+
"@ckeditor/ckeditor5-essentials": "^41.0.0",
|
|
37
|
+
"@ckeditor/ckeditor5-find-and-replace": "^41.0.0",
|
|
38
|
+
"@ckeditor/ckeditor5-heading": "^41.0.0",
|
|
39
|
+
"@ckeditor/ckeditor5-highlight": "^41.0.0",
|
|
40
|
+
"@ckeditor/ckeditor5-horizontal-line": "^41.0.0",
|
|
41
|
+
"@ckeditor/ckeditor5-html-embed": "^41.0.0",
|
|
42
|
+
"@ckeditor/ckeditor5-html-support": "^41.0.0",
|
|
43
|
+
"@ckeditor/ckeditor5-image": "^41.0.0",
|
|
44
|
+
"@ckeditor/ckeditor5-font": "^41.0.0",
|
|
45
|
+
"@ckeditor/ckeditor5-indent": "^41.0.0",
|
|
46
|
+
"@ckeditor/ckeditor5-language": "^41.0.0",
|
|
47
|
+
"@ckeditor/ckeditor5-link": "^41.0.0",
|
|
48
|
+
"@ckeditor/ckeditor5-list": "^41.0.0",
|
|
49
|
+
"@ckeditor/ckeditor5-media-embed": "^41.0.0",
|
|
50
|
+
"@ckeditor/ckeditor5-mention": "^41.0.0",
|
|
51
|
+
"@ckeditor/ckeditor5-page-break": "^41.0.0",
|
|
52
|
+
"@ckeditor/ckeditor5-paragraph": "^41.0.0",
|
|
53
|
+
"@ckeditor/ckeditor5-paste-from-office": "^41.0.0",
|
|
54
|
+
"@ckeditor/ckeditor5-remove-format": "^41.0.0",
|
|
55
|
+
"@ckeditor/ckeditor5-source-editing": "^41.0.0",
|
|
56
|
+
"@ckeditor/ckeditor5-special-characters": "^41.0.0",
|
|
57
|
+
"@ckeditor/ckeditor5-style": "^41.0.0",
|
|
58
|
+
"@ckeditor/ckeditor5-table": "^41.0.0",
|
|
59
|
+
"@ckeditor/ckeditor5-theme-lark": "^41.0.0",
|
|
60
|
+
"@ckeditor/ckeditor5-typing": "^41.0.0",
|
|
61
|
+
"@ckeditor/ckeditor5-upload": "^41.0.0",
|
|
62
|
+
"@ckeditor/ckeditor5-word-count": "^41.0.0",
|
|
63
|
+
"@ckeditor/ckeditor5-show-blocks": "^41.0.0",
|
|
64
|
+
"ckeditor5": "^41.0.0",
|
|
65
|
+
"@ckeditor/ckeditor5-react": "^6.2.0",
|
|
66
|
+
"@strapi/design-system": "^1.10.1",
|
|
67
|
+
"lodash": "^4.17.21",
|
|
68
|
+
"prop-types": "^15.8.1",
|
|
69
|
+
"sanitize-html": "^2.10.0"
|
|
66
70
|
},
|
|
67
71
|
"peerDependencies": {
|
|
68
|
-
"@strapi/strapi": "^4.
|
|
72
|
+
"@strapi/strapi": "^4.13.0"
|
|
69
73
|
},
|
|
70
74
|
"author": {
|
|
71
75
|
"name": "nshenderov"
|
|
@@ -79,7 +83,7 @@
|
|
|
79
83
|
"test": "echo \"Error: no tests specified\" && exit 1"
|
|
80
84
|
},
|
|
81
85
|
"engines": {
|
|
82
|
-
"node": ">=
|
|
86
|
+
"node": ">=18.0.0 <=20.x.x",
|
|
83
87
|
"npm": ">=6.0.0"
|
|
84
88
|
},
|
|
85
89
|
"license": "MIT"
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import { blockBaloonEditorConfig } from "./base";
|
|
2
|
-
|
|
3
|
-
export const blockBaloonEditor = {
|
|
4
|
-
blockBaloon: {
|
|
5
|
-
styles: `
|
|
6
|
-
.ck-content{
|
|
7
|
-
border-radius:4px !important;
|
|
8
|
-
}
|
|
9
|
-
.ck-sticky-panel{
|
|
10
|
-
display:none !important;
|
|
11
|
-
}
|
|
12
|
-
`,
|
|
13
|
-
field: {
|
|
14
|
-
key: "blockBaloon",
|
|
15
|
-
value: "blockBaloon",
|
|
16
|
-
metadatas: {
|
|
17
|
-
intlLabel: {
|
|
18
|
-
id: "ckeditor.preset.blockBaloon.label",
|
|
19
|
-
defaultMessage: "Block baloon version",
|
|
20
|
-
},
|
|
21
|
-
},
|
|
22
|
-
},
|
|
23
|
-
editorConfig: blockBaloonEditorConfig,
|
|
24
|
-
},
|
|
25
|
-
};
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import { toolbarBaloonEditorConfig } from "./base";
|
|
2
|
-
|
|
3
|
-
export const toolbarBaloonEditor = {
|
|
4
|
-
toolbarBaloon: {
|
|
5
|
-
field: {
|
|
6
|
-
key: "toolbarBaloon",
|
|
7
|
-
value: "toolbarBaloon",
|
|
8
|
-
metadatas: {
|
|
9
|
-
intlLabel: {
|
|
10
|
-
id: "ckeditor.preset.toolbarBaloon.label",
|
|
11
|
-
defaultMessage: "Toolbar baloon version",
|
|
12
|
-
},
|
|
13
|
-
},
|
|
14
|
-
},
|
|
15
|
-
editorConfig: toolbarBaloonEditorConfig,
|
|
16
|
-
},
|
|
17
|
-
};
|