Merge remote-tracking branch 'origin/master'

zyd_public/WangEditor/WangEditor5/ReactComponent.js

 /**
+ *
+
  * WangEditor5的使用
  * 2022年6月21日
  * 官方文档 https://www.wangeditor.com/v5/getting-started.html
@@ -7,6 +9,43 @@
  * 再在 git bash 中执行
  * npm run build 获取编译后的文件/packages/editor/dist 复制出来放在项目代码中并使用
  * */
+
+/**
+ *  * 所有的菜单
+ // toolbarKeys: [
+ //   'bold', 'underline',
+ //   'italic', 'through',
+ //   'code', 'sub',
+ //   'sup', 'clearStyle',
+ //   'color', 'bgColor',
+ //   'fontSize', 'fontFamily',
+ //   'indent', 'delIndent',
+ //   'justifyLeft', 'justifyRight',
+ //   'justifyCenter', 'justifyJustify',
+ //   'lineHeight', 'insertImage',
+ //   'deleteImage', 'editImage',
+ //   'viewImageLink', 'imageWidth30',
+ //   'imageWidth50', 'imageWidth100',
+ //   'divider', 'emotion',
+ //   'insertLink', 'editLink',
+ //   'unLink', 'viewLink',
+ //   'codeBlock', 'blockquote',
+ //   'headerSelect', 'header1',
+ //   'header2', 'header3',
+ //   'header4', 'header5',
+ //   'todo', 'redo', 'undo',
+ //   'fullScreen', 'enter',
+ //   'bulletedList', 'numberedList',
+ //   'insertTable', 'deleteTable',
+ //   'insertTableRow', 'deleteTableRow',
+ //   'insertTableCol', 'deleteTableCol',
+ //   'tableHeader', 'tableFullWidth',
+ //   'insertVideo', 'uploadVideo',
+ //   'editVideoSize', 'uploadImage',
+ //   'codeSelectLang',
+ // ],
+ * */
+
 import styles from './css/style.less';
 import * as WangEditor5 from './index.esm';
 import React, { Fragment, useEffect, useState } from 'react';
@@ -15,22 +54,37 @@ export default function WangEditorReactComponent(props) {
   const {
     domKey = 'cmsContent',
     height = '450px',
+    value,
+    onChange,
   } = props;
   useEffect(() => {
     console.log(WangEditor5);
+    let htmlDefault = '';
+    if (value && value.indexOf('wangEditorHtml') > -1) {
+      htmlDefault = value;
+    } else {
+      htmlDefault = '<div class="wangEditorHtml">' + value + '</div>';
+    }
     const editorConfig = {
-      placeholder: '请输入内容',
-      onChange: (editor) => {
-        console.log('content', editor.children);
-        console.log('html', editor.getHtml());
-      },
-    };
+        placeholder: '请输入内容',
+        html: htmlDefault,
+        onChange: (editor) => {
+          // console.log('content', editor.children);
+          onChange(editor.getHtml());
+          console.log('html', editor.getHtml());
+        },
+      }
+    ;
     const toolbarConfig = {
-      // toolbarKeys: [
-      //   // 配置菜单
-      //   // 'head',
-      //   'bold',
-      // ],
+      excludeKeys: [
+        'codeBlock',
+        'emotion',
+        'group-video',
+        'undo',
+        'redo',
+        'bulletedList',
+        'numberedList',
+      ],
     };
 
     const editor = WangEditor5.createEditor({
@@ -39,15 +93,15 @@ export default function WangEditorReactComponent(props) {
         mode: 'default',
       },
     );
-    WangEditor5.createToolbar({
+    const toolBar = WangEditor5.createToolbar({
       editor,
       selector: '#wangEditorToolBar',
       config: toolbarConfig,
       mode: 'default',
     });
 
-    // console.log(editor.getAllMenuKeys());
-    // console.log(WangEditor5.DomEditor.getToolbar(editor));
+    console.log(editor.getAllMenuKeys());
+    console.log(toolBar.getConfig().toolbarKeys);
 
   }, []);