前端：抽出 HtmlEditor 组件

前端：完善商品编辑，基本算完成了

admin-web/src/components/Editor/HtmlEditor.js

@@ -0,0 +1,116 @@
+import React from "react";
+
+import 'braft-editor/dist/index.css'
+import BraftEditor from 'braft-editor'
+import { ContentUtils } from 'braft-utils'
+import { ImageUtils } from 'braft-finder'
+
+import {fileGetQiniuToken} from "../../services/admin";
+import uuid from "js-uuid";
+import * as qiniu from "qiniu-js";
+import {Icon, Upload} from "antd";
+
+class HtmlEditor extends React.Component {
+
+  state = {
+    editorState: BraftEditor.createEditorState(null),
+  };
+
+  handleChange = (editorState) => {
+    this.setState({editorState})
+  };
+
+  uploadHandler = async (param) => {
+    if (!param.file) {
+      return false
+    }
+    debugger;
+    const tokenResult = await fileGetQiniuToken();
+    if (tokenResult.code !== 0) {
+      alert('获得七牛上传 Token 失败');
+      return false;
+    }
+    let token = tokenResult.data;
+    let that = this;
+    const reader = new FileReader();
+    const file = param.file;
+    reader.readAsArrayBuffer(file);
+    let fileData = null;
+    reader.onload = (e) => {
+      let key = uuid.v4(); // TODO 芋艿，可能后面要优化。MD5？
+      let observable = qiniu.upload(file, key, token); // TODO 芋艿，最后后面去掉 qiniu 的库依赖，直接 http 请求，这样更轻量
+      observable.subscribe(function () {
+        // next
+      }, function (e) {
+        // error
+        // TODO 芋艿，后续补充
+        // debugger;
+      }, function (response) {
+        // complete
+        that.setState({
+          editorState: ContentUtils.insertMedias(that.state.editorState, [{
+            type: 'IMAGE',
+            url: 'http://static.shop.iocoder.cn/' + response.key,
+          }])
+        })
+      });
+    }
+  };
+
+  getHtml() {
+    return this.state.editorState.toHTML();
+  }
+
+  setHtml = (html) => {
+    this.setState({
+      editorState: BraftEditor.createEditorState(html),
+    })
+  };
+
+  isEmpty = () => {
+    return this.state.editorState.isEmpty();
+  };
+
+  render() {
+    // const controls = ['bold', 'italic', 'underline', 'text-color', 'separator', 'link', 'separator'];
+    const extendControls = [
+      {
+        key: 'antd-uploader',
+        type: 'component',
+        component: (
+          <Upload
+            accept="image/*"
+            showUploadList={false}
+            customRequest={this.uploadHandler}
+          >
+            {/* 这里的按钮最好加上type="button"，以避免在表单容器中触发表单提交，用Antd的Button组件则无需如此 */}
+            <button type="button" className="control-item button upload-button" data-title="插入图片">
+              <Icon type="picture" theme="filled" />
+            </button>
+          </Upload>
+        )
+      }
+    ];
+
+    return (
+      <div style={{border: '1px solid #d1d1d1', 'border-radius': '5px'}}>
+        <BraftEditor
+          value={this.state.editorState}
+          onChange={this.handleChange}
+          defaultValue={this.state.initialContent}
+          // controls={controls}
+          extendControls={extendControls}
+          contentStyle={{height: 200}}
+        />
+      </div>
+    )
+  }
+
+}
+
+
+{/**/}
+
+// </div>
+
+export default HtmlEditor;

admin-web/src/components/Image/PicturesWall.js

@@ -77,7 +77,6 @@ class PicturesWall extends React.Component {
     // });
 
     // 使用 FileReader 将上传的文件转换成二进制流，满足 'application/octet-stream' 格式的要求
-    debugger;
     const reader = new FileReader();
     reader.readAsArrayBuffer(file);
     let fileData = null;

admin-web/src/components/Product/ProductAttrSelectFormItem.js

@@ -68,7 +68,7 @@ class AttrValueSelect extends Select {
 export default class ProductAttrSelectFormItem extends PureComponent {
 
   handleSelectAttr = (value, option) => {
-    debugger;
+    // debugger;
     // console.log(value);
     // console.log(option);
     // debugger;