增加wangEditor的组件

one_stop_public/libs/PictureSignature/ShowItem.js

@@ -106,7 +106,7 @@ export const dragEventList = (setOtherProps, otherProps) => {
   );
 }
 
-const uploadFile = (file) => {
+export const uploadFile = (file) => {
   let url = queryApiActionPath() + '/upload?token=' + getToken();
   const formData = new FormData();
   formData.append('file', file);

zyd_public/WangEditor/OneStopWangEditor.js

+/**
+ * wangEditor http://www.wangeditor.com/  将git 源码下载下来 然后 npm run build 获取编译后的代码 版本 4.2.2
+ * 钟是志
+ * 2020年11月5日 16:56:23
+ *
+ **/
+/**
+ * key: 组件的key // 同一页面渲染应该只有一个唯一的key
+ * height: number // 编辑区域的高度 单位px
+ * zIndex: number // 默认为 10000 可自行设置
+ * placeholder: string // 提示文字,
+ * focus: boolean, // 是否获取焦点
+ * value: string // 富文本的值
+ * 更多配置项 参考 http://www.wangeditor.com/doc/
+ * */
+import React, { useState, useEffect } from 'react';
+import WangEditor from './includes/wangEditor.min';
+import { uploadFile } from "@/webPublic/one_stop_public/libs/PictureSignature/ShowItem";
+
+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.onchangeTimeout = 500; // html内容改变时的 timeOut 配置
+
+    editor.config.customUploadImg = function(resultFiles, insertImgFn) {
+      // 重写上传图片的方法
+      uploadFile({ file: resultFiles[0] }).then((y) => {
+        if (y && y.url) {
+          insertImgFn(y.url);
+        }
+      });
+      // insertImgFn(imgUrl);
+    };
+
+    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${domKey}`} />;
+}

zyd_public/WangEditor/OnstopWang.js

+import React, { useState, useEffect, forwardRef } from 'react';
+import WangEditor from './OneStopWangEditor';
+
+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} />;
+});