@hzab/form-render 1.6.9 → 1.6.10

package/CHANGELOG.md

@@ -1,3 +1,6 @@
+# @hzab/form-render@1.6.10
+
+feat: 富文本编辑器实例像外暴露
 
 # @hzab/form-render@1.6.9
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzab/form-render",
-  "version": "1.6.9",
+  "version": "1.6.10",
   "description": "",
   "main": "src",
   "scripts": {

package/src/components/RichEditor/index.tsx

@@ -5,8 +5,8 @@ import { IDomEditor, IEditorConfig, IToolbarConfig } from "@wangeditor/editor";
 import { getOssUploadRequest, getOfflineUploadRequest } from "../Upload/common/customRequest";
 import { handlePreviewUrls } from "../Upload/common/OfflineUpload";
 import "./index.less";
-import { Spin, message } from 'antd';
-import { connect, mapProps, observer } from "@formily/react";
+import { Spin, message } from "antd";
+import { connect, mapProps, observer, useField } from "@formily/react";
 
 interface AnyObject {
   [key: string]: any;
@@ -15,18 +15,18 @@ interface AnyObject {
 interface PropsType {
   toolbarConfig?: Partial<IToolbarConfig>;
   editorConfig?: Partial<IEditorConfig>;
-  ossOpt: AnyObject,
-  uploadParams: AnyObject,
-  height: string,
-  ossServerUrl: string,
-  ossUrl: string,
-  offlinePreviewUrl: string,
-  offlineServerUrl: string,
-  value: string,
-  onChange: any,
-  customRequest: any,
-  uploadMode: string,
-  zIndex: number
+  ossOpt: AnyObject;
+  uploadParams: AnyObject;
+  height: string;
+  ossServerUrl: string;
+  ossUrl: string;
+  offlinePreviewUrl: string;
+  offlineServerUrl: string;
+  value: string;
+  onChange: any;
+  customRequest: any;
+  uploadMode: string;
+  zIndex: number;
 }
 
 export const RichEditor = observer(function (props: PropsType, parentRef) {
@@ -44,7 +44,7 @@ export const RichEditor = observer(function (props: PropsType, parentRef) {
     // ossUrl = "https://test-abt.hzabjt.com:18091/api/v1/user/oss/getWebOssConfig",
     ossServerUrl = "/api/v1/user/oss/getWebOssConfig",
     ossUrl = "/api/v1/user/oss/getWebOssConfig",
-    zIndex = 9999
+    zIndex = 9999,
   } = props;
   const isPrivateStore =
     props.uploadParams?.fileAcl === "private" || props.ossOpt?.signatureParams?.fileAcl === "private";
@@ -54,15 +54,16 @@ export const RichEditor = observer(function (props: PropsType, parentRef) {
     getEditorContent,
   }));
 
+  const field = useField<any>();
+
   // editor 实例
   const [editor, setEditor] = useState<IDomEditor | null>(null); // TS 语法
 
   // 编辑器内容
-  const [html, setHtml] = useState<string>('');
+  const [html, setHtml] = useState<string>("");
 
   const [isLoading, setIsLoading] = useState<boolean>(false);
 
-
   const setEditorContent = (content) => {
     setHtml(content);
   };
@@ -71,7 +72,6 @@ export const RichEditor = observer(function (props: PropsType, parentRef) {
     return html;
   };
 
-
   const customUpload = async (file: File, insertFn) => {
     let customRequest = props.customRequest;
     if (uploadMode === "oss") {
@@ -95,15 +95,15 @@ export const RichEditor = observer(function (props: PropsType, parentRef) {
       file,
       onSuccess: (res) => {
         setIsLoading(false);
-        console.log(res)
-        insertFn(res.url, '', '');
+        console.log(res);
+        insertFn(res.url, "", "");
       },
       onError: () => {
         setIsLoading(false);
         message.error(`${file.name} 上传失败`);
-      }
-    })
-  }
+      },
+    });
+  };
 
   const config: Partial<IEditorConfig> = {
     // TS 语法
@@ -111,13 +111,13 @@ export const RichEditor = observer(function (props: PropsType, parentRef) {
     MENU_CONF: {
       uploadImage: {
         // form-data fieldName ，默认值 'wangeditor-uploaded-image'
-        fieldName: 'wangeditor-uploaded-image',
+        fieldName: "wangeditor-uploaded-image",
         // 单个文件的最大体积限制，默认为 2M
         maxFileSize: 1 * 1024 * 1024, // 1M
         // 最多可上传几个文件，默认为 100
         maxNumberOfFiles: 1,
         // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
-        allowedFileTypes: ['image/*'],
+        allowedFileTypes: ["image/*"],
         // 跨域是否传递 cookie ，默认为 false
         withCredentials: false,
         // 超时时间，默认为 10 秒
@@ -126,11 +126,11 @@ export const RichEditor = observer(function (props: PropsType, parentRef) {
       },
       uploadVideo: {
         // form-data fieldName ，默认值 'wangeditor-uploaded-image'
-        fieldName: 'wangeditor-uploaded-video',
+        fieldName: "wangeditor-uploaded-video",
         // 最多可上传几个文件，默认为 100
         maxNumberOfFiles: 1,
         // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
-        allowedFileTypes: ['video/*'],
+        allowedFileTypes: ["video/*"],
         // 跨域是否传递 cookie ，默认为 false
         withCredentials: false,
         customUpload,
@@ -139,12 +139,11 @@ export const RichEditor = observer(function (props: PropsType, parentRef) {
     ...editorConfig,
   };
 
-
   const onEditorChange = (e) => {
     const content = e.getHtml();
     setHtml(content);
     onChange && onChange(content);
-  }
+  };
 
   // 及时销毁 editor ，重要！
   useEffect(() => {
@@ -156,15 +155,17 @@ export const RichEditor = observer(function (props: PropsType, parentRef) {
   }, [editor]);
 
   useEffect(() => {
-    setEditorContent(value)
+    setEditorContent(value);
   }, [value]);
 
   return (
     <>
       <div className="wang-editor-warpper" style={{ zIndex }}>
-        {isLoading && <div className="spin-content">
-          <Spin tip="Loading..." />
-        </div>}
+        {isLoading && (
+          <div className="spin-content">
+            <Spin tip="Loading..." />
+          </div>
+        )}
         <Toolbar
           editor={editor}
           defaultConfig={toolbarConfig}
@@ -174,7 +175,10 @@ export const RichEditor = observer(function (props: PropsType, parentRef) {
         <WangEditor
           defaultConfig={config}
           value={html}
-          onCreated={setEditor}
+          onCreated={(e) => {
+            setEditor(e);
+            field.editor = e;
+          }}
           onChange={(e) => onEditorChange(e)}
           mode="default"
           style={{ height }}
@@ -204,4 +208,3 @@ export default connect(
 );
 
 export const Editor = WangEditor;
-