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,85 +13,100 @@
  * 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( {
-                                 height,
-                                 zIndex,
-                                 placeholder,
-                                 focus,
-                                 value,
-                                 key,
-                                 onChangeValue,
-                               } ){
-  useEffect(()=>{
-    const editor = new WangEditor(`#wangEditor${key}`);
-    if(height){
-      editor.config.height = height; // 编辑器高度
-    }
-    if(zIndex){
-      editor.config.zIndex = zIndex; // 编辑器 z-index
-    }
-    if(placeholder){
-      editor.config.placeholder = placeholder; // placeholder
-    }
-    if(focus){
-      editor.config.focus = focus;
-    }
-    editor.config.onChange = function (newHtml) {
-      onChangeValue(newHtml);
-    };
 
-    editor.config.customUploadImg = function(resultFiles, insertImgFn) { // 重写上传图片的方法
-      uploadFile({ file: resultFiles[0] }).then((y) => {
-        if(y && y.url){
-          insertImgFn(y.url);
-        }
-      });
-      // insertImgFn(imgUrl);
-    };
+let editor = null;
+export default function Index({
+                                height,
+                                zIndex,
+                                placeholder,
+                                focus,
+                                value,
+                                domKey,
+                                onChangeValue,
+                              }) {
+  useEffect(
+    () => {
+      editor = new WangEditor(`#wangEditor${domKey}`);
+      if (height) {
+        editor.config.height = height; // 编辑器高度
+      }
+      if (zIndex) {
+        editor.config.zIndex = zIndex; // 编辑器 z-index
+      }
+      if (placeholder) {
+        editor.config.placeholder = placeholder; // placeholder
+      }
+      if (focus) {
+        editor.config.focus = focus;
+      }
+      editor.config.onchange = function(newHtml) {
+        onChangeValue(newHtml);
+      };
 
-    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',
-      'bold',
-      'fontSize',
-      'fontName',
-      'italic',
-      'underline',
-      'strikeThrough',
-      'indent',
-      'lineHeight',
-      'foreColor',
-      'backColor',
-      'link',
-      'list',
-      'justify',
-      'quote',
-      // 'emoticon',
-      'image',
-      'video',
-      'table',
-      // 'code',
-      'splitLine',
-      // 'undo',
-      // 'redo',
-    ];
+      editor.config.onchangeTimeout = 500;  // html内容改变时的 timeOut 配置
 
-    editor.create();
+      editor.config.customUploadImg = function(resultFiles, insertImgFn) { // 重写上传图片的方法
+        uploadFile({ file: resultFiles[0] }).then((y) => {
+          if (y && y.url) {
+            insertImgFn(y.url);
+          }
+        });
+        // insertImgFn(imgUrl);
+      };
 
-    if(value){
-      editor.txt.html('<div class="wangEditorHtml">' + value + '</div>');
-    }
-  },[]);
+      editor.config.pasteFilterStyle = false; // 关闭粘贴样式的过滤
+      editor.config.uploadImgMaxSize = 3 * 1024 * 1024; // 上传的图片不能大于3M
+      editor.config.uploadImgMaxLength = 1; // 一次最多上传 1 个图片
+      editor.config.menus = [ // 配置菜单
+        'head',
+        'bold',
+        'fontSize',
+        'fontName',
+        'italic',
+        'underline',
+        'strikeThrough',
+        'indent',
+        'lineHeight',
+        'foreColor',
+        'backColor',
+        'link',
+        'list',
+        'justify',
+        'quote',
+        // 'emoticon',
+        'image',
+        'video',
+        'table',
+        // 'code',
+        'splitLine',
+        // 'undo',
+        // 'redo',
+      ];
 
+      editor.create();
+      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>
-  )
+  );
 }