diff --git a/README.md b/README.md
index 123b169..a1315db 100644
--- a/README.md
+++ b/README.md
@@ -34,26 +34,16 @@
## 🔧 Installation
-___
+
Add the package to your Strapi application:
```bash
-npm install @_sh/strapi-plugin-ckeditor
+yarn add @_sh/strapi-plugin-ckeditor@strapi-v4-latest
```
-or
-
-```bash
-yarn add @_sh/strapi-plugin-ckeditor
-```
+Then, build the app:
-Then build the app:
-```bash
-npm run build
-```
-
-or
```bash
yarn build
```
@@ -74,21 +64,19 @@ yarn build
## ⚙️ Configuration
-___
+
> It is highly recommended to explore [**the official CKEditor5 documentation**](https://ckeditor.com/docs/ckeditor5/latest/features/index.html) and [**the Strapi Custom Field API**](https://docs.strapi.io/developer-docs/latest/development/custom-fields.html#registering-a-custom-field-on-the-server)
>
> To display content from external sources, such as images or videos, in your admin panel, you need to configure your `middlewares.js` file. [**Check the official documentation for details.**](https://docs.strapi.io/dev-docs/configurations/middlewares#security)
-The plugin configuration should be defined in `your-app/config/ckeditor.js|ts`
-
-By default, the plugin provides one preset, which can be modified in the config file.
+The plugin configuration should be defined in `your-app/config/ckeditor.js` or in `ckeditor.ts` if you are using TypeScript in your project.
-You can also add new presets in the config file.
+By default, the plugin provides one default preset that can be modified in the config file, and you can expand the preset set as needed.
-The plugin exposes all CKEditor packages to the global variable SH_CKE.
+The plugin exposes all default CKEditor packages to the global variable `SH_CKE`.
-The config file must define a function called CKEConfig that returns the configuration object.
+The config file must define a function called `CKEConfig` that returns the configuration object.
The structure of the configuration object is as follows:
@@ -103,7 +91,7 @@ The structure of the configuration object is as follows:
editorConfig:{...},
},
...
- }
+ },
theme:{
common:string,
light:string,
@@ -148,100 +136,116 @@ language:{
The language determination follows this logic:
- Plugin UI language:
-`language.ui -> preferred language -> 'en'`
+`language.ui || strapi admin preferred language || 'en'`
- Content language:
-`ignorei18n ? language.content : i18n -> language.ui`
+`(ignorei18n ? language.content : i18n) || language.ui`
+
+### Configuration examples
-**Example of adding a new editor configuration:**
+Adding a new preset:
ckeditor.js
```js
const CKEConfig = () => ({
- presets:{
- myCustomPreset:{
- field: {
- key: "myCustomPreset",
- value: "myCustomPreset",
- metadatas: {
- intlLabel: {
- id: "ckeditor5.preset.myCustomPreset.label",
- defaultMessage: "My custom preset",
- },
- },
- },
- editorConfig:{
- plugins: [
- SH_CKE.Autoformat,
- SH_CKE.Bold,
- SH_CKE.Italic,
- SH_CKE.Essentials,
- SH_CKE.Heading,
- SH_CKE.Image,
- SH_CKE.ImageCaption,
- SH_CKE.ImageStyle,
- SH_CKE.ImageToolbar,
- SH_CKE.ImageUpload,
- SH_CKE.Indent,
- SH_CKE.Link,
- SH_CKE.List,
- SH_CKE.Paragraph,
- SH_CKE.PasteFromOffice,
- SH_CKE.Table,
- SH_CKE.TableToolbar,
- SH_CKE.TableColumnResize,
- SH_CKE.TableCaption,
- SH_CKE.StrapiMediaLib,
- SH_CKE.StrapiUploadAdapter,
- ],
- toolbar: [
- 'heading',
- '|',
- 'bold', 'italic', 'link', 'bulletedList', 'numberedList',
- '|',
- 'strapiMediaLib', 'insertTable',
- '|',
- 'undo', 'redo'
- ],
- heading: {
- options: [
- { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
- { model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
- { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' },
- { model: 'heading3', view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3' },
- { model: 'heading4', view: 'h4', title: 'Heading 4', class: 'ck-heading_heading4' },
- ]
- },
- image: {
- toolbar: [
- 'imageStyle:inline',
- 'imageStyle:block',
- 'imageStyle:side',
- '|',
- 'toggleImageCaption',
- 'imageTextAlternative'
- ]
+ presets: {
+ markdown:{
+ field: {
+ key: "markdown",
+ value: "markdown",
+ metadatas: {
+ intlLabel: {
+ id: "ckeditor.preset.markdown.label",
+ defaultMessage: "Markdown output",
},
- table: {
- contentToolbar: [
- 'tableColumn',
- 'tableRow',
- 'mergeTableCells',
- '|',
- 'toggleTableCaption'
- ]
- }
- }
- }
+ },
+ },
+ editorConfig:{
+ placeholder: 'Markdown editor',
+ plugins: [
+ globalThis.SH_CKE.Essentials,
+ globalThis.SH_CKE.Autoformat,
+ globalThis.SH_CKE.BlockQuote,
+ globalThis.SH_CKE.Bold,
+ globalThis.SH_CKE.Heading,
+ globalThis.SH_CKE.Image,
+ globalThis.SH_CKE.ImageCaption,
+ globalThis.SH_CKE.ImageStyle,
+ globalThis.SH_CKE.ImageToolbar,
+ globalThis.SH_CKE.ImageUpload,
+ globalThis.SH_CKE.Indent,
+ globalThis.SH_CKE.Italic,
+ globalThis.SH_CKE.Link,
+ globalThis.SH_CKE.List,
+ globalThis.SH_CKE.MediaEmbed,
+ globalThis.SH_CKE.Paragraph,
+ globalThis.SH_CKE.Table,
+ globalThis.SH_CKE.TableToolbar,
+ globalThis.SH_CKE.SourceEditing,
+ globalThis.SH_CKE.StrapiMediaLib,
+ globalThis.SH_CKE.StrapiUploadAdapter,
+ globalThis.SH_CKE.Markdown,
+ globalThis.SH_CKE.Code,
+ globalThis.SH_CKE.CodeBlock,
+ globalThis.SH_CKE.TodoList,
+ globalThis.SH_CKE.Strikethrough,
+ globalThis.SH_CKE.HorizontalLine
+ ],
+ toolbar: {
+ items: [
+ 'heading',
+ '|',
+ 'bold',
+ 'italic',
+ 'strikethrough',
+ 'link',
+ '|',
+ 'bulletedList',
+ 'numberedList',
+ 'todoList',
+ '|',
+ 'code',
+ 'codeBlock',
+ '|',
+ 'uploadImage',
+ 'strapiMediaLib',
+ 'blockQuote',
+ 'horizontalLine',
+ '-',
+ 'sourceEditing',
+ '|',
+ 'outdent',
+ 'indent',
+ '|',
+ 'undo',
+ 'redo'
+ ],
+ shouldNotGroupWhenFull: true
+ },
+ image: {
+ toolbar: [ 'imageStyle:inline', 'imageStyle:block', 'imageStyle:side', '|', 'toggleImageCaption', 'imageTextAlternative' ]
+ },
+ codeBlock: {
+ languages: [
+ { language: 'css', label: 'CSS' },
+ { language: 'html', label: 'HTML' },
+ { language: 'javascript', label: 'JavaScript' },
+ { language: 'php', label: 'PHP' }
+ ]
+ },
+ }
+ },
}
})
```
-**Example of changing buttons, modifying the plugin list, and adding styles in the default preset:**
+---
+
+Changing toolbar buttons, modifying the plugin list, adding styles to the default preset:
ckeditor.js
@@ -269,19 +273,19 @@ const CKEConfig = () => ({
`,
editorConfig:{
plugins: [
- SH_CKE.Bold,
- SH_CKE.Italic,
- SH_CKE.Essentials,
- SH_CKE.Heading,
- SH_CKE.Image,
- SH_CKE.ImageCaption,
- SH_CKE.ImageStyle,
- SH_CKE.ImageToolbar,
- SH_CKE.Link,
- SH_CKE.List,
- SH_CKE.Paragraph,
- SH_CKE.StrapiMediaLib,
- SH_CKE.StrapiUploadAdapter,
+ globalThis.SH_CKE.Bold,
+ globalThis.SH_CKE.Italic,
+ globalThis.SH_CKE.Essentials,
+ globalThis.SH_CKE.Heading,
+ globalThis.SH_CKE.Image,
+ globalThis.SH_CKE.ImageCaption,
+ globalThis.SH_CKE.ImageStyle,
+ globalThis.SH_CKE.ImageToolbar,
+ globalThis.SH_CKE.Link,
+ globalThis.SH_CKE.List,
+ globalThis.SH_CKE.Paragraph,
+ globalThis.SH_CKE.StrapiMediaLib,
+ globalThis.SH_CKE.StrapiUploadAdapter,
],
toolbar: [
'heading',
@@ -300,17 +304,15 @@ const CKEConfig = () => ({
+---
> 📂 Default preset: [**admin/src/Input/presets/default.js**](https://github.com/nshenderov/strapi-plugin-ckeditor/blob/3.x.x/admin/src/Input/presets/default.js)
>
> 📂 Default theme: [**admin/src/Input/theme**](https://github.com/nshenderov/strapi-plugin-ckeditor/blob/3.x.x/admin/src/Input/theme)
+### Adding plugins
-## Adding plugins
-
-___
-
-Your plugin must be available in the `global`.
+Your plugin must be available in the `global` object.
**Example of adding the Timestamp plugin:**
@@ -319,14 +321,14 @@ Your plugin must be available in the `global`.
```js
// your-app/src/admin/timestamp.js
-class Timestamp extends SH_CKE.Plugin {
+class Timestamp extends globalThis.SH_CKE.Plugin {
init() {
const editor = this.editor;
// The button must be registered among the UI components of the editor
// to be displayed in the toolbar.
editor.ui.componentFactory.add( 'timestamp', () => {
// The button will be an instance of ButtonView.
- const button = new SH_CKE.ButtonView();
+ const button = new globalThis.SH_CKE.ButtonView();
button.set( {
label: 'Timestamp',
@@ -394,28 +396,28 @@ const CKEConfig = () => ({
},
editorConfig:{
plugins: [
- Timestamp,
- SH_CKE.Autoformat,
- SH_CKE.Bold,
- SH_CKE.Italic,
- SH_CKE.Essentials,
- SH_CKE.Heading,
- SH_CKE.Image,
- SH_CKE.ImageCaption,
- SH_CKE.ImageStyle,
- SH_CKE.ImageToolbar,
- SH_CKE.ImageUpload,
- SH_CKE.Indent,
- SH_CKE.Link,
- SH_CKE.List,
- SH_CKE.Paragraph,
- SH_CKE.PasteFromOffice,
- SH_CKE.Table,
- SH_CKE.TableToolbar,
- SH_CKE.TableColumnResize,
- SH_CKE.TableCaption,
- SH_CKE.StrapiMediaLib,
- SH_CKE.StrapiUploadAdapter,
+ globalThis.Timestamp,
+ globalThis.SH_CKE.Autoformat,
+ globalThis.SH_CKE.Bold,
+ globalThis.SH_CKE.Italic,
+ globalThis.SH_CKE.Essentials,
+ globalThis.SH_CKE.Heading,
+ globalThis.SH_CKE.Image,
+ globalThis.SH_CKE.ImageCaption,
+ globalThis.SH_CKE.ImageStyle,
+ globalThis.SH_CKE.ImageToolbar,
+ globalThis.SH_CKE.ImageUpload,
+ globalThis.SH_CKE.Indent,
+ globalThis.SH_CKE.Link,
+ globalThis.SH_CKE.List,
+ globalThis.SH_CKE.Paragraph,
+ globalThis.SH_CKE.PasteFromOffice,
+ globalThis.SH_CKE.Table,
+ globalThis.SH_CKE.TableToolbar,
+ globalThis.SH_CKE.TableColumnResize,
+ globalThis.SH_CKE.TableCaption,
+ globalThis.SH_CKE.StrapiMediaLib,
+ globalThis.SH_CKE.StrapiUploadAdapter,
],
toolbar: [
'timestamp',
@@ -440,30 +442,24 @@ const CKEConfig = () => ({
4. Then rebuild the application:
```bash
-npm run build
-```
-
-or
-```bash
yarn build
```
-
-**Alternatively, you can define your plugin like this:**
+**💡 Alternatively, you can define your plugin like this:**
ckeditor.js
```js
const CKEConfig = () => {
- class Timestamp extends SH_CKE.Plugin {
+ class Timestamp extends globalThis.SH_CKE.Plugin {
init() {
const editor = this.editor;
// The button must be registered among the UI components of the editor
// to be displayed in the toolbar.
editor.ui.componentFactory.add("timestamp", () => {
// The button will be an instance of ButtonView.
- const button = new SH_CKE.ButtonView();
+ const button = new globalThis.SH_CKE.ButtonView();
button.set({
label: "Timestamp",
@@ -502,27 +498,27 @@ const CKEConfig = () => {
editorConfig:{
plugins: [
Timestamp,
- SH_CKE.Autoformat,
- SH_CKE.Bold,
- SH_CKE.Italic,
- SH_CKE.Essentials,
- SH_CKE.Heading,
- SH_CKE.Image,
- SH_CKE.ImageCaption,
- SH_CKE.ImageStyle,
- SH_CKE.ImageToolbar,
- SH_CKE.ImageUpload,
- SH_CKE.Indent,
- SH_CKE.Link,
- SH_CKE.List,
- SH_CKE.Paragraph,
- SH_CKE.PasteFromOffice,
- SH_CKE.Table,
- SH_CKE.TableToolbar,
- SH_CKE.TableColumnResize,
- SH_CKE.TableCaption,
- SH_CKE.StrapiMediaLib,
- SH_CKE.StrapiUploadAdapter,
+ globalThis.SH_CKE.Autoformat,
+ globalThis.SH_CKE.Bold,
+ globalThis.SH_CKE.Italic,
+ globalThis.SH_CKE.Essentials,
+ globalThis.SH_CKE.Heading,
+ globalThis.SH_CKE.Image,
+ globalThis.SH_CKE.ImageCaption,
+ globalThis.SH_CKE.ImageStyle,
+ globalThis.SH_CKE.ImageToolbar,
+ globalThis.SH_CKE.ImageUpload,
+ globalThis.SH_CKE.Indent,
+ globalThis.SH_CKE.Link,
+ globalThis.SH_CKE.List,
+ globalThis.SH_CKE.Paragraph,
+ globalThis.SH_CKE.PasteFromOffice,
+ globalThis.SH_CKE.Table,
+ globalThis.SH_CKE.TableToolbar,
+ globalThis.SH_CKE.TableColumnResize,
+ globalThis.SH_CKE.TableCaption,
+ globalThis.SH_CKE.StrapiMediaLib,
+ globalThis.SH_CKE.StrapiUploadAdapter,
],
toolbar: [
'timestamp',
@@ -545,6 +541,7 @@ const CKEConfig = () => {
+
## 🛠 Contributing
___
@@ -599,6 +596,7 @@ yarn build
yarn develop
```
+
## ✈️ Migration
### From v2 to v3
@@ -633,27 +631,27 @@ const CKEConfig = () => ({
},
editorConfig:{
plugins: [
- SH_CKE.Autoformat,
- SH_CKE.Bold,
- SH_CKE.Italic,
- SH_CKE.Essentials,
- SH_CKE.Heading,
- SH_CKE.Image,
- SH_CKE.ImageCaption,
- SH_CKE.ImageStyle,
- SH_CKE.ImageToolbar,
- SH_CKE.ImageUpload,
- SH_CKE.Indent,
- SH_CKE.Link,
- SH_CKE.List,
- SH_CKE.Paragraph,
- SH_CKE.PasteFromOffice,
- SH_CKE.Table,
- SH_CKE.TableToolbar,
- SH_CKE.TableColumnResize,
- SH_CKE.TableCaption,
- SH_CKE.StrapiMediaLib,
- SH_CKE.StrapiUploadAdapter,
+ globalThis.SH_CKE.Autoformat,
+ globalThis.SH_CKE.Bold,
+ globalThis.SH_CKE.Italic,
+ globalThis.SH_CKE.Essentials,
+ globalThis.SH_CKE.Heading,
+ globalThis.SH_CKE.Image,
+ globalThis.SH_CKE.ImageCaption,
+ globalThis.SH_CKE.ImageStyle,
+ globalThis.SH_CKE.ImageToolbar,
+ globalThis.SH_CKE.ImageUpload,
+ globalThis.SH_CKE.Indent,
+ globalThis.SH_CKE.Link,
+ globalThis.SH_CKE.List,
+ globalThis.SH_CKE.Paragraph,
+ globalThis.SH_CKE.PasteFromOffice,
+ globalThis.SH_CKE.Table,
+ globalThis.SH_CKE.TableToolbar,
+ globalThis.SH_CKE.TableColumnResize,
+ globalThis.SH_CKE.TableCaption,
+ globalThis.SH_CKE.StrapiMediaLib,
+ globalThis.SH_CKE.StrapiUploadAdapter,
],
toolbar: [
'heading',