feat(core): 上传图片增加自定义支持

README.md

@@ -44,6 +44,7 @@ import 're-editor/lib/styles/index.css'
 | onChange| 编辑器更改内容的回调|(value: [Value](https://docs.slatejs.org/slate-core/value)) => void
 | placeholder | 占位文本 | string
 | readOnly | 只读模式 | boolean
+| onImageUpload | 自定义图床 | (file: File) => Promise<url: string>
 
 ## 自定义
 编辑器拆分为两个部分，内容编辑区域 和 工具条，下面介绍如何自定义工具条

babel.config.js

@@ -4,6 +4,7 @@ const presets = [
 ];
 
 const plugins = [
+  ["@babel/plugin-transform-runtime", { "regenerator": true }],
   "@babel/plugin-syntax-dynamic-import",
   "@babel/plugin-proposal-export-namespace-from",
   ["@babel/plugin-proposal-decorators", { "legacy": true }],

packages/core/package.json

@@ -22,6 +22,7 @@
     "react-dom": ">=16.3.0"
   },
   "dependencies": {
+    "@babel/plugin-transform-runtime": "^7.4.3",
     "classnames": "^2.2.6",
     "immutable": "3.8.1",
     "prismjs": "^1.15.0",

packages/core/src/scripts/components/ReEditor.js

@@ -44,11 +44,12 @@ export default class ReEditor extends React.Component {
   };
 
   handlePaste = (event, editor, next) => {
+    const { onImageUpload } = this.props;
     const transfer = getEventTransfer(event);
     const type = getPasteType(transfer);
     const paste = paster[type];
     if (paste) {
-      return paste({ editor, transfer });
+      return paste({ editor, transfer, onImageUpload });
     }
     next();
   };
@@ -174,7 +175,8 @@ export default class ReEditor extends React.Component {
       autoFocus,
       className,
       spellCheck,
-      readOnly
+      readOnly,
+      onImageUpload
     } = this.props;
     const { value, data } = this.state;
 
@@ -197,7 +199,10 @@ export default class ReEditor extends React.Component {
           spellCheck={spellCheck}
           readOnly={readOnly}
         />
-        <ImageUploader insertImage={this.handleInsertImage} />
+        <ImageUploader
+          onImageUpload={onImageUpload}
+          insertImage={this.handleInsertImage}
+        />
       </DataContext.Provider>
     );
   }

packages/core/src/scripts/components/utils/ImageUploader.js

@@ -8,16 +8,21 @@ import DataContext from '~/components/contexts/Data';
   onChangeData
 }))
 export default class ImageUploader extends React.Component {
-  handleFileUpload = event => {
-    const { insertImage } = this.props;
+  handleFileUpload = async event => {
+    const { insertImage, onImageUpload } = this.props;
     const { files } = event.target;
     const file = files[0];
     if (file) {
-      const reader = new FileReader();
-      reader.readAsDataURL(file);
-      reader.addEventListener('load', () => {
-        insertImage(reader.result);
-      });
+      if (onImageUpload) {
+        const url = await onImageUpload(file);
+        insertImage(url);
+      } else {
+        const reader = new FileReader();
+        reader.readAsDataURL(file);
+        reader.addEventListener('load', () => {
+          insertImage(reader.result);
+        });
+      }
     }
   };
 

packages/core/src/scripts/events/paste/image.js

@@ -1,11 +1,16 @@
 import command from '~/commands';
 
-export default function({ transfer, editor }) {
+export default async function({ transfer, editor, onImageUpload }) {
   const { files } = transfer;
   const file = files[0];
-  const reader = new FileReader();
-  reader.readAsDataURL(file);
-  reader.addEventListener('load', () => {
-    command(editor)('image', reader.result);
-  });
+  if (onImageUpload) {
+    const url = await onImageUpload(file);
+    command(editor)('image', url);
+  } else {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.addEventListener('load', () => {
+      command(editor)('image', reader.result);
+    });
+  }
 }

packages/examples/package.json

@@ -23,6 +23,8 @@
     "webpack-dev-server": "^3.2.1"
   },
   "dependencies": {
+    "@babel/plugin-transform-runtime": "^7.4.3",
+    "axios": "^0.18.0",
     "clean-webpack-plugin": "^2.0.1",
     "re-editor": "0.4.3",
     "react": "^16.8.4",

packages/examples/src/scripts/CustomUploadImageApp.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import ReEditor from 're-editor';
+
+export default class App extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      value: JSON.parse(localStorage.getItem('re-editor-value'))
+    };
+  }
+
+  handleChange = value => {
+    localStorage.setItem('re-editor-value', JSON.stringify(value.toJS()));
+  };
+
+  handleImageUpload = async file => {
+    const formData = new FormData();
+    formData.append('smfile', file);
+    const res = await fetch('https://sm.ms/api/upload', {
+      method: 'POST',
+      body: formData
+    });
+    const { code, data } = await res.json();
+    if (code === 'success') {
+      return data.url;
+    }
+  };
+
+  render() {
+    const { value } = this.state;
+    return (
+      <div className="container">
+        <h1>ReEditor</h1>
+        <ReEditor
+          value={value}
+          onChange={this.handleChange}
+          placeholder="请输入内容"
+          onImageUpload={this.handleImageUpload}
+        />
+      </div>
+    );
+  }
+}

packages/re-editor/package.json

@@ -18,6 +18,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "@babel/plugin-transform-runtime": "^7.4.3",
     "@re-editor/core": "0.4.3",
     "@re-editor/toolbar-antd": "0.4.3"
   },

packages/re-editor/src/scripts/ReEditor.js

@@ -24,7 +24,7 @@ export default class ReEditor extends React.Component {
   };
 
   render() {
-    const { placeholder, readOnly } = this.props;
+    const { placeholder, readOnly, onImageUpload } = this.props;
     const { value } = this.state;
 
     return (
@@ -39,6 +39,7 @@ export default class ReEditor extends React.Component {
           value={value}
           onChange={this.handleChange}
           readOnly={readOnly}
+          onImageUpload={onImageUpload}
         />
       </div>
     );

packages/toolbar-antd/package.json

@@ -18,6 +18,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "@babel/plugin-transform-runtime": "^7.4.3",
     "@re-editor/core": "0.4.3",
     "antd": "^3.15.0"
   },

yarn.lock

@@ -599,6 +599,16 @@
   dependencies:
     regenerator-transform "^0.13.4"
 
+"@babel/plugin-transform-runtime@^7.4.3":
+  version "7.4.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.4.3.tgz#4d6691690ecdc9f5cb8c3ab170a1576c1f556371"
+  integrity sha512-7Q61bU+uEI7bCUFReT1NKn7/X6sDQsZ7wL1sJ9IYMAO7cI+eg6x9re1cEw2fCRMbbTVyoeUKWSV1M6azEfKCfg==
+  dependencies:
+    "@babel/helper-module-imports" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.0.0"
+    resolve "^1.8.1"
+    semver "^5.5.1"
+
 "@babel/plugin-transform-shorthand-properties@^7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.2.0.tgz#6333aee2f8d6ee7e28615457298934a3b46198f0"
@@ -2047,6 +2057,14 @@ aws4@^1.8.0:
   resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.8.0.tgz#f0e003d9ca9e7f59c7a508945d7b2ef9a04a542f"
   integrity sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==
 
+axios@^0.18.0:
+  version "0.18.0"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.18.0.tgz#32d53e4851efdc0a11993b6cd000789d70c05102"
+  integrity sha1-MtU+SFHv3AoRmTts0AB4nXDAUQI=
+  dependencies:
+    follow-redirects "^1.3.0"
+    is-buffer "^1.1.5"
+
 babel-eslint@^10.0.1:
   version "10.0.1"
   resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-10.0.1.tgz#919681dc099614cd7d31d45c8908695092a1faed"
@@ -4215,7 +4233,7 @@ fn-name@~2.0.1:
   resolved "https://registry.yarnpkg.com/fn-name/-/fn-name-2.0.1.tgz#5214d7537a4d06a4a301c0cc262feb84188002e7"
   integrity sha1-UhTXU3pNBqSjAcDMJi/rhBiAAuc=
 
-follow-redirects@^1.0.0:
+follow-redirects@^1.0.0, follow-redirects@^1.3.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.7.0.tgz#489ebc198dc0e7f64167bd23b03c4c19b5784c76"
   integrity sha512-m/pZQy4Gj287eNy94nivy5wchN3Kp+Q5WgUPNy5lJSZ3sgkVKSYV/ZChMAQVIgx1SqfZ2zBZtPA2YlXIWxxJOQ==
@@ -8491,6 +8509,13 @@ resolve@^1.1.7, resolve@^1.10.0, resolve@^1.3.2, resolve@^1.4.0, resolve@^1.5.0,
   dependencies:
     path-parse "^1.0.6"
 
+resolve@^1.8.1:
+  version "1.10.1"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.10.1.tgz#664842ac960795bbe758221cdccda61fb64b5f18"
+  integrity sha512-KuIe4mf++td/eFb6wkaPbMDnP6kObCaEtIDuHOUED6MNUo4K670KZUHuuvYPZDxNF0WVLw49n06M2m2dXphEzA==
+  dependencies:
+    path-parse "^1.0.6"
+
 restore-cursor@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-2.0.0.tgz#9f7ee287f82fd326d4fd162923d62129eee0dfaf"