wangEditor 修改

zyd_public/WangEditor/index.js

-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, forwardRef } from 'react';
 import WangEditor from './wangEditorComponent';
 
-export default function Index({ onChange, value, height }) {
+function Index({ onChange, value, height, domKey }) {
   return (<WangEditor key={'cmsContent'}
                       height={height}
                       value={value}
+                      domKey={domKey}
                       onChangeValue={onChange}
 
   />);
 }
+
+export default forwardRef((props, _ref) => {
+  console.log(props);
+  return <Index {...props}/>
+})

zyd_public/WangEditor/wangEditorComponent.js

@@ -13,39 +13,44 @@
  * value: string // 富文本的值
  * 更多配置项 参考 http://www.wangeditor.com/doc/
  * */
-import React, {useState, useEffect} from 'react';
+import React, { useState, useEffect } from 'react';
 import WangEditor from './includes/wangEditor.min';
 import uploadFile from './uploadFile';
-export default function Index( {
+
+let editor = null;
+export default function Index({
                                 height,
                                 zIndex,
                                 placeholder,
                                 focus,
                                 value,
-                                 key,
+                                domKey,
                                 onChangeValue,
-                               } ){
-  useEffect(()=>{
-    const editor = new WangEditor(`#wangEditor${key}`);
-    if(height){
+                              }) {
+  useEffect(
+    () => {
+      editor = new WangEditor(`#wangEditor${domKey}`);
+      if (height) {
         editor.config.height = height; // 编辑器高度
       }
-    if(zIndex){
+      if (zIndex) {
         editor.config.zIndex = zIndex; // 编辑器 z-index
       }
-    if(placeholder){
+      if (placeholder) {
         editor.config.placeholder = placeholder; // placeholder
       }
-    if(focus){
+      if (focus) {
         editor.config.focus = focus;
       }
-    editor.config.onChange = function (newHtml) {
+      editor.config.onchange = function(newHtml) {
         onChangeValue(newHtml);
       };
 
+      editor.config.onchangeTimeout = 500;  // html内容改变时的 timeOut 配置
+
       editor.config.customUploadImg = function(resultFiles, insertImgFn) { // 重写上传图片的方法
         uploadFile({ file: resultFiles[0] }).then((y) => {
-        if(y && y.url){
+          if (y && y.url) {
             insertImgFn(y.url);
           }
         });
@@ -54,7 +59,6 @@ export default function Index( {
 
       editor.config.pasteFilterStyle = false; // 关闭粘贴样式的过滤
       editor.config.uploadImgMaxSize = 3 * 1024 * 1024; // 上传的图片不能大于3M
-    editor.config.onchangeTimeout = 500;  // html内容改变时的 timeOut 配置
       editor.config.uploadImgMaxLength = 1; // 一次最多上传 1 个图片
       editor.config.menus = [ // 配置菜单
         'head',
@@ -83,15 +87,26 @@ export default function Index( {
       ];
 
       editor.create();
-
-    if(value){
+      console.log(value);
+      if(value && value.indexOf('wangEditorHtml') > -1) {
+        editor.txt.html(value);
+      }else{
         editor.txt.html('<div class="wangEditorHtml">' + value + '</div>');
       }
-  },[]);
 
+      return () => {
+        console.log('是否销毁了editor');
+        editor.destroy();
+      };
+    }, []);
+  // useEffect(() => {
+  //   if (value && editor && editor.txt) {
+  //     editor.txt.html('<div class="wangEditorHtml">' + value + '</div>');
+  //   }
+  // }, [value]);
   return (
-    <div id={`wangEditor${key}`}>
+    <div id={`wangEditor${domKey}`}>
 
     </div>
-  )
+  );
 }