✨ [#140] Add 'table' plugin to CKEditor

maykinmedia · Jan 21, 2022 · 60d1f0e · 60d1f0e
1 parent 65adab7
commit 60d1f0e
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 0 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -36,6 +36,7 @@
     "@ckeditor/ckeditor5-list": "^31.0.0",
     "@ckeditor/ckeditor5-markdown-gfm": "^31.0.0",
     "@ckeditor/ckeditor5-paragraph": "^31.0.0",
+    "@ckeditor/ckeditor5-table": "^31.0.0",
     "@ckeditor/ckeditor5-theme-lark": "^31.0.0",
     "@emotion/react": "^11.5.0",
     "@emotion/styled": "^11.3.0",

diff --git a/src/open_inwoner/js/components/ckeditor/editor.js b/src/open_inwoner/js/components/ckeditor/editor.js
@@ -15,6 +15,8 @@ import ImageUpload from '@ckeditor/ckeditor5-image/src/imageupload'
 import ImageStyle from '@ckeditor/ckeditor5-image/src/imagestyle'
 import ImageToolbar from '@ckeditor/ckeditor5-image/src/imagetoolbar'
 import ImageCaption from '@ckeditor/ckeditor5-image/src/imagecaption'
+import Table from '@ckeditor/ckeditor5-table/src/table';
+import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar'
 import FilerImageAdapterPlugin from './plugins/filer/plugin'
 
 export default class ClassicEditor extends ClassicEditorBase {}
@@ -38,6 +40,8 @@ ClassicEditor.builtinPlugins = [
   ImageCaption,
   ImageStyle,
   FilerImageAdapterPlugin,
+  Table,
+  TableToolbar,
 ]
 
 // Editor configuration.
@@ -58,6 +62,7 @@ ClassicEditor.defaultConfig = {
       'indent',
       '|',
       'uploadImage',
+      'insertTable',
       '|',
       'undo',
       'redo',
@@ -76,6 +81,9 @@ ClassicEditor.defaultConfig = {
       types: ['jpeg', 'png', 'gif'],
     },
   },
+  table: {
+    contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells' ]
+  },
 }
 
 export const getEditor = (node) => {