@chaoswise/ui 3.0.6 → 3.0.7

package/lib/WangEditor/editor4.js

@@ -0,0 +1,652 @@
+var _excluded = ["isSeparation", "customAlert", "htmlContent", "appendHtmlContent", "getHtml", "getText", "getJSON", "setJSON", "clearContent", "compatibleMode", "highLight", "fullScreen", "onChange", "onFocus", "onBlur", "linkImgCallback", "onlineVideoCallback", "onlineVideoCheck", "linkCheck", "pasteTextHandle", "customUploadImg", "customUploadVideo", "disable", "onCatalogChange", "headId"];
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import React, { useEffect, Fragment } from 'react';
+import E from 'wangeditor';
+import hljs from 'highlight.js';
+import 'highlight.js/styles/monokai-sublime.css';
+import PropTypes from 'prop-types';
+import './index.less';
+var editor = null;
+function WangEditor(_ref) {
+  var _ref$isSeparation = _ref.isSeparation,
+    isSeparation = _ref$isSeparation === void 0 ? false : _ref$isSeparation,
+    _ref$customAlert = _ref.customAlert,
+    _customAlert = _ref$customAlert === void 0 ? function () {} : _ref$customAlert,
+    _ref$htmlContent = _ref.htmlContent,
+    htmlContent = _ref$htmlContent === void 0 ? '' : _ref$htmlContent,
+    _ref$appendHtmlConten = _ref.appendHtmlContent,
+    appendHtmlContent = _ref$appendHtmlConten === void 0 ? '' : _ref$appendHtmlConten,
+    _ref$getHtml = _ref.getHtml,
+    _getHtml = _ref$getHtml === void 0 ? function () {} : _ref$getHtml,
+    _ref$getText = _ref.getText,
+    _getText = _ref$getText === void 0 ? function () {} : _ref$getText,
+    _ref$getJSON = _ref.getJSON,
+    _getJSON = _ref$getJSON === void 0 ? function () {} : _ref$getJSON,
+    setJSON = _ref.setJSON,
+    _ref$clearContent = _ref.clearContent,
+    clearContent = _ref$clearContent === void 0 ? false : _ref$clearContent,
+    _ref$compatibleMode = _ref.compatibleMode,
+    _compatibleMode = _ref$compatibleMode === void 0 ? function () {} : _ref$compatibleMode,
+    _ref$highLight = _ref.highLight,
+    highLight = _ref$highLight === void 0 ? true : _ref$highLight,
+    _ref$fullScreen = _ref.fullScreen,
+    fullScreen = _ref$fullScreen === void 0 ? '' : _ref$fullScreen,
+    _ref$onChange = _ref.onChange,
+    _onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
+    _ref$onFocus = _ref.onFocus,
+    _onFocus = _ref$onFocus === void 0 ? function () {} : _ref$onFocus,
+    _ref$onBlur = _ref.onBlur,
+    _onBlur = _ref$onBlur === void 0 ? function () {} : _ref$onBlur,
+    _ref$linkImgCallback = _ref.linkImgCallback,
+    _linkImgCallback = _ref$linkImgCallback === void 0 ? function () {} : _ref$linkImgCallback,
+    _ref$onlineVideoCallb = _ref.onlineVideoCallback,
+    _onlineVideoCallback = _ref$onlineVideoCallb === void 0 ? function () {} : _ref$onlineVideoCallb,
+    onlineVideoCheck = _ref.onlineVideoCheck,
+    linkCheck = _ref.linkCheck,
+    pasteTextHandle = _ref.pasteTextHandle,
+    customUploadImg = _ref.customUploadImg,
+    customUploadVideo = _ref.customUploadVideo,
+    _ref$disable = _ref.disable,
+    disable = _ref$disable === void 0 ? false : _ref$disable,
+    _ref$onCatalogChange = _ref.onCatalogChange,
+    _onCatalogChange = _ref$onCatalogChange === void 0 ? function () {} : _ref$onCatalogChange,
+    _ref$headId = _ref.headId,
+    headId = _ref$headId === void 0 ? '' : _ref$headId,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  useEffect(function () {
+    //菜单和编辑器是否分离
+    if (isSeparation) {
+      editor = new E('#cw-toolbar-container', '#cw-text-container');
+    } else {
+      editor = new E('#cw-editor');
+    }
+    for (var i in rest) {
+      editor.config[i] = rest[i];
+    }
+    //自定义alert
+    editor.config.customAlert = function (s, t) {
+      _customAlert(s, t);
+    };
+    //配置历史记录
+    editor.config.compatibleMode = function () {
+      _compatibleMode();
+    };
+    if (highLight) {
+      editor.highlight = hljs;
+    }
+    //开启还是关闭全屏
+    if (fullScreen === 'open') {
+      editor.fullScreen();
+    } else if (fullScreen === 'close') {
+      editor.unFullScreen();
+    }
+    //输入的回调
+    editor.config.onchange = function (html) {
+      _onChange(html);
+    };
+    //聚焦的回调
+    editor.config.onfocus = function (html) {
+      _onFocus(html);
+    };
+    //失焦的回调
+    editor.config.onblur = function (html) {
+      _onBlur(html);
+    };
+    //插入网络图片的回调
+    editor.config.linkImgCallback = function (src, alt, href) {
+      _linkImgCallback(src, alt, href);
+    };
+    //插入网络视频的回调
+    editor.config.onlineVideoCallback = function (video) {
+      _onlineVideoCallback(video);
+    };
+    //插入链接的校验
+    if (linkCheck) {
+      editor.config.linkCheck = function (text, link) {
+        linkCheck(text, link);
+      };
+    }
+    if (onlineVideoCheck) {
+      //插入网络视频的校验
+      editor.config.onlineVideoCheck = function (video) {
+        onlineVideoCheck(video);
+      };
+    }
+    // 配置粘贴文本的内容处理
+    if (pasteTextHandle) {
+      editor.config.pasteTextHandle = function (pasteStr) {
+        pasteTextHandle(pasteStr);
+      };
+    }
+    //自己实现上传图片
+    if (customUploadImg) {
+      editor.config.customUploadImg = function (resultFiles, insertImgFn) {
+        customUploadImg(resultFiles, insertImgFn);
+      };
+    }
+    //自己实现上传视频
+    if (customUploadVideo) {
+      editor.config.customUploadVideo = function (resultFiles, insertVideoFn) {
+        customUploadVideo(resultFiles, insertVideoFn);
+      };
+    }
+    //获取所有标题
+    editor.config.onCatalogChange = function (headList) {
+      _onCatalogChange(headList);
+    };
+    editor.create();
+
+    //设置编辑器内容
+    if (htmlContent) {
+      editor.txt.html(htmlContent);
+    }
+    //追加内容
+    if (appendHtmlContent) {
+      editor.txt.append(appendHtmlContent);
+    }
+    // 获取html
+    _getHtml(editor.txt.html());
+    //获取text
+    _getText(editor.txt.text());
+    //获取JSON
+    _getJSON(editor.txt.getJSON());
+    //设置JSON
+    if (setJSON) {
+      editor.txt.setJSON(setJSON);
+    }
+    //  清空编辑器内容
+    if (clearContent) {
+      editor.txt.clear();
+    }
+    //是否禁用编辑器
+    if (disable) {
+      editor.disable();
+    } else {
+      editor.enable();
+    }
+    //获取所有标题
+
+    if (headId) {
+      editor.scrollToHead(headId);
+    }
+    return function () {
+      editor.destroy();
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement("div", null, !isSeparation ? /*#__PURE__*/React.createElement("div", {
+    id: "cw-editor"
+  }) : /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+    id: "cw-toolbar-container",
+    className: "cw-toolbar"
+  }), /*#__PURE__*/React.createElement("div", {
+    id: "cw-text-container",
+    className: "cw-text"
+  })));
+}
+WangEditor.propTypes = {
+  /**
+   * 设置高度，默认为300px
+   */
+  height: PropTypes.number,
+  /**
+   * 菜单和编辑区是否分离
+   */
+  isSeparation: PropTypes.bool,
+  /**
+   * 编辑器 z-index 默认为 10000，可以自行调整。
+   */
+  zIndex: PropTypes.number,
+  /**
+   * 可以修改 placeholder 的提示文字。
+   */
+  placeholder: PropTypes.string,
+  /**
+   * 编辑器初始化时，默认会自动 focus 到编辑区域,设置为false取消自动 focus
+   */
+  focus: PropTypes.bool,
+  /**
+   * 编辑器 customAlert 是对全局的alert做了统一处理，默认为 window.alert。
+   * 如觉得浏览器自带的alert体验不佳，可自定义 alert，以便于达到与自身项目统一的alert效果。
+   * function(s,t){ switch(t) { case 'success': break }}
+   */
+  customAlert: PropTypes.func,
+  /**
+   * 设置编辑器的内容
+   */
+  htmlContent: PropTypes.string,
+  /**
+   * 追加新内容
+   */
+  appendHtmlContent: PropTypes.string,
+  /**
+   * 获取html，需要注意的是：从编辑器中获取的 html 代码是不包含任何样式的纯 html，如果显示的时候需要对其中的 <table> <code> <blockquote> 等标签进行自定义样式（这样既可实现多皮肤功能）
+   */
+  getHtml: PropTypes.func,
+  /**
+   * 获取text文本
+   */
+  getText: PropTypes.func,
+  /**
+   * 获取 JSON 格式的内容,格式如下
+   * [
+  {
+      "tag": "p",
+      "attrs": [],
+      "children": [
+          "欢迎使用 ",
+          {
+              "tag": "b",
+              "attrs": [],
+              "children": [ "wangEditor" ]
+          },
+          " 富文本编辑器"
+      ]
+  },
+  {
+      "tag": "p",
+      "attrs": [],
+      "children": [
+          {
+              "tag": "img",
+              "attrs": [
+                  { "name": "src", "value": "xxx.png" },
+                  { "name": "style", "value": "max-width:100%;" }
+              ]
+          }
+      ]
+  }
+  ]
+   */
+  getJSON: PropTypes.func,
+  /**
+   * 设置JSON
+   */
+  setJSON: PropTypes.array,
+  /**
+   * 清空编辑器内容
+   */
+  clearContent: PropTypes.bool,
+  /**
+   * 配置历史记录
+   * 当前历史记录存在两种模式，标准模式（主流浏览器）和兼容模式（IE 和 旧版 Edge）,我们可以通过compatibleMode 这个属性来配置当前的历史记录模式，返回 true 表示使用兼容模式；返回 false 使用标准模式你也可以使用 historyMaxSize 来自定义你的记录步数。
+   * 当我们使用兼容模式的时候，如果需要修改记录的延迟时间（用户无操作 xxx 毫秒后进行记录），可通过 onchangeTimeout 配置。
+   * compatibleMode = ()=>{ return true }
+   */
+  compatibleMode: PropTypes.func,
+  /**
+   * 定义显示哪些菜单和菜单的顺序。
+   * 所有菜单['head',
+  'bold',
+  'fontSize',
+  'fontName',
+  'italic',
+  'underline',
+  'strikeThrough',
+  'indent',
+  'lineHeight',
+  'foreColor',
+  'backColor',
+  'link',
+  'list',
+  'todo',
+  'justify',
+  'quote',
+  'emoticon',
+  'image',
+  'video',
+  'table',
+  'code',
+  'splitLine',
+  'undo',
+  'redo',]
+   */
+  menus: PropTypes.array,
+  /**
+   * 当只需剔除少数菜单的时候，直接设置不需要的菜单
+   * 不要同时使用 menus 和 excludeMenus，以免引起冲突和混乱。
+   * 
+   */
+  excludeMenus: PropTypes.array,
+  /**
+   * 编辑器的字体颜色和背景色
+   */
+  colors: PropTypes.array,
+  /**
+   * 编辑器的字体
+   */
+  fontNames: PropTypes.array,
+  /**
+   * 编辑器的字号
+   * fontSizes = {
+  'x-small': { name: '10px', value: '1' },
+  'small': { name: '13px', value: '2' },
+  'normal': { name: '16px', value: '3' },
+  'large': { name: '18px', value: '4' },
+  'x-large': { name: '24px', value: '5' },
+  'xx-large': { name: '32px', value: '6' },
+  'xxx-large': { name: '48px', value: '7' },
+  }
+  【特别注意】上述配置中key 的值（即 x-small small normal 等这些）不可改变，key 不可增加，只能减少。
+  value: '1 - 7' 也不可改变，也不可增加，只能减少。而且，value 和 key 必须对应起来，例如 small 就必须对应 2
+  因此，上述配置中，你只能修改 name 。但修改之后，不会生效，还需要做一些调整。
+  以 'large': { name: '18px', value: '4' } 这个举例。 编辑器设置这个 font-size ，会生成 <font size="4">...</font> 。所以，你还需要增加下面的 css 代，让 size="4" 对应到 font-size: 18px; 。
+  font[size="4"] {
+  font-size: 18px;
+  }
+   */
+  fontSizes: PropTypes.object,
+  /**
+   * 编辑器的行高
+   */
+  lineHeights: PropTypes.array,
+  /**
+   * 配置表情图标。表情菜单的 panel 中，支持多 tab 
+   * const SINA_URL_PATH = 'http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal'
+  emotions = [
+  {
+      title: '新浪', // tab 的标题
+      type: 'image', // 'emoji' 或 'image' ，即 emoji 形式或者图片形式
+      content: [
+          { alt: '[坏笑]', src: `${SINA_URL_PATH}/50/pcmoren_huaixiao_org.png` },
+          { alt: '[舔屏]', src: `${SINA_URL_PATH}/40/pcmoren_tian_org.png` },
+          { alt: '[污]', src: `${SINA_URL_PATH}/3c/pcmoren_wu_org.png` },
+      ]
+  },
+  {
+      title: 'emoji',  // tab 的标题
+      type: 'emoji', // 'emoji' / 'image'
+      // emoji 表情，content 是一个数组即可
+      content: '😀 😃 😄 😁 😆 😅 😂 😊 😇 🙂 🙃 😉 😓 😪 😴 🙄 🤔 😬 🤐'.split(/\s/),
+  }
+  ]
+   */
+  emotions: PropTypes.array,
+  /**
+   * 使用showFullScreen = true 来展示全屏功能按钮, 默认是true, 就是不加这个属性默认展示全屏功能按钮
+   * 注意：工具栏和编辑器区域分离的时候不支持全屏功能
+   */
+  showFullScreen: PropTypes.bool,
+  /**
+   * 提供了API供用户使用是否全屏（同样不支持工具栏和编辑区域分离的情况）
+   * open为打开全屏，close为关闭
+   */
+  fullScreen: PropTypes.oneOf(['open', 'close']),
+  /**
+   * 编辑器的菜单栏提示
+   */
+  showMenuTooltips: PropTypes.bool,
+  /**
+   * 配置 onchange 函数之后，用户操作（鼠标点击、键盘打字等）导致的内容变化之后，会自动触发 onchange 函数执行。
+   * onChange = (newHtml) = { console.log(newHtml) }
+   * 如果需要修改 onchange 触发的延迟时间（ onchange 会在用户无任何操作的 xxx 毫秒之后被触发），可通过 onchangeTimeout 配置
+   */
+  onChange: PropTypes.func,
+  /**
+   * 聚焦的回调
+   * onFocus = (newHtml) = { console.log(newHtml) }
+   */
+  onFocus: PropTypes.func,
+  /**
+   * 失焦的回调
+   * onBlur = (newHtml) = { console.log(newHtml) }
+   */
+  onBlur: PropTypes.func,
+  /**
+   * 插入网络图片的回调事件
+   * linkImgCallback =(src,alt,href)=>{ console.log(src,alt,href) }
+   */
+  linkImgCallback: PropTypes.func,
+  /**
+   * 插入网络视频的回调事件  
+   * onlineVideoCallback=(video)=>{ console.log(video) }
+   */
+  onlineVideoCallback: PropTypes.func,
+  /**
+   * 插入链接的校验
+   * linkCheck = (text,link)=>{ // 1. 返回 true ，说明检查通过;    // // 2. 返回一个字符串，说明检查未通过，编辑器会阻止链接插入。会 alert 出错误信息（即返回的字符串）
+  // return '链接有 xxx 错误'
+   // 3. 返回 undefined（即没有任何返回），说明检查未通过，编辑器会阻止链接插入。
+  // 此处，你可以自定义提示错误信息，自由发挥 }
+   */
+  linkCheck: PropTypes.func,
+  /**
+   * 插入网络视频的校验
+   * onlineVideoCheck =(video)=>{ 与插入链接校验一致 }
+   */
+  onlineVideoCheck: PropTypes.func,
+  /**
+   * 从其他地方（如网页、word 等）复制文本到编辑器中，编辑器会默认过滤掉复制文本的样式，这样可以让编辑器内容更加简洁。因为复制过来的文本样式，可能会比较混乱，且不可控。
+   */
+  pasteFilterStyle: PropTypes.bool,
+  /**
+   * 从其他页面（如网页、word 等）复制过来的内容，除了包含文字还可能包含图片，这些图片一般都是外域的（可能会有防盗链处理，导致图片不显示）。
+   * 可以通过配置 pasteIgnoreImg = true 来忽略粘贴的图片。如果复制的内容有图片又有文字，则只粘贴文字，不粘贴图片。
+   */
+  pasteIgnoreImg: PropTypes.bool,
+  /**
+   * 使用者可通过 pasteTextHandle 对粘贴的文本内容进行自定义的过滤、处理等操作，然后返回处理之后的文本内容。编辑器最终会粘贴用户处理之后并且返回的的内容。
+   * pasteTextHandle =(pasteStr)=> { // 对粘贴的文本进行处理，然后返回处理后的结果 return pasteStr + '巴拉巴拉'  }
+   */
+  pasteTextHandle: PropTypes.func,
+  /**
+   * 配置服务端接口 【注意】如果上传图片遇到问题，请打开浏览器开发者工具，查看 console.error 输出的错误信息。
+   * 配置 server 接口地址
+   * server 接口返回格式，重要！！！接口要返回 application/json 格式，格式要求如下：
+   * {
+  // errno 即错误代码，0 表示没有错误。
+  //       如果有错误，errno != 0，可通过下文中的监听函数 fail 拿到该错误码进行自定义处理
+  "errno": 0,
+   // data 是一个数组，返回图片Object，Object中包含需要包含url、alt和href三个属性,它们分别代表图片地址、图片文字说明和跳转链接,alt和href属性是可选的，可以不设置或设置为空字符串,需要注意的是url是一定要填的。
+  "data": [
+      {
+          url: "图片地址",
+          alt: "图片文字说明",
+          href: "跳转链接"
+      },
+      {
+          url: "图片地址1",
+          alt: "图片文字说明1",
+          href: "跳转链接1"
+      },
+      "……"
+  ]
+  }
+   */
+  uploadImgServer: PropTypes.string,
+  /**
+   * 默认限制图片大小是 5M ，可以自己修改
+   * uploadImgMaxSize = 2 * 1024 * 1024 // 2M
+   */
+  uploadImgMaxSize: PropTypes.number,
+  /**
+   * 限制图片类型
+   * uploadImgAccept = ['jpg', 'jpeg', 'png', 'gif', 'bmp']
+   */
+  uploadImgAccept: PropTypes.array,
+  /**
+   * 限制一次最多能传几张图片,默认为 100 张，需要限制可自己配置。
+   */
+  uploadImgMaxLength: PropTypes.number,
+  /**
+   * 上传图片时可自定义传递一些参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
+   * 如果需要将参数拼接到 url 中，可再加上如下配置。uploadImgParamsWithUrl = true
+   */
+  uploadImgParams: PropTypes.object,
+  /**
+   * 上传图片时可自定义传递一些参数,当需要将参数拼接到 url 中，可再加上如下配置。
+   */
+  uploadImgParamsWithUrl: PropTypes.bool,
+  /**
+   * 上传图片时，可自定义 filename
+   */
+  uploadFileName: PropTypes.string,
+  /**
+   * 上传图片时添加 http 请求的 header 。
+   */
+  uploadImgHeaders: PropTypes.object,
+  /**
+   * 跨域上传中如果需要传递 cookie 需设置 withCredentials=true 。
+   */
+  withCredentials: PropTypes.bool,
+  /**
+   * timeout 即上传接口等待的最大时间，默认是 10 秒钟，可以自己修改。
+   * uploadImgTimeout = 5 * 1000
+   */
+  uploadImgTimeout: PropTypes.number,
+  /**
+   * 可使用回调函数，对上传图片的不同阶段，做相应处理。代码示例如下
+   * uploadImgHooks = {
+  // 上传图片之前
+  before: function(xhr) {
+      console.log(xhr)
+       // 可阻止图片上传
+      return {
+          prevent: true,
+          msg: '需要提示给用户的错误信息'
+      }
+  },
+  // 图片上传并返回了结果，图片插入已成功
+  success: function(xhr) {
+      console.log('success', xhr)
+  },
+  // 图片上传并返回了结果，但图片插入时出错了
+  fail: function(xhr, editor, resData) {
+      console.log('fail', resData)
+  },
+  // 上传图片出错，一般为 http 请求的错误
+  error: function(xhr, editor, resData) {
+      console.log('error', xhr, resData)
+  },
+  // 上传图片超时
+  timeout: function(xhr) {
+      console.log('timeout')
+  },
+  // 图片上传并返回了结果，想要自己把图片插入到编辑器中
+  // 例如服务器端返回的不是 { errno: 0, data: [...] } 这种格式，可使用 customInsert
+  customInsert: function(insertImgFn, result) {
+      // result 即服务端返回的接口
+      console.log('customInsert', result)
+       // insertImgFn 可把图片插入到编辑器，传入图片 src ，执行函数即可
+      insertImgFn(result.data[0])
+  }
+  }
+   */
+  uploadImgHooks: PropTypes.object,
+  /**
+   * 如果想完全自己实现图片上传的过程，如上传图片到某个云服务器，可以使用如下代码。
+   * customUploadImg=(resultFiles, insertImgFn)={  
+   * resultFiles 是 input 中选中的文件列表
+   * insertImgFn 是获取图片 url 后，插入到编辑器的方法
+   * 上传图片，返回结果，将图片插入到编辑器中
+   * insertImgFn(imgUrl)
+   * }
+   * 
+   * 可以上传至阿里云OSS，利用自己实现上传功能来实现阿里云OSS的上传
+   * let client = new OSS({})
+   * customUploadImg = (resultFiles, insertImgFn)=>{
+   *  client.put('myImg', resultFiles[0])
+    .then(function (res) {
+      // 上传图片，返回结果，将图片插入到编辑器中
+      insertImgFn(res.url)
+    }).catch(function (err) {
+      console.log(err)
+    })
+   * }
+   */
+  customUploadImg: PropTypes.func,
+  /**
+   * 设置uploadImgShowBase64 = true 可使用 base64 格式保存图片。即，可选择本地图片，编辑器用 base64 格式显示图片
+   * 【注意】uploadImgShowBase64（base64 格式）和 uploadImgServer（上传图片到服务器）两者不能同时使用！！！
+   */
+  uploadImgShowBase64: PropTypes.bool,
+  /**
+   * 设置showLinkImg = false 即可隐藏插入网络图片的功能，即只保留上传本地图片。
+   */
+  showLinkImg: PropTypes.bool,
+  /**
+   * 网络图片设置alt和跳转链接
+   * 在wangEditor中，插入网络图片功能可以分别设置添加alt属性和跳转链接选项，默认情况下这两个选项是开启的，如果不需要这两个选项，可以参考如下代码：
+   *  配置alt选项 showLinkImgAlt = false  配置超链接 showLinkImgHref = false
+   */
+  showLinkImgAlt: PropTypes.bool,
+  /**
+   * 配置超链接
+   */
+  showLinkImgHref: PropTypes.bool,
+  /**
+   * 上传视频配置服务端接口
+   * server 接口返回格式，重要！！接口要返回 application/json 格式，格式要求如下：
+   * {
+  // errno 即错误代码，0 表示没有错误。
+  //       如果有错误，errno != 0，可通过下文中的监听函数 fail 拿到该错误码进行自定义处理
+  "errno": 0,
+   // data 是一个对象，返回视频的线上地址
+  "data": {
+      "url": "视频1地址",
+  }
+  }
+   * 
+   */
+  uploadVideoServer: PropTypes.string,
+  /**
+   * 默认限制视频大小是 1024m ，可以自己修改。
+   * uploadVideoMaxSize = 1 * 1024 * 1024 * 1024 // 1024m
+   */
+  uploadVideoMaxSize: PropTypes.number,
+  /**
+   * 限制类型uploadVideoAccept = ['mp4']
+   */
+  uploadVideoAccept: PropTypes.array,
+  /**
+   * 上传视频时可自定义传递一些参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端
+   * 如果需要将参数拼接到 url 中，可再加上如下配置 uploadVideoParamsWithUrl = true
+   */
+  uploadVideoParams: PropTypes.object,
+  /**
+   * 上传视频时可自定义传递一些参数,如果需要将参数拼接到 url 中，可再加上如下配置 
+   * uploadVideoParamsWithUrl = true
+   */
+  uploadVideoParamsWithUrl: PropTypes.bool,
+  /**
+   * 上传视频时，可自定义 filename ，即在使用 formData.append(name, file) 添加视频文件时，自定义第一个参数。
+   */
+  uploadVideoName: PropTypes.string,
+  /**
+   * 上传视频时添加 http 请求的 header 。
+   */
+  uploadVideoHeaders: PropTypes.object,
+  /**
+   * 跨域上传中如果需要传递 cookie 需设置 withCredentials 。
+   */
+  withVideoCredentials: PropTypes.bool,
+  /**
+   * timeout 即上传接口等待的最大时间，默认是 5分钟，可以自己修改。
+   * uploadVideoTimeout =  1000 * 60 * 5
+   */
+  uploadVideoTimeout: PropTypes.number,
+  /**
+   * 使用回调函数，对上传视频的不同阶段，做相应处理;
+   * 参考图片的上传回调
+   */
+  uploadVideoHooks: PropTypes.object,
+  /**
+   *  如果想完全自己实现视频上传的过程，如上传视频到某个云服务器，参考上传图片
+   */
+  customUploadVideo: PropTypes.func,
+  /**
+   * 隐藏插入网络视频的功能
+   * showLinkVideo = false 即可隐藏插入网络视频的功能，即只保留上传本地视频。
+   */
+  showLinkVideo: PropTypes.bool,
+  /**
+   * 通过 onCatalogChange 可以实时获取编辑器所有标题，标题变化即可触发该回调函数。
+   * onCatalogChange=(headList)=>{  }
+   */
+  onCatalogChange: PropTypes.func,
+  /**
+   * 要滚动到标题位置的id，通过onCatalogChange获取
+   */
+  headId: PropTypes.string
+};
+export default WangEditor;