strapi-plugin-ckeditor5 - npm Package Compare versions

Comparing version 1.3.0 to 1.4.0

admin/src/components/Wysiwyg/index.js

@@ -7,2 +7,3 @@ import React, { useState } from 'react';
 import MediaLib from '../MediaLib';
+import config from '../../config/ckeditor';
 
@@ -18,12 +19,13 @@ const Wysiwyg = ({
 }) => {
-  const { formatMessage, currentLocale } = useGlobalContext();
   const [isOpen, setIsOpen] = useState(false);
   const [editor, setEditor] = useState(null);
-  const mediaLibTitle = formatMessage({ id: 'Media Library' });
+  const toggleMediaLib = (data) => setIsOpen(prev => !prev);
   let spacer = !isEmpty(inputDescription) ? <div style={{ height: '.4rem' }} /> : <div />;
 
+  const { formatMessage, currentLocale } = useGlobalContext();
+  const mediaLibTitle = formatMessage({ id: 'Media Library' });
 
-  const toggleMediaLib = (data) => setIsOpen(prev => !prev);
+  config.language = currentLocale;
 
-  const strapiMediaLib = {
+  config.strapiMediaLib = {
     onToggle: toggleMediaLib,
@@ -33,3 +35,3 @@ label: mediaLibTitle
 
-  const strapiUpload = {
+  config.strapiUpload = {
     uploadUrl: `${strapi.backendURL}/upload`,
@@ -59,2 +61,3 @@ headers: {
 
+
   return (
@@ -69,9 +72,3 @@ <div
       <Label htmlFor={name} message={label} style={{ marginBottom: 10 }} />
-      <Editor name={name} onChange={onChange} value={value} setEditor={setEditor} config={
-        {
-          language: currentLocale,
-          strapiUpload: strapiUpload,
-          strapiMediaLib: strapiMediaLib,
-        }
-      }/>
+      <Editor name={name} onChange={onChange} value={value} setEditor={setEditor} config={config} />
       <InputDescription message={inputDescription} style={!isEmpty(inputDescription) ? { marginTop: '1.4rem' } : {}} />
@@ -78,0 +75,0 @@ <InputErrors errors={(!noErrorsDescription && errors) || []} name={name} />

package.json

 {
   "name": "strapi-plugin-ckeditor5",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "Replace Strapi default WYSIWYG editor with enhanced build of CKEditor 5",
@@ -25,2 +25,5 @@ "private": false,
   ],
+  "files": [
+    "admin"
+  ],
   "strapi": {
@@ -35,4 +38,4 @@ "name": "ckeditor",
   "dependencies": {
-    "@ckeditor/ckeditor5-react": "^3.0.0",
-    "ckeditor5-build-strapi-wysiwyg": "^1.3.0"
+    "@ckeditor/ckeditor5-react": "^3.0.1",
+    "ckeditor5-build-strapi-wysiwyg": "^1.4.0"
   },
@@ -39,0 +42,0 @@ "author": {

README.md

@@ -5,3 +5,3 @@ # Strapi CKEditor5 plugin
 
-![strapi-plugin-ckeditor5](/sample/strapi-plugin-ckeditor5.png)
+![strapi-plugin-ckeditor5](sample/strapi-plugin-ckeditor5.png)
 
@@ -17,2 +17,3 @@ *Sample for [this](https://faryaros.com/articles/it2021) article.*
 - Extensive set of features for your rich content
+- Optional editor customization
 - Automatically upload Inserted images to Media Library (thanks to [ckeditor5-strapi-upload-plugin](https://github.com/gtomato/ckeditor5-strapi-upload-plugin))
@@ -22,2 +23,3 @@ - Media Library button to insert stored images directly to the editor 🔥
 
+
 ## How to try
@@ -43,4 +45,47 @@
 
+## How to customize editor (optional)
+
+If you want to change appearance of the editor or remove unused buttons you can add a custom CKEditor configuration to override default settings:
+
+0. Go to your Strapi folder
+
+1. Copy empty config file `node_modules/strapi-plugin-ckeditor5/admin/src/config/ckeditor.js` to `extensions/ckeditor5/admin/src/config`
+
+2. Add to `extensions/ckeditor5/admin/src/config/ckeditor.js` your custom [configuration](https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/configuration.html)
+
+3. Rebuild Strapi
+
+```bash
+npm run strapi build
+```
+
+### Configuration example
+
+```js
+// ckeditor.js
+module.exports = ({
+	// Override toolbar config to leave a few buttons
+    toolbar: {
+		items: [
+			'heading',
+			'|',
+			'bold',
+			'italic',
+			'link',
+			'alignment',
+			'|',
+			'undo',
+			'redo'
+		]
+	}
+});
+```
+
+### Default configuration
+
+For information and inspiration: default editor configuration defined [here](https://github.com/Roslovets-Inc/ckeditor5-build-strapi-wysiwyg/blob/e259d72cfc611a0f03aaa7686865412f421fc49c/src/ckeditor.js#L78).
+
+
 ## How to add more features to the editor
-If you want to see more features in this plugin feel free to request it in [issues](https://github.com/Roslovets-Inc/ckeditor5-build-strapi-wysiwyg/issues) or create pull request in the [ckeditor5-build-strapi-wysiwyg](https://github.com/Roslovets-Inc/ckeditor5-build-strapi-wysiwyg) repo. Together we will build a comprehensive editor for common needs.
+If you want to see more features in this plugin feel free to request it in [issues](https://github.com/Roslovets-Inc/strapi-plugin-ckeditor5/issues) or create pull request in the [ckeditor5-build-strapi-wysiwyg](https://github.com/Roslovets-Inc/ckeditor5-build-strapi-wysiwyg) repo. Together we will build a comprehensive editor for common needs.
 
@@ -47,0 +92,0 @@

No alert changes

Improved metrics

Number of lines in readme file

103

increased by77.59%

Worsened metrics

Total package byte prevSize

13642

decreased by-87.26%

Number of package files

34

decreased by-5.56%

Lines of code

322

decreased by-1.23%

Dependency changes

• Updated@ckeditor/ckeditor5-react@^3.0.1

• Updatedckeditor5-build-strapi-wysiwyg@^1.4.0