【修改】配置CKEditor

package.json

@@ -9,10 +9,18 @@
     "@ckeditor/ckeditor5-basic-styles": "^11.1.0",
     "@ckeditor/ckeditor5-build-classic": "^12.1.0",
     "@ckeditor/ckeditor5-dev-utils": "^12.0.1",
+    "@ckeditor/ckeditor5-dev-webpack-plugin": "^8.0.1",
+    "@ckeditor/ckeditor5-easy-image": "^11.0.1",
     "@ckeditor/ckeditor5-editor-classic": "^12.1.0",
+    "@ckeditor/ckeditor5-essentials": "^11.0.1",
+    "@ckeditor/ckeditor5-font": "^11.1.0",
     "@ckeditor/ckeditor5-heading": "^11.0.1",
+    "@ckeditor/ckeditor5-image": "^13.0.1",
+    "@ckeditor/ckeditor5-link": "^11.0.1",
+    "@ckeditor/ckeditor5-list": "^12.0.1",
     "@ckeditor/ckeditor5-paragraph": "^11.0.1",
     "@ckeditor/ckeditor5-react": "^1.1.3",
+    "@ckeditor/ckeditor5-table": "^12.0.1",
     "@ckeditor/ckeditor5-theme-lark": "^13.0.1",
     "@svgr/webpack": "4.1.0",
     "antd": "^3.18.1",

src/page/overall/overall.js

@@ -14,28 +14,70 @@ import CKEditor from '@ckeditor/ckeditor5-react';
 import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
 import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment';
 import Heading from '@ckeditor/ckeditor5-heading/src/heading';
-// import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
-// import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
-// import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
+import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
+import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
+import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
+import Link from '@ckeditor/ckeditor5-link/src/link';
+import Table from '@ckeditor/ckeditor5-table/src/table';
+import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
+import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar';
+import Font from '@ckeditor/ckeditor5-font/src/font';
+import List from '@ckeditor/ckeditor5-list/src/list';
+import Image from '@ckeditor/ckeditor5-image/src/image';
+import ImageToolbar from '@ckeditor/ckeditor5-image/src/imagetoolbar';
+import ImageCaption from '@ckeditor/ckeditor5-image/src/imagecaption';
+import ImageStyle from '@ckeditor/ckeditor5-image/src/imagestyle';
+import EasyImage from '@ckeditor/ckeditor5-easy-image/src/easyimage';
 
 
 
 const ckEditorConfig = {
-    plugins:[ Heading, ],
-    toolbar: [
-            'heading',
-            '|',
-            // 'alignment',                                                 // <--- ADDED
-            // 'bold',
-            // 'italic',
-            // 'link',
-            // 'bulletedList',
-            // 'numberedList',
-            // 'imageUpload',
-            // 'blockQuote',
-            // 'undo',
-            // 'redo'
+    plugins:[ Essentials, Heading, Font, Alignment, Bold, Italic, Link, Table, TableToolbar, List, Image, ImageToolbar, ImageCaption, ImageStyle, EasyImage ],
+    toolbar: ['heading', '|', 'fontFamily', 'fontSize', 'fontColor', 'fontBackgroundColor', 'bulletedList', 'numberedList', 'alignment', 'bold','italic','link','insertTable', 'imageUpload', '|', 'undo', 'redo'],
+    table: {
+        contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells' ]
+    },
+    fontFamily: {
+        options: [
+            'default',
+            'Arial, Helvetica, sans-serif',
+            'Courier New, Courier, monospace',
+            'Georgia, serif',
+            'Lucida Sans Unicode, Lucida Grande, sans-serif',
+            'Tahoma, Geneva, sans-serif',
+            'Times New Roman, Times, serif',
+            'Trebuchet MS, Helvetica, sans-serif',
+            'Verdana, Geneva, sans-serif'
         ]
+    },
+    fontSize: {
+        options: [12, 13, 14, 15, 'default', 17, 18, 19, 21, 22, 23, 24]
+    },
+    fontColor: {
+        columns: 8,
+
+        // ...
+    },
+    fontBackgroundColor: {
+        columns: 8,
+
+        // ...
+    },
+    image: {
+        toolbar: [ 'imageTextAlternative', '|', 'imageStyle:full', 'imageStyle:side' ],
+        styles: [
+            'full',
+            'side',
+            'alignLeft',
+            'alignCenter',
+            'alignRight'
+        ]
+    },
+    // 图片上传配置
+    cloudServices: {
+        // tokenUrl: 'https://example.com/cs-token-endpoint',
+        // uploadUrl: 'https://your-organization-id.cke-cs.com/easyimage/upload/'
+    }
 };
 
 @inject('overallStore', 'appStore')