npm install braft-editor --save

总部 富文本 编辑器

package-lock.json

@@ -5,6 +5,9 @@
   "requires": true,
   "packages": {
     "": {
+      "name": "mh_jy_safe_web",
+      "version": "1.0.0",
+      "license": "ISC",
       "dependencies": {
         "@ant-design/icons": "^5.2.6",
         "@antv/data-set": "0.9.6",
@@ -15,6 +18,7 @@
         "autobind-decorator": "2.3.1",
         "babel-plugin-import": "1.11.0",
         "bizcharts": "3.4.1",
+        "braft-editor": "^2.3.9",
         "buffer": "^6.0.3",
         "canvg": "^3.0.6",
         "core-js": "^3.44.0",
@@ -4188,6 +4192,82 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/braft-editor": {
+      "version": "2.3.9",
+      "resolved": "https://registry.npmmirror.com/braft-editor/-/braft-editor-2.3.9.tgz",
+      "integrity": "sha512-mqdPk/zI2dhFK8tW/A4Qj/AkkARLh5L/niNw+iif5wFqb6zh15rMlrShgz1nWO/QXyAKr8XtDgxiBbR0zWwtRg==",
+      "dependencies": {
+        "@babel/runtime": "^7.0.0",
+        "braft-convert": "^2.3.0",
+        "braft-finder": "^0.0.19",
+        "braft-utils": "^3.0.8",
+        "draft-convert": "^2.0.0",
+        "draft-js": "^0.10.3",
+        "draft-js-multidecorators": "^1.0.0",
+        "draftjs-utils": "^0.9.4",
+        "immutable": "~3.7.4"
+      },
+      "peerDependencies": {
+        "react": "^15.0.2|| ^16.0.0-rc || ^16.0.0",
+        "react-dom": "^15.0.2|| ^16.0.0-rc || ^16.0.0"
+      }
+    },
+    "node_modules/braft-editor/node_modules/braft-convert": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmmirror.com/braft-convert/-/braft-convert-2.3.0.tgz",
+      "integrity": "sha512-5km+dLHk8iYDv2iEYDrDQ2ld/ZoUx66QLql0qdm5PqZEcNXc8dBHGLORfzeu3iMw1jLeAiHxtdY5+ypuIhczVg==",
+      "dependencies": {
+        "draft-convert": "^2.0.0",
+        "draft-js": "^0.10.3"
+      },
+      "peerDependencies": {
+        "react": "^16.0.0"
+      }
+    },
+    "node_modules/braft-editor/node_modules/braft-finder": {
+      "version": "0.0.19",
+      "resolved": "https://registry.npmmirror.com/braft-finder/-/braft-finder-0.0.19.tgz",
+      "integrity": "sha512-0kzI6/KbomJJhYX1hpjn4edCKhblyUyWdUrsgBmOrwy0vrj+pPkm69+Uf8Uj6KGAULM6LF0ooC++p7fqUGgFHw==",
+      "peerDependencies": {
+        "react": "^16.4.1",
+        "react-dom": "^16.4.1"
+      }
+    },
+    "node_modules/braft-editor/node_modules/braft-utils": {
+      "version": "3.0.13",
+      "resolved": "https://registry.npmmirror.com/braft-utils/-/braft-utils-3.0.13.tgz",
+      "integrity": "sha512-92YNlc5RW3mNMo0zbWhnqz8PWr21AAPPhnfn3ZUoXM9+wBIuJQe6UyvOas+MEG9UOGFrvTDPbq60P3fdEhyMQQ==",
+      "peerDependencies": {
+        "braft-convert": "^2.1.4",
+        "draft-js": "^0.10.5",
+        "draftjs-utils": "^0.9.4",
+        "immutable": "~3.7.4"
+      }
+    },
+    "node_modules/braft-editor/node_modules/draft-convert": {
+      "version": "2.1.13",
+      "resolved": "https://registry.npmmirror.com/draft-convert/-/draft-convert-2.1.13.tgz",
+      "integrity": "sha512-/h/n4JCfyO8aWby7wKBkccHdsuVbbDyHWXi/B3Zf2pN++lN1lDOIVt5ulXCcbH2Y5YJEFzMJw/YGfN+R0axxxg==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "immutable": "~3.7.4",
+        "invariant": "^2.2.1"
+      },
+      "peerDependencies": {
+        "draft-js": ">=0.7.0",
+        "react": "^15.0.2 || ^16.0.0-rc || ^16.0.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^15.0.2 || ^16.0.0-rc || ^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/braft-editor/node_modules/draftjs-utils": {
+      "version": "0.9.4",
+      "resolved": "https://registry.npmmirror.com/draftjs-utils/-/draftjs-utils-0.9.4.tgz",
+      "integrity": "sha512-KYjABSbGpJrwrwmxVj5UhfV37MF/p0QRxKIyL+/+QOaJ8J9z1FBKxkblThbpR0nJi9lxPQWGg+gh+v0dAsSCCg==",
+      "peerDependencies": {
+        "draft-js": "^0.10.x",
+        "immutable": "3.x.x || 4.x.x"
+      }
+    },
     "node_modules/brorand": {
       "version": "1.1.0",
       "resolved": "https://registry.npmmirror.com/brorand/-/brorand-1.1.0.tgz",
@@ -7242,6 +7322,14 @@
         "react-dom": "^0.14.0 || ^15.0.0-rc || ^16.0.0-rc || ^16.0.0"
       }
     },
+    "node_modules/draft-js-multidecorators": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/draft-js-multidecorators/-/draft-js-multidecorators-1.0.0.tgz",
+      "integrity": "sha512-7qdy+YQol5iq38AoEerhgSJWhCzxvZLn1x5ODfUlGfWlg0SrZ9AXJbaxHVIjdSIZNrbVIm+WANujNxMqCmDSZQ==",
+      "dependencies": {
+        "immutable": "*"
+      }
+    },
     "node_modules/duck": {
       "version": "0.1.12",
       "resolved": "https://registry.npmmirror.com/duck/-/duck-0.1.12.tgz",
@@ -29824,6 +29912,61 @@
         }
       }
     },
+    "braft-editor": {
+      "version": "2.3.9",
+      "resolved": "https://registry.npmmirror.com/braft-editor/-/braft-editor-2.3.9.tgz",
+      "integrity": "sha512-mqdPk/zI2dhFK8tW/A4Qj/AkkARLh5L/niNw+iif5wFqb6zh15rMlrShgz1nWO/QXyAKr8XtDgxiBbR0zWwtRg==",
+      "requires": {
+        "@babel/runtime": "^7.0.0",
+        "braft-convert": "^2.3.0",
+        "braft-finder": "^0.0.19",
+        "braft-utils": "^3.0.8",
+        "draft-convert": "^2.0.0",
+        "draft-js": "^0.10.3",
+        "draft-js-multidecorators": "^1.0.0",
+        "draftjs-utils": "^0.9.4",
+        "immutable": "~3.7.4"
+      },
+      "dependencies": {
+        "braft-convert": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmmirror.com/braft-convert/-/braft-convert-2.3.0.tgz",
+          "integrity": "sha512-5km+dLHk8iYDv2iEYDrDQ2ld/ZoUx66QLql0qdm5PqZEcNXc8dBHGLORfzeu3iMw1jLeAiHxtdY5+ypuIhczVg==",
+          "requires": {
+            "draft-convert": "^2.0.0",
+            "draft-js": "^0.10.3"
+          }
+        },
+        "braft-finder": {
+          "version": "0.0.19",
+          "resolved": "https://registry.npmmirror.com/braft-finder/-/braft-finder-0.0.19.tgz",
+          "integrity": "sha512-0kzI6/KbomJJhYX1hpjn4edCKhblyUyWdUrsgBmOrwy0vrj+pPkm69+Uf8Uj6KGAULM6LF0ooC++p7fqUGgFHw==",
+          "requires": {}
+        },
+        "braft-utils": {
+          "version": "3.0.13",
+          "resolved": "https://registry.npmmirror.com/braft-utils/-/braft-utils-3.0.13.tgz",
+          "integrity": "sha512-92YNlc5RW3mNMo0zbWhnqz8PWr21AAPPhnfn3ZUoXM9+wBIuJQe6UyvOas+MEG9UOGFrvTDPbq60P3fdEhyMQQ==",
+          "requires": {}
+        },
+        "draft-convert": {
+          "version": "2.1.13",
+          "resolved": "https://registry.npmmirror.com/draft-convert/-/draft-convert-2.1.13.tgz",
+          "integrity": "sha512-/h/n4JCfyO8aWby7wKBkccHdsuVbbDyHWXi/B3Zf2pN++lN1lDOIVt5ulXCcbH2Y5YJEFzMJw/YGfN+R0axxxg==",
+          "requires": {
+            "@babel/runtime": "^7.5.5",
+            "immutable": "~3.7.4",
+            "invariant": "^2.2.1"
+          }
+        },
+        "draftjs-utils": {
+          "version": "0.9.4",
+          "resolved": "https://registry.npmmirror.com/draftjs-utils/-/draftjs-utils-0.9.4.tgz",
+          "integrity": "sha512-KYjABSbGpJrwrwmxVj5UhfV37MF/p0QRxKIyL+/+QOaJ8J9z1FBKxkblThbpR0nJi9lxPQWGg+gh+v0dAsSCCg==",
+          "requires": {}
+        }
+      }
+    },
     "brorand": {
       "version": "1.1.0",
       "resolved": "https://registry.npmmirror.com/brorand/-/brorand-1.1.0.tgz",
@@ -32170,6 +32313,14 @@
         "object-assign": "^4.1.0"
       }
     },
+    "draft-js-multidecorators": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/draft-js-multidecorators/-/draft-js-multidecorators-1.0.0.tgz",
+      "integrity": "sha512-7qdy+YQol5iq38AoEerhgSJWhCzxvZLn1x5ODfUlGfWlg0SrZ9AXJbaxHVIjdSIZNrbVIm+WANujNxMqCmDSZQ==",
+      "requires": {
+        "immutable": "*"
+      }
+    },
     "duck": {
       "version": "0.1.12",
       "resolved": "https://registry.npmmirror.com/duck/-/duck-0.1.12.tgz",

package.json

@@ -19,6 +19,7 @@
     "autobind-decorator": "2.3.1",
     "babel-plugin-import": "1.11.0",
     "bizcharts": "3.4.1",
+    "braft-editor": "^2.3.9",
     "buffer": "^6.0.3",
     "canvg": "^3.0.6",
     "core-js": "^3.44.0",

src/files/edit/PF153.js

@@ -1,10 +1,17 @@
+import React, { useState } from 'react';
+import { Form } from 'antd'
 import { extendInclude, extendRule, initFilter } from "../../utils/common";
-
 import moment from 'moment'
+import BraftEditor from 'braft-editor';
+import 'braft-editor/dist/index.css';
 /**
  * @return {string}
  */
 
+function ContentChange() {
+  var ccc = this;
+  debugger
+}
 export default {
   onBeforeEdit: ({ isNew, setFieldValue, stateData, setFieldVisible }) => {
     if (stateData.ORG_ID != "00300000-0000-0000-0000-000000000000") {
@@ -13,5 +20,27 @@ export default {
     if (isNew) {
       setFieldValue('START', moment(new Date()).format("YYYY-MM-DD"))
     }
-  }
+  },
+
+  handleRenderHeadControl(params) {
+    if (params.colConfig.field == 'CONTENT') {
+      const initialEditorState = BraftEditor.createEditorState(params.record.CONTENT || '');
+      return <>
+        {/* 自定义表单控件 */}
+        {/* <Form.Item> */}
+        <BraftEditor  style={{ border: "2px solid red", width: "95%" }}
+          value={initialEditorState}
+          onBlur={(editorState) => {
+            const htmlContent = editorState.toHTML();
+            if (params.record.CONTENT != htmlContent) {
+              params.setFieldValue('CONTENT', htmlContent);
+              // params.setState('CONTENT', htmlContent);
+            }
+          }}
+          placeholder="请输入正文..."
+        />
+        {/* </Form.Item> */}
+      </>
+    }
+  },
 };