一站式wangEditor组件开发

one_stop_public/Table/ZdyTable.jsx

@@ -55,7 +55,6 @@ export default class ZdyTable extends Component {
 			formDeafault = '', // 为二维码快捷发起默认值
 		} = this.props;
 		// if(this.props.currentFormKey === 'aa20cdbd-2019-45ea-8cdf-715aa46e132e'){
-		//   debugger;
 		// }
 		if (isPreview || isChild) {
 			this.initExcel({ datas: this.props.datas, trees: this.props.trees }, () => {

one_stop_public/TableV2/index.jsx

@@ -55,7 +55,6 @@ export default class ZdyTable extends Component {
 			formDeafault = '', // 为二维码快捷发起默认值
 		} = this.props;
 		// if(this.props.currentFormKey === 'aa20cdbd-2019-45ea-8cdf-715aa46e132e'){
-		//   debugger;
 		// }
 		if (isPreview || isChild) {
 			this.initExcel({ datas: this.props.datas, trees: this.props.trees }, () => {
@@ -650,7 +649,7 @@ export default class ZdyTable extends Component {
 	};
 
 	render() {
-		
+
 		const {
 			width,
 			isRowCol,

one_stop_public/tableCompon/index.jsx

@@ -60,6 +60,7 @@ import MobileItem from './MobileItem';
 import MobileCascader from './CascaderDiy/MobileCascader';
 import { equal, errorHandler, getBase64, getRender, isJSON } from './Split_Index/staticInfo';
 import PictureSignature, { SignArray } from "@/webPublic/one_stop_public/libs/PictureSignature/PictureSignature";
+import WangEditor from '@/webPublic/zyd_public/WangEditor/OnstopWang';
 
 const { TextArea } = Input;
 const { Option } = Select;
@@ -1824,6 +1825,7 @@ export default class tableCom extends Component {
         }
       }
     }
+    // console.log(initValue, 'initValue');
     // console.table({
     //   objinit,
     //   fatherCode: this.props.fatherCode,
@@ -1862,6 +1864,11 @@ export default class tableCom extends Component {
             />
           );
           break;
+        case 'WangEditor':
+          cm = (<div dangerouslySetInnerHTML={{__html: obj[dataColumn.base52]}}>
+
+          </div>);
+          break;
         case 'TextArea':
           cm = (
             <span
@@ -3060,8 +3067,20 @@ export default class tableCom extends Component {
             );
           }
           break;
+        case 'WangEditor':
+          cm = getFieldDecorator(dataColumn.base52, {
+            initialValue: initValue,
+            rules:
+              json.vlds && json.vlds.length > 0
+                ? json.vlds
+                : [{ required: required, message: '请输入' }],
+          })(<WangEditor json={json}
+                         dataColumn={dataColumn}
+                         disabled={disabled}
+
+          />);
+          break;
         case 'RichText':
-          console.log(initValue, '22222222222222', dataColumn.base52, json);
           cm = getFieldDecorator(dataColumn.base52, {
             initialValue: initValue,
             rules:

zyd_public/WangEditor/OneStopWangEditor.js

@@ -16,6 +16,7 @@
 import React, { useState, useEffect } from 'react';
 import WangEditor from './includes/wangEditor.min';
 import { uploadFile } from "@/webPublic/one_stop_public/libs/PictureSignature/ShowItem";
+import { queryApiActionPath } from '@/webPublic/one_stop_public/utils/queryConfig';
 
 let editor = null;
 export default function Index({
@@ -49,9 +50,9 @@ export default function Index({
 
     editor.config.customUploadImg = function(resultFiles, insertImgFn) {
       // 重写上传图片的方法
-      uploadFile({ file: resultFiles[0] }).then((y) => {
-        if (y && y.url) {
-          insertImgFn(y.url);
+      uploadFile(resultFiles[0]).then((y) => {
+        if (y && y.length) {
+          insertImgFn(queryApiActionPath() + y);
         }
       });
       // insertImgFn(imgUrl);

zyd_public/WangEditor/OnstopWang.js

 import React, { useState, useEffect, forwardRef } from 'react';
 import WangEditor from './OneStopWangEditor';
 
-function Index({ onChange, value, height, domKey }) {
+function Index({ onChange, value, otherProps, dataColumn, disabled }) {
+  const [ready, setReady] = useState(false);
+  const domKey = dataColumn.base52 || 'wang-editor-dom-content';
+  useEffect(() => {
+    let dom = document.getElementById(`wangEditor${domKey}`);
+    if(dom && dom.parentNode){
+      dom.parentNode.removeChild(dom);
+    }
+    setReady(true);
+  }, []);
+
+  if(!ready){
+    return null;
+  }
   return (
     <WangEditor
       key={'cmsContent'}
-      height={height}
-      value={value}
-      domKey={domKey}
+      height={otherProps?.height || 450}
+      value={value || ''}
+      domKey={dataColumn.base52 || 'wang-editor-dom-content'}
       onChangeValue={onChange}
+      otherProps={otherProps}
     />
   );
 }
 
 export default forwardRef((props, _ref) => {
-  console.log(props);
-  return <Index {...props} />;
+  let otherProps = {};
+  if(!props.json || typeof props.json.initialValue === 'undefined'){
+    return <div></div>;
+  }
+  if (props.json?.otherProps) {
+    otherProps = props.json?.otherProps;
+    try {
+      otherProps = new Function(otherProps)();
+      // console.log(this.otherProps);
+    } catch (e) {
+
+    }
+  }
+  return <Index {...props} otherProps={otherProps}/>;
 });

zyd_public/utils/handlePhoto.js

@@ -147,7 +147,6 @@ export const zipImage = (file, fileSizeLimitMb = 3) => {
       image.src = e.target.result;
       return (image.onload = () => {
         let canvas = document.createElement('canvas');
-        debugger;
         let context = canvas.getContext('2d');
         let imageWidth = image.width * 0.3; //压缩后图片的大小
         let imageHeight = image.height * 0.3;