@lingxiteam/lcdp-ueditor-react 1.0.0-alpha.1 → 1.0.0-alpha.11

package/es/LcdpUeditor.d.ts

@@ -37,6 +37,10 @@ declare class LcdpUeditor extends React.Component<ILcdpUeditorProps, {}> {
      * 上传文件函数
      */
     private uploadFunction;
+    /**
+     * 是否加载完成
+     */
+    private isReady;
     /**
      * 初始加载失败
      */
@@ -48,7 +52,9 @@ declare class LcdpUeditor extends React.Component<ILcdpUeditorProps, {}> {
      */
     editorConfig: any;
     constructor(props: ILcdpUeditorProps);
+    componentDidMount(): void;
     componentWillReceiveProps(nextProps: ILcdpUeditorProps): void;
+    componentWillUnmount(): void;
     private onContentChange;
     private getExtString;
     /**

package/es/LcdpUeditor.js

@@ -65,6 +65,10 @@ var LcdpUeditor = /*#__PURE__*/function (_React$Component) {
      * 上传文件函数
      */
     _defineProperty(_assertThisInitialized(_this), "uploadFunction", void 0);
+    /**
+     * 是否加载完成
+     */
+    _defineProperty(_assertThisInitialized(_this), "isReady", false);
     /**
      * 初始加载失败
      */
@@ -110,30 +114,43 @@ var LcdpUeditor = /*#__PURE__*/function (_React$Component) {
       selectCallback: function selectCallback(cb, type) {
         _this.fileSelect(cb, type);
       },
-      uploadFunction: _this.uploadFunction
+      uploadFunction: _this.uploadFunction,
+      initialContent: _this.props.value || ''
     });
-    _this.initUeditor();
     _this.debounceContentChange = debounce(_this.onContentChange.bind(_assertThisInitialized(_this)), 300);
     return _this;
   }
   _createClass(LcdpUeditor, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.initUeditor();
+    }
+  }, {
     key: "componentWillReceiveProps",
     value: function componentWillReceiveProps(nextProps) {
-      if ('value' in nextProps && this.currentContent !== nextProps.value) {
-        this.isReportFlag = false;
-        if (this.ueditorInst) {
+      if (this.isReady) {
+        if ('value' in nextProps && this.currentContent !== nextProps.value) {
+          this.isReportFlag = false;
           this.ueditorInst.setContent(nextProps.value);
         }
-      }
-      // 禁用操作需要调用指定的api进行操作
-      if (nextProps.disabled !== this.props.disabled && this.ueditorInst) {
-        if (nextProps.disabled) {
-          this.ueditorInst.setDisabled();
-        } else {
-          this.ueditorInst.setEnabled();
+        // 禁用操作需要调用指定的api进行操作
+        if (nextProps.disabled !== this.props.disabled) {
+          if (nextProps.disabled) {
+            this.ueditorInst.setDisabled();
+          } else {
+            this.ueditorInst.setEnabled();
+          }
         }
       }
     }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      if (this.isReady) {
+        var _this$ueditorInst, _this$ueditorInst$des;
+        (_this$ueditorInst = this.ueditorInst) === null || _this$ueditorInst === void 0 || (_this$ueditorInst$des = _this$ueditorInst.destroy) === null || _this$ueditorInst$des === void 0 || _this$ueditorInst$des.call(_this$ueditorInst);
+      }
+    }
   }, {
     key: "onContentChange",
     value: function onContentChange() {
@@ -284,6 +301,13 @@ var LcdpUeditor = /*#__PURE__*/function (_React$Component) {
               UeditorResourceLoader.onReady(function () {
                 _this3.ueditorInst = window.UE.getEditor(_this3.containerId, _this3.editorConfig);
                 _this3.ueditorInst.ready(function () {
+                  _this3.isReady = true;
+                  // 禁用状态设置
+                  if (_this3.props.disabled) {
+                    _this3.ueditorInst.setDisabled();
+                  } else {
+                    _this3.ueditorInst.setEnabled();
+                  }
                   _this3.ueditorInst.addListener('contentChange', function () {
                     _this3.debounceContentChange();
                   });
@@ -291,7 +315,7 @@ var LcdpUeditor = /*#__PURE__*/function (_React$Component) {
                 });
                 _this3.mountRef();
               });
-              jsList = ["".concat(this.ueditorPath, "/").concat(DEFAULT_UEDITOR_CONFIG.UEDITOR_CONFIG), "".concat(this.ueditorPath, "/").concat(DEFAULT_UEDITOR_CONFIG.UEDITOR_ALL), "".concat(this.ueditorPath, "/").concat(DEFAULT_UEDITOR_CONFIG.GET_UEDITOR_LANG())];
+              jsList = ["".concat(this.ueditorPath, "/").concat(DEFAULT_UEDITOR_CONFIG.UEDITOR_CONFIG), "".concat(this.ueditorPath, "/").concat(DEFAULT_UEDITOR_CONFIG.UEDITOR_ALL), "".concat(this.ueditorPath, "/").concat(DEFAULT_UEDITOR_CONFIG.GET_UEDITOR_LANG(this.props.lang || 'zh-cn'))];
               UeditorResourceLoader.onLoadError(function () {
                 _this3.setState({
                   initError: true

package/es/type.d.ts

@@ -68,7 +68,7 @@ export interface ILcdpUeditorProps {
      * 语言 默认 zh-cn
      * zh-cn 中文 en 英文
      */
-    lang?: 'zh-cn' | 'en';
+    lang?: 'zh-cn' | 'en' | 'zh-tw';
     /**
      * 上传方法
      * @param file 文件

package/lib/LcdpUeditor.d.ts

@@ -0,0 +1,80 @@
+import React from 'react';
+import type { ILcdpUeditorProps } from './type';
+declare class LcdpUeditor extends React.Component<ILcdpUeditorProps, {}> {
+    /**
+     * 静态资源地址
+     */
+    ueditorPath: string;
+    /**
+     * 文件上传inputRef
+     */
+    private inputRef;
+    /**
+     * 编辑器容器ref
+     */
+    private containerRef;
+    /**
+     * 编辑器容器id
+     */
+    private containerId;
+    /**
+     * 编辑器实例
+     */
+    private ueditorInst;
+    /**
+     * 是否上报
+     */
+    private isReportFlag;
+    /**
+     * 值变化节流函数
+     */
+    private debounceContentChange;
+    /**
+     * 当前值
+     */
+    private currentContent;
+    /**
+     * 上传文件函数
+     */
+    private uploadFunction;
+    /**
+     * 是否加载完成
+     */
+    private isReady;
+    /**
+     * 初始加载失败
+     */
+    state: Readonly<{
+        initError: boolean;
+    }>;
+    /**
+     * 编辑器配置项
+     */
+    editorConfig: any;
+    constructor(props: ILcdpUeditorProps);
+    componentDidMount(): void;
+    componentWillReceiveProps(nextProps: ILcdpUeditorProps): void;
+    componentWillUnmount(): void;
+    private onContentChange;
+    private getExtString;
+    /**
+     * 文件选择
+     * @param cb 回调给编辑器
+     * @param type 类型
+     */
+    private fileSelect;
+    /**
+     * 对外暴露编辑器实例
+     */
+    private mountRef;
+    /**
+     * 初始化样式
+     */
+    private initStyle;
+    /**
+     * 初始化编辑器实例
+     */
+    initUeditor(): Promise<void>;
+    render(): React.ReactNode;
+}
+export default LcdpUeditor;

package/lib/LcdpUeditor.js

@@ -0,0 +1,260 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/LcdpUeditor.tsx
+var LcdpUeditor_exports = {};
+__export(LcdpUeditor_exports, {
+  default: () => LcdpUeditor_default
+});
+module.exports = __toCommonJS(LcdpUeditor_exports);
+var import_react = __toESM(require("react"));
+var import_const = require("./const");
+var import_defaultConfig = __toESM(require("./defaultConfig.json"));
+var import_UeditorResourceLoader = __toESM(require("./tools/UeditorResourceLoader"));
+var import_lodash = require("lodash");
+var LcdpUeditor = class extends import_react.default.Component {
+  constructor(props) {
+    super(props);
+    /**
+     * 静态资源地址
+     */
+    this.ueditorPath = import_const.DEFAULT_UEDITOR_PATH;
+    /**
+     * 文件上传inputRef
+     */
+    this.inputRef = import_react.default.createRef();
+    /**
+     * 编辑器容器ref
+     */
+    this.containerRef = import_react.default.createRef();
+    /**
+     * 编辑器实例
+     */
+    this.ueditorInst = null;
+    /**
+     * 是否上报
+     */
+    this.isReportFlag = true;
+    /**
+     * 当前值
+     */
+    this.currentContent = "";
+    /**
+     * 是否加载完成
+     */
+    this.isReady = false;
+    /**
+     * 初始加载失败
+     */
+    this.state = {
+      initError: false
+    };
+    /**
+     * 编辑器配置项
+     */
+    this.editorConfig = {};
+    const { config } = props;
+    this.containerId = `ueditor_${Date.now()}_${String(Math.random()).slice(2, 6)}`;
+    if (this.props.ueditorPath) {
+      this.ueditorPath = this.props.ueditorPath;
+    }
+    this.currentContent = this.props.value;
+    this.uploadFunction = (file, type) => {
+      var _a;
+      if (type === "image" && ((_a = this.props.config) == null ? void 0 : _a.imageType) === "base64") {
+        const reader = new FileReader();
+        reader.readAsDataURL(file);
+        return new Promise((resolve, reject) => {
+          reader.onload = ({ target }) => resolve({
+            state: "SUCCESS",
+            url: target == null ? void 0 : target.result,
+            title: file.name,
+            original: file.name
+          });
+        });
+      }
+      if (this.props.uploadFunction) {
+        return this.props.uploadFunction(file);
+      }
+      return null;
+    };
+    this.editorConfig = {
+      ...import_defaultConfig.default,
+      initialFrameHeight: (config == null ? void 0 : config.height) || 300,
+      autoHeightEnabled: false,
+      selectCallback: (cb, type) => {
+        this.fileSelect(cb, type);
+      },
+      uploadFunction: this.uploadFunction,
+      initialContent: this.props.value || ""
+    };
+    this.debounceContentChange = (0, import_lodash.debounce)(this.onContentChange.bind(this), 300);
+  }
+  componentDidMount() {
+    this.initUeditor();
+  }
+  componentWillReceiveProps(nextProps) {
+    if (this.isReady) {
+      if ("value" in nextProps && this.currentContent !== nextProps.value) {
+        this.isReportFlag = false;
+        this.ueditorInst.setContent(nextProps.value);
+      }
+      if (nextProps.disabled !== this.props.disabled) {
+        if (nextProps.disabled) {
+          this.ueditorInst.setDisabled();
+        } else {
+          this.ueditorInst.setEnabled();
+        }
+      }
+    }
+  }
+  componentWillUnmount() {
+    var _a, _b;
+    if (this.isReady) {
+      (_b = (_a = this.ueditorInst) == null ? void 0 : _a.destroy) == null ? void 0 : _b.call(_a);
+    }
+  }
+  onContentChange() {
+    if (!this.isReportFlag) {
+      this.isReportFlag = true;
+    } else if (this.props.onChange) {
+      this.currentContent = this.ueditorInst.getContent();
+      this.props.onChange(this.currentContent);
+    }
+  }
+  getExtString(str) {
+    if (Array.isArray(str)) {
+      return str.join(",");
+    }
+    return str || "";
+  }
+  /**
+   * 文件选择
+   * @param cb 回调给编辑器
+   * @param type 类型
+   */
+  async fileSelect(cb, type) {
+    if (this.inputRef.current) {
+      let accept = "";
+      switch (type) {
+        case "image":
+          accept = this.getExtString(this.editorConfig.imageAllowFiles);
+          break;
+        case "audio":
+          accept = this.getExtString(this.editorConfig.audioAllowFiles);
+          break;
+        case "video":
+          accept = this.getExtString(this.editorConfig.videoAllowFiles);
+          break;
+        default:
+          break;
+      }
+      this.inputRef.current.accept = accept || "";
+      this.inputRef.current.click();
+      this.inputRef.current.onchange = async (e) => {
+        let file;
+        const fileList = e.target.files;
+        if ((fileList == null ? void 0 : fileList.length) > 0) {
+          file = fileList[0];
+        }
+        if (file) {
+          const res = await this.uploadFunction(file, type);
+          if (res.state === "SUCCESS" && res.url) {
+            cb(res);
+          }
+        }
+        this.inputRef.current.value = "";
+      };
+    }
+  }
+  /**
+   * 对外暴露编辑器实例
+   */
+  mountRef() {
+    if (this.props.onMount) {
+      this.props.onMount(this.ueditorInst);
+    }
+  }
+  /**
+   * 初始化样式
+   */
+  initStyle() {
+    var _a, _b;
+    const { toolbarColor, backgroundColor } = this.props.style || {};
+    if (this.containerRef.current) {
+      if (backgroundColor) {
+        const editor = this.containerRef.current.querySelector(".edui-editor");
+        (_a = editor.style) == null ? void 0 : _a.setProperty("background-color", backgroundColor);
+      }
+      if (toolbarColor) {
+        const toolBox = this.containerRef.current.querySelector(".edui-editor-toolbarboxouter");
+        (_b = toolBox.style) == null ? void 0 : _b.setProperty("background-color", toolbarColor);
+      }
+    }
+  }
+  /**
+   * 初始化编辑器实例
+   */
+  async initUeditor() {
+    import_UeditorResourceLoader.default.onReady(() => {
+      this.ueditorInst = window.UE.getEditor(this.containerId, this.editorConfig);
+      this.ueditorInst.ready(() => {
+        this.isReady = true;
+        if (this.props.disabled) {
+          this.ueditorInst.setDisabled();
+        } else {
+          this.ueditorInst.setEnabled();
+        }
+        this.ueditorInst.addListener("contentChange", () => {
+          this.debounceContentChange();
+        });
+        this.initStyle();
+      });
+      this.mountRef();
+    });
+    const jsList = [
+      `${this.ueditorPath}/${import_const.DEFAULT_UEDITOR_CONFIG.UEDITOR_CONFIG}`,
+      `${this.ueditorPath}/${import_const.DEFAULT_UEDITOR_CONFIG.UEDITOR_ALL}`,
+      `${this.ueditorPath}/${import_const.DEFAULT_UEDITOR_CONFIG.GET_UEDITOR_LANG(this.props.lang || "zh-cn")}`
+    ];
+    import_UeditorResourceLoader.default.onLoadError(() => {
+      this.setState({
+        initError: true
+      });
+    });
+    import_UeditorResourceLoader.default.startLoad(jsList);
+  }
+  render() {
+    const { initError } = this.state;
+    if (initError) {
+      throw new Error("Load Ueditor Resource Fail");
+    }
+    return /* @__PURE__ */ import_react.default.createElement("div", { ref: this.containerRef, style: this.props.style, className: this.props.className }, /* @__PURE__ */ import_react.default.createElement("script", { id: this.containerId, type: "text/plain" }), /* @__PURE__ */ import_react.default.createElement("input", { hidden: true, ref: this.inputRef, type: "file" }));
+  }
+};
+var LcdpUeditor_default = LcdpUeditor;

package/lib/const.d.ts

@@ -0,0 +1,12 @@
+/**
+ * 默认的ueditor资源路径
+ */
+export declare const DEFAULT_UEDITOR_PATH = "./ueditor-resource";
+/**
+ * ueditor 资源文件名
+ */
+export declare const DEFAULT_UEDITOR_CONFIG: {
+    UEDITOR_CONFIG: string;
+    UEDITOR_ALL: string;
+    GET_UEDITOR_LANG: (lang?: string) => string;
+};

package/lib/const.js

@@ -0,0 +1,39 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/const.ts
+var const_exports = {};
+__export(const_exports, {
+  DEFAULT_UEDITOR_CONFIG: () => DEFAULT_UEDITOR_CONFIG,
+  DEFAULT_UEDITOR_PATH: () => DEFAULT_UEDITOR_PATH
+});
+module.exports = __toCommonJS(const_exports);
+var DEFAULT_UEDITOR_PATH = "./ueditor-resource";
+var DEFAULT_UEDITOR_CONFIG = {
+  // 配置文件
+  UEDITOR_CONFIG: "ueditor.config.js",
+  // 主文件
+  UEDITOR_ALL: "ueditor.all.js",
+  // 语言文件
+  GET_UEDITOR_LANG: (lang = "zh-cn") => `lang/${lang}/${lang}.js`
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DEFAULT_UEDITOR_CONFIG,
+  DEFAULT_UEDITOR_PATH
+});

package/lib/defaultConfig.json

@@ -0,0 +1,77 @@
+{
+    "imageActionName": "image",
+    "imageFieldName": "file",
+    "imageMaxSize": 10485760,
+    "imageAllowFiles": [
+        ".jpg",
+        ".png",
+        ".jpeg"
+    ],
+    "imageCompressEnable": true,
+    "imageCompressBorder": 5000,
+    "imageInsertAlign": "none",
+    "imageUrlPrefix": "",
+    "scrawlActionName": "crawl",
+    "scrawlFieldName": "file",
+    "scrawlMaxSize": 10485760,
+    "scrawlUrlPrefix": "",
+    "scrawlInsertAlign": "none",
+    "snapscreenActionName": "snap",
+    "snapscreenUrlPrefix": "",
+    "snapscreenInsertAlign": "none",
+    "catcherLocalDomain": [
+        "127.0.0.1",
+        "localhost"
+    ],
+    "catcherActionName": "catch",
+    "catcherFieldName": "source",
+    "catcherUrlPrefix": "",
+    "catcherMaxSize": 10485760,
+    "catcherAllowFiles": [
+        ".jpg",
+        ".png",
+        ".jpeg"
+    ],
+    "videoActionName": "video",
+    "videoFieldName": "file",
+    "videoUrlPrefix": "",
+    "videoMaxSize": 104857600,
+    "videoAllowFiles": [
+        ".mp4",
+        ".webm",
+        ".mkv"
+    ],
+    "audioActionName": "audio",
+    "audioFieldName": "file",
+    "audioUrlPrefix": "",
+    "audioMaxSize": 104857600,
+    "audioAllowFiles": [
+        ".mp3"
+    ],
+    "fileActionName": "file",
+    "fileFieldName": "file",
+    "fileUrlPrefix": "",
+    "fileMaxSize": 104857600,
+    "fileAllowFiles": [
+        ".zip",
+        ".pdf",
+        ".doc"
+    ],
+    "imageManagerActionName": "listImage",
+    "imageManagerListSize": 20,
+    "imageManagerUrlPrefix": "",
+    "imageManagerInsertAlign": "none",
+    "imageManagerAllowFiles": [
+        ".jpg",
+        ".png",
+        ".jpeg"
+    ],
+    "fileManagerActionName": "listFile",
+    "fileManagerUrlPrefix": "",
+    "fileManagerListSize": 20,
+    "fileManagerAllowFiles": [
+        ".zip",
+        ".pdf",
+        ".doc"
+    ]
+}

package/lib/index.d.ts

@@ -0,0 +1,4 @@
+import LcdpUeditor from './LcdpUeditor';
+import type { ILcdpUeditorProps } from './type';
+export { LcdpUeditor, ILcdpUeditorProps, };
+export default LcdpUeditor;

package/lib/index.js

@@ -0,0 +1,41 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.tsx
+var src_exports = {};
+__export(src_exports, {
+  LcdpUeditor: () => import_LcdpUeditor.default,
+  default: () => src_default
+});
+module.exports = __toCommonJS(src_exports);
+var import_LcdpUeditor = __toESM(require("./LcdpUeditor"));
+var src_default = import_LcdpUeditor.default;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  LcdpUeditor
+});

package/lib/tools/UeditorResourceLoader.d.ts

@@ -0,0 +1,21 @@
+declare class UeditorResourceLoader {
+    private static instance;
+    private callbackList;
+    private errorCallbackList;
+    private isReady;
+    private loading;
+    private initError;
+    static startLoad(jsList: string[]): Promise<void>;
+    static getInstance(): UeditorResourceLoader;
+    /**
+     * 加载完成执行
+     * @param callback 回调函数
+     */
+    static onReady(callback: Function): void;
+    /**
+     * 资源加载失败执行
+     * @param callback
+     */
+    static onLoadError(callback: Function): void;
+}
+export default UeditorResourceLoader;