add:粘贴上传图片;fix:通用表情修改

lib/App.js

@@ -85,10 +85,8 @@ var App = function (_Component) {
 
     _this.state = {
       loading: {},
-
       // oss 配置
       oss: {},
-
       // 评论数据
       list: [],
       page: 1,
@@ -103,7 +101,8 @@ var App = function (_Component) {
       commentId: "",
       userId: "",
       content: "",
-      replyPage: 1
+      replyPage: 1,
+      emojiList: []
     };
     _this.handleChangeLoading = _this.handleChangeLoading.bind(_this);
     _this.sCreateComment = _this.sCreateComment.bind(_this);
@@ -136,6 +135,7 @@ var App = function (_Component) {
     key: "componentDidMount",
     value: function componentDidMount() {
       this.loadLocales();
+      this.loadEmoji();
     }
 
     /**
@@ -178,6 +178,25 @@ var App = function (_Component) {
         });
       });
     }
+
+    /**
+     * 加载表情包
+     */
+
+  }, {
+    key: "loadEmoji",
+    value: function loadEmoji() {
+      var _this3 = this;
+
+      this.axios.get(this.props.emojiAPI + "/emoticons").then(function (response) {
+        var emojiMap = {};
+        response.data.list.forEach(function (item) {
+          emojiMap[item.name] = item.url;
+        });
+        window.sessionStorage.setItem("emojiMap", JSON.stringify(emojiMap));
+        _this3.setState({ emojiList: response.data.list });
+      }).catch(this.errorHandler);
+    }
   }, {
     key: "handleEdit",
     value: function handleEdit(_ref) {
@@ -255,7 +274,7 @@ var App = function (_Component) {
   }, {
     key: "sGetComment",
     value: function sGetComment() {
-      var _this3 = this;
+      var _this4 = this;
 
       var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
           _ref2$page = _ref2.page,
@@ -278,7 +297,7 @@ var App = function (_Component) {
 
         if (list) {
           var newList = list;
-          var oldList = _this3.state.list;
+          var oldList = _this4.state.list;
 
           if (pageType === "more") {
             if (page > 1) {
@@ -293,20 +312,20 @@ var App = function (_Component) {
             window.scrollTo(0, 0);
           }
 
-          _this3.setState({
+          _this4.setState({
             list: newList,
             page: page,
             total: total
           });
-          _this3.props.onCountChange(total);
+          _this4.props.onCountChange(total);
         } else {
           _message3.default.info(_reactIntlUniversal2.default.get("message.noMoreComment"));
-          _this3.setState({
+          _this4.setState({
             isNoMoreComment: true
           });
         }
       }).catch(this.errorHandler).finally(function () {
-        _this3.handleChangeLoading("sGetComment", false);
+        _this4.handleChangeLoading("sGetComment", false);
       });
     }
 
@@ -317,7 +336,7 @@ var App = function (_Component) {
   }, {
     key: "sGetReply",
     value: function sGetReply() {
-      var _this4 = this;
+      var _this5 = this;
 
       var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
           commentId = _ref3.commentId,
@@ -333,7 +352,7 @@ var App = function (_Component) {
         if (!response.data.list) {
           _message3.default.info(_reactIntlUniversal2.default.get("message.noMoreData"));
         }
-        var list = _this4.state.list.map(function (item) {
+        var list = _this5.state.list.map(function (item) {
           if (item.id === commentId) {
             if (!item.replies) item.replies = [];
             if (response.data.list) {
@@ -355,9 +374,9 @@ var App = function (_Component) {
           }
           return item;
         });
-        _this4.setState({ list: list });
+        _this5.setState({ list: list });
       }).catch(this.errorHandler).finally(function () {
-        _this4.handleChangeLoading("sGetReply", false);
+        _this5.handleChangeLoading("sGetReply", false);
       });
     }
 
@@ -369,7 +388,7 @@ var App = function (_Component) {
   }, {
     key: "sCreateComment",
     value: function sCreateComment() {
-      var _this5 = this;
+      var _this6 = this;
 
       var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
           content = _ref4.content;
@@ -394,14 +413,14 @@ var App = function (_Component) {
         },
         withCredentials: true
       }).then(function (response) {
-        if (_this5.props.showAlertComment) {
+        if (_this6.props.showAlertComment) {
           _message3.default.success(_reactIntlUniversal2.default.get("message.success"));
         }
         if ((0, _helper.isFunction)(cb)) cb(response.data);
         // 将数据写入到 list 中
         // 临时插入
         // 等到获取数据之后，删除临时数据
-        var _state = _this5.state,
+        var _state = _this6.state,
             list = _state.list,
             total = _state.total;
 
@@ -409,10 +428,10 @@ var App = function (_Component) {
           replies: [],
           isTemporary: true // 临时的数据
         }));
-        _this5.setState({ list: list, total: total + 1 });
-        _this5.props.onCountChange(total + 1);
+        _this6.setState({ list: list, total: total + 1 });
+        _this6.props.onCountChange(total + 1);
       }).catch(this.errorHandler).finally(function () {
-        _this5.handleChangeLoading("sCreateComment", false);
+        _this6.handleChangeLoading("sCreateComment", false);
       });
     }
 
@@ -423,7 +442,7 @@ var App = function (_Component) {
   }, {
     key: "sDeleteComment",
     value: function sDeleteComment(commentId) {
-      var _this6 = this;
+      var _this7 = this;
 
       this.handleChangeLoading("sDeleteComment", true);
       var API = this.props.API;
@@ -432,7 +451,7 @@ var App = function (_Component) {
         method: "delete",
         withCredentials: true
       }).then(function () {
-        var _state2 = _this6.state,
+        var _state2 = _this7.state,
             list = _state2.list,
             total = _state2.total;
 
@@ -442,11 +461,11 @@ var App = function (_Component) {
         var deletedItem = list.find(function (item) {
           return item.id === commentId;
         });
-        _this6.setState({ list: res, total: total - 1 });
-        _this6.props.onDelete(_constant.COMMENT_TYPE.COMMENT, deletedItem);
-        _this6.props.onCountChange(total - 1);
+        _this7.setState({ list: res, total: total - 1 });
+        _this7.props.onDelete(_constant.COMMENT_TYPE.COMMENT, deletedItem);
+        _this7.props.onCountChange(total - 1);
       }).catch(this.errorHandler).finally(function () {
-        _this6.handleChangeLoading("sDeleteComment", false);
+        _this7.handleChangeLoading("sDeleteComment", false);
       });
     }
     /**
@@ -457,7 +476,7 @@ var App = function (_Component) {
   }, {
     key: "sUpdateComment",
     value: function sUpdateComment(_ref5) {
-      var _this7 = this;
+      var _this8 = this;
 
       var commentId = _ref5.commentId,
           content = _ref5.content;
@@ -472,7 +491,7 @@ var App = function (_Component) {
         },
         withCredentials: true
       }).then(function () {
-        var list = _this7.state.list;
+        var list = _this8.state.list;
 
         list = list.map(function (it) {
           if (it.id === commentId) {
@@ -482,10 +501,10 @@ var App = function (_Component) {
           }
           return it;
         });
-        _this7.props.onUpdateComment("comment");
-        _this7.setState({ list: list });
+        _this8.props.onUpdateComment("comment");
+        _this8.setState({ list: list });
       }).catch(this.errorHandler).finally(function () {
-        _this7.handleChangeLoading("sUpdateComment", false);
+        _this8.handleChangeLoading("sUpdateComment", false);
       });
     }
     /**
@@ -497,7 +516,7 @@ var App = function (_Component) {
   }, {
     key: "sCreateReply",
     value: function sCreateReply(data, cb) {
-      var _this8 = this;
+      var _this9 = this;
 
       if (!data.content) return this.error(_reactIntlUniversal2.default.get("message.replyNoNull"));
       this.handleChangeLoading("sCreateReply", true);
@@ -508,14 +527,14 @@ var App = function (_Component) {
         data: data,
         withCredentials: true
       }).then(function (response) {
-        if (_this8.props.showAlertReply) {
+        if (_this9.props.showAlertReply) {
           _message3.default.success(_reactIntlUniversal2.default.get("message.replySuccess"));
         }
         if ((0, _helper.isFunction)(cb)) cb(response.data);
         // 将数据写入到 list 中
         // 临时插入
         // 等到获取数据之后，删除临时数据
-        var list = _this8.state.list.map(function (item) {
+        var list = _this9.state.list.map(function (item) {
           if (item.id === data.comment_id) {
             if (!item.replies) item.replies = [];
             item.replies.push(_extends({}, response.data, {
@@ -525,9 +544,9 @@ var App = function (_Component) {
           }
           return item;
         });
-        _this8.setState({ list: list });
+        _this9.setState({ list: list });
       }).catch(this.errorHandler).finally(function () {
-        _this8.handleChangeLoading("sCreateReply", false);
+        _this9.handleChangeLoading("sCreateReply", false);
       });
     }
 
@@ -540,7 +559,7 @@ var App = function (_Component) {
   }, {
     key: "sDeleteReply",
     value: function sDeleteReply(replyId, commentId) {
-      var _this9 = this;
+      var _this10 = this;
 
       this.handleChangeLoading("sDeleteReply", true);
       var API = this.props.API;
@@ -550,7 +569,7 @@ var App = function (_Component) {
         withCredentials: true
       }).then(function () {
         var deletedItem = null;
-        var list = _this9.state.list.map(function (item) {
+        var list = _this10.state.list.map(function (item) {
           if (item.id === commentId) {
             var replies = item.replies.filter(function (item) {
               return item.id !== replyId;
@@ -563,10 +582,10 @@ var App = function (_Component) {
           }
           return item;
         });
-        _this9.setState({ list: list });
-        _this9.props.onDelete(_constant.COMMENT_TYPE.REPLY, deletedItem);
+        _this10.setState({ list: list });
+        _this10.props.onDelete(_constant.COMMENT_TYPE.REPLY, deletedItem);
       }).catch(this.errorHandler).finally(function () {
-        _this9.handleChangeLoading("sDeleteReply", false);
+        _this10.handleChangeLoading("sDeleteReply", false);
       });
     }
     /**
@@ -578,7 +597,7 @@ var App = function (_Component) {
   }, {
     key: "sUpdateReply",
     value: function sUpdateReply(_ref6) {
-      var _this10 = this;
+      var _this11 = this;
 
       var commentId = _ref6.commentId,
           content = _ref6.content,
@@ -597,11 +616,11 @@ var App = function (_Component) {
         withCredentials: true
       }).then(function () {
         for (var i = 1; i <= replyPage; i++) {
-          _this10.sGetReply({ commentId: commentId, page: i });
+          _this11.sGetReply({ commentId: commentId, page: i });
         }
-        _this10.props.onUpdateComment("reply");
+        _this11.props.onUpdateComment("reply");
       }).catch(this.errorHandler).finally(function () {
-        _this10.handleChangeLoading("sUpdateReply", false);
+        _this11.handleChangeLoading("sUpdateReply", false);
       });
     }
     /**
@@ -613,7 +632,7 @@ var App = function (_Component) {
   }, {
     key: "sCommentFavor",
     value: function sCommentFavor(commentId, favored) {
-      var _this11 = this;
+      var _this12 = this;
 
       this.handleChangeLoading("sCommentFavor", true);
       var API = this.props.API;
@@ -622,20 +641,20 @@ var App = function (_Component) {
         method: favored ? "delete" : "put",
         withCredentials: true
       }).then(function (response) {
-        if (_this11.props.showAlertFavor) {
+        if (_this12.props.showAlertFavor) {
           _message3.default.success(favored ? _reactIntlUniversal2.default.get("message.cancelLickSuccess") : _reactIntlUniversal2.default.get("message.likeSuccess"));
         }
         // 更新 list 中的该项数据的 favored
-        var list = _this11.state.list.map(function (item) {
+        var list = _this12.state.list.map(function (item) {
           if (item.id === commentId) {
             item.favored = !favored;
             item.favor_count += favored ? -1 : 1;
           }
           return item;
         });
-        _this11.setState({ list: list });
+        _this12.setState({ list: list });
       }).catch(this.errorHandler).finally(function () {
-        _this11.handleChangeLoading("sCommentFavor", false);
+        _this12.handleChangeLoading("sCommentFavor", false);
       });
     }
 
@@ -649,7 +668,7 @@ var App = function (_Component) {
   }, {
     key: "sReplyFavor",
     value: function sReplyFavor(replyId, commentId, favored) {
-      var _this12 = this;
+      var _this13 = this;
 
       this.handleChangeLoading("sReplyFavor", true);
       var API = this.props.API;
@@ -663,7 +682,7 @@ var App = function (_Component) {
       }).then(function (response) {
         _message3.default.success(favored ? _reactIntlUniversal2.default.get("message.cancelLickSuccess") : _reactIntlUniversal2.default.get("message.likeSuccess"));
         // 更新 list 中的该项数据的 favored
-        var list = _this12.state.list.map(function (item) {
+        var list = _this13.state.list.map(function (item) {
           if (item.id === commentId) {
             item.replies = item.replies.map(function (r) {
               if (r.id === replyId) {
@@ -678,9 +697,9 @@ var App = function (_Component) {
           }
           return item;
         });
-        _this12.setState({ list: list });
+        _this13.setState({ list: list });
       }).catch(this.errorHandler).finally(function () {
-        _this12.handleChangeLoading("sReplyFavor", false);
+        _this13.handleChangeLoading("sReplyFavor", false);
       });
     }
 
@@ -691,15 +710,15 @@ var App = function (_Component) {
   }, {
     key: "sOssSts",
     value: function sOssSts() {
-      var _this13 = this;
+      var _this14 = this;
 
       this.handleChangeLoading("sOssSts", true);
       var API = this.props.API;
 
       this.axios.get(API + "/oss/sts").then(function (response) {
-        _this13.setState({ oss: _extends({}, response.data) });
+        _this14.setState({ oss: _extends({}, response.data) });
       }).catch(this.errorHandler).finally(function () {
-        _this13.handleChangeLoading("sOssSts", false);
+        _this14.handleChangeLoading("sOssSts", false);
       });
     }
   }, {
@@ -777,6 +796,7 @@ App.propTypes = {
 App.defaultProps = {
   businessUserId: 0,
   API: "//api.links123.net/comment/v1",
+  emojiAPI: "//api.links123.net/link/v1",
   showList: true,
   showEditor: true,
   showAlertComment: false,

lib/components/ContentItem/index.js

@@ -396,7 +396,9 @@ var CommentItem = function (_Component) {
                 },
                 style: { color: "" + IconColor }
               },
-              _react2.default.createElement("i", { className: content.favored ? "comment-item-like" : "comment-item-unlike" })
+              _react2.default.createElement("i", {
+                className: content.favored ? "comment-item-like" : "comment-item-unlike"
+              })
             ),
             _react2.default.createElement(
               "span",

lib/components/EditComment/EditComment.js

@@ -22,10 +22,6 @@ var _react = require("react");
 
 var _react2 = _interopRequireDefault(_react);
 
-var _propTypes = require("prop-types");
-
-var _propTypes2 = _interopRequireDefault(_propTypes);
-
 var _reactIntlUniversal = require("react-intl-universal");
 
 var _reactIntlUniversal2 = _interopRequireDefault(_reactIntlUniversal);

lib/components/Editor/Emoji.js

@@ -16,10 +16,6 @@ var _react = require("react");
 
 var _react2 = _interopRequireDefault(_react);
 
-var _emoji = require("../../emoji");
-
-var _emoji2 = _interopRequireDefault(_emoji);
-
 require("./Emoji.css");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -29,6 +25,8 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
 function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
 
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+// import emoji, { prefixUrl } from "../../emoji";
+
 
 // 每页 20  5*4
 // 共 20 * 3 = 60 (实际是 54)
@@ -63,21 +61,27 @@ var Emoji = function (_React$Component) {
     value: function render() {
       var _this2 = this;
 
-      var _onClick = this.props.onClick;
+      var _props = this.props,
+          _onClick = _props.onClick,
+          emojiList = _props.emojiList;
 
       var content = [];
-      var curPage = [];
-      for (var i = 0; i < 115; i++) {
-        if (curPage.length < 30) {
-          curPage.push(_emoji2.default[i]);
-        } else {
-          content.push(curPage);
-          curPage = [];
-        }
-      }
-      if (curPage.length > 0) {
-        content.push(curPage);
+      // let curPage = [];
+      // for (let i = 0; i < 115; i++) {
+      //   if (curPage.length < 30) {
+      //     curPage.push(emoji[i]);
+      //   } else {
+      //     content.push(curPage);
+      //     curPage = [];
+      //   }
+      // }
+      // if (curPage.length > 0) {
+      //   content.push(curPage);
+      // }
+      for (var i = 0; i < emojiList.length; i += 30) {
+        content.push(emojiList.slice(i, i + 30));
       }
+
       return _react2.default.createElement(
         _carousel2.default,
         {
@@ -92,14 +96,14 @@ var Emoji = function (_React$Component) {
             page.map(function (item, index) {
               return _react2.default.createElement(
                 "div",
-                { className: "item", key: item.value },
+                { className: "item", key: item.id },
                 _react2.default.createElement("span", { className: "helper" }),
                 _react2.default.createElement("img", {
-                  src: "" + _emoji.prefixUrl + item.value + "." + item.ext,
-                  alt: item.title,
+                  src: item.url,
+                  alt: item.name,
                   style: { display: "inline-block" },
                   onClick: function onClick() {
-                    return _onClick(item.title);
+                    return _onClick(item.name);
                   }
                 })
               );

lib/components/Editor/Emoji.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Editor/Emoji.js"],"names":["Emoji","carousel","next","prev","onClick","props","content","curPage","i","length","push","emoji","node","map","page","index","item","value","prefixUrl","ext","title","display","React","Component"],"mappings":";;;;;;;;;;;;;;AAAA;;;;AAEA;;;;AACA;;;;;;;;;;AACA;AACA;;AAEA;;IAEMA,K;;;;;;;;;;;2BACG;AACL,UAAI,KAAKC,QAAT,EAAmB;AACjB,aAAKA,QAAL,CAAcC,IAAd;AACD;AACF;;;2BAEM;AACL,UAAI,KAAKD,QAAT,EAAmB;AACjB,aAAKA,QAAL,CAAcE,IAAd;AACD;AACF;;;6BAEQ;AAAA;;AAAA,UACCC,QADD,GACa,KAAKC,KADlB,CACCD,OADD;;AAEP,UAAME,UAAU,EAAhB;AACA,UAAIC,UAAU,EAAd;AACA,WAAK,IAAIC,IAAI,CAAb,EAAgBA,IAAI,GAApB,EAAyBA,GAAzB,EAA8B;AAC5B,YAAID,QAAQE,MAAR,GAAiB,EAArB,EAAyB;AACvBF,kBAAQG,IAAR,CAAaC,gBAAMH,CAAN,CAAb;AACD,SAFD,MAEO;AACLF,kBAAQI,IAAR,CAAaH,OAAb;AACAA,oBAAU,EAAV;AACD;AACF;AACD,UAAIA,QAAQE,MAAR,GAAiB,CAArB,EAAwB;AACtBH,gBAAQI,IAAR,CAAaH,OAAb;AACD;AACD,aACE;AAAA;AAAA;AACE,eAAK,mBAAQ;AACX,mBAAKN,QAAL,GAAgBW,IAAhB;AACD;AAHH;AAKGN,gBAAQO,GAAR,CAAY,UAACC,IAAD,EAAOC,KAAP;AAAA,iBACX;AAAA;AAAA,cAAK,KAAKA,KAAV,EAAiB,WAAU,OAA3B;AACGD,iBAAKD,GAAL,CAAS,UAACG,IAAD,EAAOD,KAAP;AAAA,qBACR;AAAA;AAAA,kBAAK,WAAU,MAAf,EAAsB,KAAKC,KAAKC,KAAhC;AACE,wDAAM,WAAU,QAAhB,GADF;AAEE;AACE,4BAAQC,gBAAR,GAAoBF,KAAKC,KAAzB,SAAkCD,KAAKG,GADzC;AAEE,uBAAKH,KAAKI,KAFZ;AAGE,yBAAO,EAAEC,SAAS,cAAX,EAHT;AAIE,2BAAS;AAAA,2BAAMjB,SAAQY,KAAKI,KAAb,CAAN;AAAA;AAJX;AAFF,eADQ;AAAA,aAAT;AADH,WADW;AAAA,SAAZ;AALH,OADF;AAuBD;;;;EAnDiBE,gBAAMC,S;;kBAsDXvB,K","file":"Emoji.js","sourcesContent":["import React from \"react\";\nimport { Carousel } from \"antd\";\nimport emoji, { prefixUrl } from \"../../emoji\";\nimport \"./Emoji.css\";\n// 每页 20  5*4\n// 共 20 * 3 = 60 (实际是 54)\n\n// class Emoji\n\nclass Emoji extends React.Component {\n  next() {\n    if (this.carousel) {\n      this.carousel.next();\n    }\n  }\n\n  prev() {\n    if (this.carousel) {\n      this.carousel.prev();\n    }\n  }\n\n  render() {\n    const { onClick } = this.props;\n    const content = [];\n    let curPage = [];\n    for (let i = 0; i < 115; i++) {\n      if (curPage.length < 30) {\n        curPage.push(emoji[i]);\n      } else {\n        content.push(curPage);\n        curPage = [];\n      }\n    }\n    if (curPage.length > 0) {\n      content.push(curPage);\n    }\n    return (\n      <Carousel\n        ref={node => {\n          this.carousel = node;\n        }}\n      >\n        {content.map((page, index) => (\n          <div key={index} className=\"emoji\">\n            {page.map((item, index) => (\n              <div className=\"item\" key={item.value}>\n                <span className=\"helper\" />\n                <img\n                  src={`${prefixUrl}${item.value}.${item.ext}`}\n                  alt={item.title}\n                  style={{ display: \"inline-block\" }}\n                  onClick={() => onClick(item.title)}\n                />\n              </div>\n            ))}\n          </div>\n        ))}\n      </Carousel>\n    );\n  }\n}\n\nexport default Emoji;\n"]}
+{"version":3,"sources":["../../../src/components/Editor/Emoji.js"],"names":["Emoji","carousel","next","prev","props","onClick","emojiList","content","i","length","push","slice","node","map","page","index","item","id","url","name","display","React","Component"],"mappings":";;;;;;;;;;;;;;AAAA;;;;AAGA;;;;;;;;;AADA;;;AAEA;AACA;;AAEA;;IAEMA,K;;;;;;;;;;;2BACG;AACL,UAAI,KAAKC,QAAT,EAAmB;AACjB,aAAKA,QAAL,CAAcC,IAAd;AACD;AACF;;;2BAEM;AACL,UAAI,KAAKD,QAAT,EAAmB;AACjB,aAAKA,QAAL,CAAcE,IAAd;AACD;AACF;;;6BAEQ;AAAA;;AAAA,mBACwB,KAAKC,KAD7B;AAAA,UACCC,QADD,UACCA,OADD;AAAA,UACUC,SADV,UACUA,SADV;;AAEP,UAAMC,UAAU,EAAhB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAK,IAAIC,IAAI,CAAb,EAAgBA,IAAIF,UAAUG,MAA9B,EAAsCD,KAAK,EAA3C,EAA+C;AAC7CD,gBAAQG,IAAR,CAAaJ,UAAUK,KAAV,CAAgBH,CAAhB,EAAmBA,IAAI,EAAvB,CAAb;AACD;;AAED,aACE;AAAA;AAAA;AACE,eAAK,mBAAQ;AACX,mBAAKP,QAAL,GAAgBW,IAAhB;AACD;AAHH;AAKGL,gBAAQM,GAAR,CAAY,UAACC,IAAD,EAAOC,KAAP;AAAA,iBACX;AAAA;AAAA,cAAK,KAAKA,KAAV,EAAiB,WAAU,OAA3B;AACGD,iBAAKD,GAAL,CAAS,UAACG,IAAD,EAAOD,KAAP;AAAA,qBACR;AAAA;AAAA,kBAAK,WAAU,MAAf,EAAsB,KAAKC,KAAKC,EAAhC;AACE,wDAAM,WAAU,QAAhB,GADF;AAEE;AACE,uBAAKD,KAAKE,GADZ;AAEE,uBAAKF,KAAKG,IAFZ;AAGE,yBAAO,EAAEC,SAAS,cAAX,EAHT;AAIE,2BAAS;AAAA,2BAAMf,SAAQW,KAAKG,IAAb,CAAN;AAAA;AAJX;AAFF,eADQ;AAAA,aAAT;AADH,WADW;AAAA,SAAZ;AALH,OADF;AAuBD;;;;EAvDiBE,gBAAMC,S;;kBA0DXtB,K","file":"Emoji.js","sourcesContent":["import React from \"react\";\nimport { Carousel } from \"antd\";\n// import emoji, { prefixUrl } from \"../../emoji\";\nimport \"./Emoji.css\";\n// 每页 20  5*4\n// 共 20 * 3 = 60 (实际是 54)\n\n// class Emoji\n\nclass Emoji extends React.Component {\n  next() {\n    if (this.carousel) {\n      this.carousel.next();\n    }\n  }\n\n  prev() {\n    if (this.carousel) {\n      this.carousel.prev();\n    }\n  }\n\n  render() {\n    const { onClick, emojiList } = this.props;\n    const content = [];\n    // let curPage = [];\n    // for (let i = 0; i < 115; i++) {\n    //   if (curPage.length < 30) {\n    //     curPage.push(emoji[i]);\n    //   } else {\n    //     content.push(curPage);\n    //     curPage = [];\n    //   }\n    // }\n    // if (curPage.length > 0) {\n    //   content.push(curPage);\n    // }\n    for (let i = 0; i < emojiList.length; i += 30) {\n      content.push(emojiList.slice(i, i + 30));\n    }\n\n    return (\n      <Carousel\n        ref={node => {\n          this.carousel = node;\n        }}\n      >\n        {content.map((page, index) => (\n          <div key={index} className=\"emoji\">\n            {page.map((item, index) => (\n              <div className=\"item\" key={item.id}>\n                <span className=\"helper\" />\n                <img\n                  src={item.url}\n                  alt={item.name}\n                  style={{ display: \"inline-block\" }}\n                  onClick={() => onClick(item.name)}\n                />\n              </div>\n            ))}\n          </div>\n        ))}\n      </Carousel>\n    );\n  }\n}\n\nexport default Emoji;\n"]}

lib/components/Editor/Upload.js

@@ -119,6 +119,9 @@ var App = function (_React$Component) {
     key: "componentDidMount",
     value: function componentDidMount() {
       this.props.app.sOssSts();
+      if (this.props.onRef) {
+        this.props.onRef(this);
+      }
     }
   }, {
     key: "onImgLoad",
@@ -154,6 +157,7 @@ var App = function (_React$Component) {
 
       var file = info.file;
 
+      console.log(file);
       info.onProgress({ percent: 10 });
       var reader = new FileReader();
       reader.readAsDataURL(info.file);
@@ -162,7 +166,7 @@ var App = function (_React$Component) {
         // DRIVER_LICENSE_PATH oss 的存储路径位置
         UploadToOss(_this2.props.app.oss, _constant.DRIVER_LICENSE_PATH, file).then(function (data) {
           info.onProgress({ percent: 100 });
-          info.onSuccess();
+          info.onSuccess(data);
           _this2.props.onUpload({ path: data.name, uid: file.uid });
         }).catch(function (e) {
           var msg = e.message || _constant.ERROR_DEFAULT;

lib/components/Editor/index.js

@@ -52,6 +52,14 @@ var _reactIntlUniversal = require("react-intl-universal");
 
 var _reactIntlUniversal2 = _interopRequireDefault(_reactIntlUniversal);
 
+var _dayjs = require("dayjs");
+
+var _dayjs2 = _interopRequireDefault(_dayjs);
+
+var _shortid = require("shortid");
+
+var _shortid2 = _interopRequireDefault(_shortid);
+
 var _constant = require("../../constant");
 
 var _helper = require("../../helper");
@@ -64,6 +72,10 @@ var _Emoji = require("./Emoji");
 
 var _Emoji2 = _interopRequireDefault(_Emoji);
 
+var _Comment = require("../../Comment");
+
+var _Comment2 = _interopRequireDefault(_Comment);
+
 require("./index.css");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -76,6 +88,32 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
 
 var TextArea = _input2.default.TextArea;
 
+
+var client = function client(oss) {
+  return new window.OSS.Wrapper({
+    accessKeyId: oss.access_key_id,
+    accessKeySecret: oss.access_key_secret,
+    stsToken: oss.security_token,
+    endpoint: _constant.OSS_ENDPOINT, //常量,你可以自己定义
+    bucket: _constant.OSS_BUCKET
+  });
+};
+
+var uploadPath = function uploadPath(path, file) {
+  return path + "/" + (0, _dayjs2.default)().format("YYYYMMDD") + "/" + _shortid2.default.generate() + "." + file.type.split("/")[1];
+};
+
+var UploadToOss = function UploadToOss(oss, path, file) {
+  var url = uploadPath(path, file);
+  return new Promise(function (resolve, reject) {
+    client(oss).multipartUpload(url, file).then(function (data) {
+      resolve(data);
+    }).catch(function (error) {
+      reject(error);
+    });
+  });
+};
+
 var Editor = function (_React$Component) {
   _inherits(Editor, _React$Component);
 
@@ -86,10 +124,10 @@ var Editor = function (_React$Component) {
 
     _this.state = {
       showUpload: false,
-      value: props.value, // 编辑器里面的值
-
-      fileList: props.fileList, // 图片列表
-      fileMap: {} // 已经上传的图片路径和 uid 的映射 { uid: path }
+      value: props.value || "", // 编辑器里面的值
+      fileList: props.fileList || [], // 图片列表
+      fileMap: {}, // 已经上传的图片路径和 uid 的映射 { uid: path }
+      uploadVisible: false
     };
     _this.handleChange = _this.handleChange.bind(_this);
     _this.handleClickEmoji = _this.handleClickEmoji.bind(_this);
@@ -97,6 +135,7 @@ var Editor = function (_React$Component) {
     _this.handleShowUpload = _this.handleShowUpload.bind(_this);
     _this.handleUpload = _this.handleUpload.bind(_this);
     _this.handleSubmit = _this.handleSubmit.bind(_this);
+    _this.handlePaste = _this.handlePaste.bind(_this);
     _this.resetState = _this.resetState.bind(_this);
     _this.handleEmojiScroll = _this.handleEmojiScroll.bind(_this);
     return _this;
@@ -105,6 +144,7 @@ var Editor = function (_React$Component) {
   _createClass(Editor, [{
     key: "componentDidMount",
     value: function componentDidMount() {
+      this.props.app.sOssSts();
       if ((0, _helper.isFunction)(this.props.onRef)) {
         this.props.onRef(this);
       }
@@ -209,6 +249,58 @@ var Editor = function (_React$Component) {
       this.setState({ fileMap: fileMap, fileList: fileList });
     }
 
+    /**
+     * 粘贴回调
+     */
+
+  }, {
+    key: "handlePaste",
+    value: function handlePaste(e) {
+      var _this2 = this;
+
+      if (this.state.fileList.length >= this.props.maxUpload) {
+        return;
+      }
+      var items = e.clipboardData && e.clipboardData.items;
+      var file = null;
+      if (items && items.length) {
+        for (var i = 0; i < items.length; i++) {
+          if (items[i].type.indexOf("image") !== -1) {
+            file = items[i].getAsFile();
+            break;
+          }
+        }
+      }
+      this.setState({
+        uploadVisible: true
+      });
+      var reader = new FileReader();
+      reader.readAsDataURL(file);
+      reader.onloadend = function () {
+        // DRIVER_LICENSE_PATH oss 的存储路径位置
+        UploadToOss(_this2.props.app.oss, _constant.DRIVER_LICENSE_PATH, file).then(function (data) {
+          var fileList = _this2.state.fileList.concat({
+            url: _constant.OSS_LINK + data.name,
+            thumbUrl: _constant.OSS_LINK + data.name,
+            type: file.type,
+            uid: new Date().valueOf()
+          });
+          _this2.props.handleChangeFileList(fileList);
+          _this2.setState({
+            fileList: fileList
+          });
+        }).catch(function (e) {
+          var msg = e.message || _constant.ERROR_DEFAULT;
+          if (_this2.props.showError) {
+            _message3.default.error(msg);
+          }
+          if (_this2.props.onError) {
+            _this2.props.onError(msg, { response: e.response });
+          }
+        });
+      };
+    }
+
     /**
      * 提交编辑器内容
      * 提交功能，交给父组件来实现
@@ -218,7 +310,7 @@ var Editor = function (_React$Component) {
   }, {
     key: "handleSubmit",
     value: function handleSubmit() {
-      var _this2 = this;
+      var _this3 = this;
 
       var maxLength = this.props.maxLength;
       var _state = this.state,
@@ -247,19 +339,19 @@ var Editor = function (_React$Component) {
       if (this.props.beforeSubmit) {
         Promise.resolve(this.props.beforeSubmit({ text: value, files: files })).then(function (res) {
           if (!(res === false)) {
-            _this2.props.onSubmit({ text: value, files: files }, function (res, action) {
-              _this2.resetState();
-              if (action === "comment" && _this2.props.onCommentSuccess) {
-                _this2.props.onCommentSuccess(res);
+            _this3.props.onSubmit({ text: value, files: files }, function (res, action) {
+              _this3.resetState();
+              if (action === "comment" && _this3.props.onCommentSuccess) {
+                _this3.props.onCommentSuccess(res);
               }
             });
           }
         });
       } else {
         this.props.onSubmit({ text: value, files: files }, function (res, action) {
-          _this2.resetState();
-          if (action === "comment" && _this2.props.onCommentSuccess) {
-            _this2.props.onCommentSuccess(res);
+          _this3.resetState();
+          if (action === "comment" && _this3.props.onCommentSuccess) {
+            _this3.props.onCommentSuccess(res);
           }
         });
       }
@@ -268,6 +360,7 @@ var Editor = function (_React$Component) {
     key: "resetState",
     value: function resetState() {
       this.handleChange("");
+      this.handleChangeFileList([]);
       this.setState({
         showUpload: false,
         value: "",
@@ -276,39 +369,62 @@ var Editor = function (_React$Component) {
       });
     }
   }, {
-    key: "render",
-    value: function render() {
-      var _this3 = this;
-
+    key: "checkDisabledSubmit",
+    value: function checkDisabledSubmit() {
       var _props = this.props,
-          value = _props.value,
-          rows = _props.rows,
-          showEmoji = _props.showEmoji,
-          showUpload = _props.showUpload,
-          multiple = _props.multiple,
-          emojiPopoverPlacement = _props.emojiPopoverPlacement,
-          uploadPopoverPlacement = _props.uploadPopoverPlacement,
-          uploadOverlayClassName = _props.uploadOverlayClassName,
-          fileList = _props.fileList,
-          closeUploadWhenBlur = _props.closeUploadWhenBlur,
-          maxUpload = _props.maxUpload,
-          btnLoading = _props.btnLoading,
           btnDisabled = _props.btnDisabled,
-          button = _props.button,
-          emojiToolIcon = _props.emojiToolIcon,
-          imageToolIcon = _props.imageToolIcon,
-          maxLength = _props.maxLength,
-          autoFocus = _props.autoFocus;
+          value = _props.value,
+          fileList = _props.fileList;
+
+      if (btnDisabled) {
+        return true;
+      }
+      if (value && value !== "") {
+        return false;
+      }
+      if (this.state.value && this.state.value !== "") {
+        return false;
+      }
+      if (fileList && fileList.length > 0) {
+        return false;
+      }
+      if (this.state.fileList.length > 0) {
+        return false;
+      }
+      return true;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this4 = this;
+
+      var _props2 = this.props,
+          value = _props2.value,
+          rows = _props2.rows,
+          showEmoji = _props2.showEmoji,
+          showUpload = _props2.showUpload,
+          multiple = _props2.multiple,
+          emojiPopoverPlacement = _props2.emojiPopoverPlacement,
+          uploadPopoverPlacement = _props2.uploadPopoverPlacement,
+          uploadOverlayClassName = _props2.uploadOverlayClassName,
+          fileList = _props2.fileList,
+          maxUpload = _props2.maxUpload,
+          btnLoading = _props2.btnLoading,
+          button = _props2.button,
+          emojiToolIcon = _props2.emojiToolIcon,
+          imageToolIcon = _props2.imageToolIcon,
+          maxLength = _props2.maxLength,
+          autoFocus = _props2.autoFocus;
 
       var placeholder = this.props.placeholder || _reactIntlUniversal2.default.get("editor.placeholder");
       var btnSubmitText = this.props.btnSubmitText || _reactIntlUniversal2.default.get("editor.SubmitBtn");
       var handleSubmit = this.handleSubmit;
-      var disabledSubmit = btnDisabled || !this.props.value && !this.state.value && !this.props.fileList.length && !this.state.fileList.length;
+      var disabledSubmit = this.checkDisabledSubmit();
       var inputValue = value || this.state.value;
       var uploadFileList = fileList || this.state.fileList;
       return _react2.default.createElement(
         "div",
-        { className: "comment-editor-container" },
+        { className: "comment-editor-container", onPaste: this.handlePaste },
         _react2.default.createElement("div", {
           className: (0, _classnames2.default)({
             "comment-editor-toolbar": true,
@@ -321,7 +437,7 @@ var Editor = function (_React$Component) {
           _react2.default.createElement(TextArea, {
             value: inputValue,
             onChange: function onChange(e) {
-              return _this3.handleChange(e.target.value);
+              return _this4.handleChange(e.target.value);
             },
             rows: rows,
             placeholder: placeholder,
@@ -349,8 +465,9 @@ var Editor = function (_React$Component) {
                     _react2.default.createElement(_Emoji2.default, {
                       onClick: this.handleClickEmoji,
                       ref: function ref(node) {
-                        _this3.emoji = node;
-                      }
+                        _this4.emoji = node;
+                      },
+                      emojiList: this.props.app.emojiList
                     })
                   ),
                   overlayClassName: "comment-emoji-popover"
@@ -362,14 +479,16 @@ var Editor = function (_React$Component) {
                 {
                   trigger: "click"
                   // TODO: 针对非 react.js，直接使用 click 事件来控制展开或关闭
-                  // visible={this.state.showUpload}
-                  , placement: uploadPopoverPlacement,
+                  , visible: this.state.uploadVisible,
+                  placement: uploadPopoverPlacement,
                   overlayClassName: uploadOverlayClassName,
                   autoAdjustOverflow: false,
                   overlayStyle: { zIndex: 9999 },
-                  onVisibleChange: closeUploadWhenBlur ? function (visible) {
-                    _this3.handleShowUpload(visible);
-                  } : null,
+                  onVisibleChange: function onVisibleChange(visible) {
+                    _this4.setState({
+                      uploadVisible: visible
+                    });
+                  },
                   content: _react2.default.createElement(
                     "div",
                     {
@@ -380,6 +499,9 @@ var Editor = function (_React$Component) {
                       }
                     },
                     _react2.default.createElement(_Upload2.default, {
+                      onRef: function onRef(node) {
+                        return _this4.uploadRef = node;
+                      },
                       multiple: multiple,
                       onChangeFileList: this.handleChangeFileList,
                       onUpload: this.handleUpload,
@@ -409,14 +531,14 @@ var Editor = function (_React$Component) {
                 },
                 imageToolIcon ? _react2.default.cloneElement(imageToolIcon, {
                   onClick: function onClick() {
-                    return _this3.handleShowUpload(true);
+                    return _this4.handleShowUpload(true);
                   }
                 }) : _react2.default.createElement(_icon2.default, {
                   type: "picture",
                   className: "comment-toolbar-icon",
                   style: { marginLeft: 20 },
                   onClick: function onClick() {
-                    return _this3.handleShowUpload(true);
+                    return _this4.handleShowUpload(true);
                   }
                 })
               ) : null
@@ -430,7 +552,7 @@ var Editor = function (_React$Component) {
                 _button2.default,
                 {
                   onClick: function onClick() {
-                    return _this3.handleSubmit();
+                    return _this4.handleSubmit();
                   },
                   type: "primary",
                   loading: btnLoading,
@@ -485,14 +607,13 @@ Editor.defaultProps = {
   uploadPopoverPlacement: "bottomLeft",
   uploadOverlayClassName: "",
   maxUpload: 1,
-  value: "",
-  fileList: [],
   // btnSubmitText: "发表",
   btnLoading: false,
   btnDisabled: false,
   showError: true,
-  maxLength: 5000
+  maxLength: 5000,
+  handleChangeFileList: function handleChangeFileList() {}
 };
 
-exports.default = Editor;
+exports.default = (0, _Comment2.default)(Editor);
 //# sourceMappingURL=index.js.map

lib/helper.js

@@ -12,13 +12,9 @@ exports.addImageProcess = addImageProcess;
 
 var _constant = require("./constant");
 
-var _emoji = require("./emoji");
+// import emoji, { prefixUrl } from "./emoji";
 
-var _emoji2 = _interopRequireDefault(_emoji);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var emojiObejct = arrayToObject(_emoji2.default, "title");
+// const emojiObejct = arrayToObject(emoji, "title");
 
 function isFunction(functionToCheck) {
   return functionToCheck && {}.toString.call(functionToCheck) === "[object Function]";
@@ -78,9 +74,11 @@ function renderContent(content, onClick) {
       return "<a href=\"" + src + "\" rel=\"noopener noreferrer\" target=\"_blank\"><img class=\"comment-img\" src=\"" + src + "\" alt=\"" + src + "\" /></a>";
     }
     // 如果不存在对应的表情, 则返回原文
-    var emoji = emojiObejct[src];
+    // const emoji = emojiObejct[src];
+    console.log(src);
+    var emoji = JSON.parse(sessionStorage.getItem("emojiMap"))[src];
     if (emoji) {
-      return "<img class=\"comment-emoji\" src=\"" + _emoji.prefixUrl + emoji.value + "." + emoji.ext + "\" alt=\"" + emoji.title + "\" />";
+      return "<img class=\"comment-emoji\" src=\"" + emoji + "\" alt=\"" + emoji.title + "\" />";
     }
     return "[" + src + "]";
   }).replace(innerUrl, function (a, b) {

lib/index.js

@@ -73,7 +73,7 @@ var Index = function (_React$Component) {
             });
           },
           handleChangeFileList: function handleChangeFileList(fileList) {
-            console.log(fileList);
+            console.log("----", fileList);
             _this2.setState({
               fileList: fileList
             });
@@ -126,9 +126,9 @@ if (process.env.NODE_ENV !== "production") {
     type: 1,
     businessId: "test",
     businessUserId: 4,
-    userId: 71748,
+    userId: 58297,
     currentUser: {
-      user_id: 71748
+      user_id: 58297
     },
     userAvaHoverData: {
       71763: {

lib/version.json

@@ -1,8 +1,8 @@
 {
     "name":       "comment",
-    "buildDate":  1564281547826,
+    "buildDate":  1564888264706,
     "version":    "1.0.4",
-    "numCommits": 174,
-    "hash":       "5200566",
+    "numCommits": 178,
+    "hash":       "088923c",
     "dirty":      false
 }

src/App.js

@@ -1,6 +1,6 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
-import { message, Modal, Icon } from "antd";
+import { message } from "antd";
 import axios from "axios";
 import Cookies from "js-cookie";
 import intl from "react-intl-universal";
@@ -20,10 +20,8 @@ class App extends Component {
     super(props);
     this.state = {
       loading: {},
-
       // oss 配置
       oss: {},
-
       // 评论数据
       list: [],
       page: 1,
@@ -38,7 +36,8 @@ class App extends Component {
       commentId: "",
       userId: "",
       content: "",
-      replyPage: 1
+      replyPage: 1,
+      emojiList: []
     };
     this.handleChangeLoading = this.handleChangeLoading.bind(this);
     this.sCreateComment = this.sCreateComment.bind(this);
@@ -69,6 +68,7 @@ class App extends Component {
 
   componentDidMount() {
     this.loadLocales();
+    this.loadEmoji();
   }
 
   /**
@@ -114,6 +114,23 @@ class App extends Component {
       });
   }
 
+  /**
+   * 加载表情包
+   */
+  loadEmoji() {
+    this.axios
+      .get(`${this.props.emojiAPI}/emoticons`)
+      .then(response => {
+        const emojiMap = {};
+        response.data.list.forEach(item => {
+          emojiMap[item.name] = item.url;
+        });
+        window.sessionStorage.setItem("emojiMap", JSON.stringify(emojiMap));
+        this.setState({ emojiList: response.data.list });
+      })
+      .catch(this.errorHandler);
+  }
+
   handleEdit({ replyId, commentId, userId, content, replyPage }) {
     this.setState({
       editModalVisible: true,
@@ -629,6 +646,7 @@ App.propTypes = {
 App.defaultProps = {
   businessUserId: 0,
   API: "//api.links123.net/comment/v1",
+  emojiAPI: "//api.links123.net/link/v1",
   showList: true,
   showEditor: true,
   showAlertComment: false,

src/components/EditComment/EditComment.js

@@ -1,5 +1,4 @@
 import React from "react";
-import PropTypes from "prop-types";
 import { Modal, Icon } from "antd";
 import intl from "react-intl-universal";
 import CommentInput from "../CommentInput";

src/components/Editor/Emoji.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { Carousel } from "antd";
-import emoji, { prefixUrl } from "../../emoji";
+// import emoji, { prefixUrl } from "../../emoji";
 import "./Emoji.css";
 // 每页 20  5*4
 // 共 20 * 3 = 60 (实际是 54)
@@ -21,20 +21,24 @@ class Emoji extends React.Component {
   }
 
   render() {
-    const { onClick } = this.props;
+    const { onClick, emojiList } = this.props;
     const content = [];
-    let curPage = [];
-    for (let i = 0; i < 115; i++) {
-      if (curPage.length < 30) {
-        curPage.push(emoji[i]);
-      } else {
-        content.push(curPage);
-        curPage = [];
-      }
-    }
-    if (curPage.length > 0) {
-      content.push(curPage);
+    // let curPage = [];
+    // for (let i = 0; i < 115; i++) {
+    //   if (curPage.length < 30) {
+    //     curPage.push(emoji[i]);
+    //   } else {
+    //     content.push(curPage);
+    //     curPage = [];
+    //   }
+    // }
+    // if (curPage.length > 0) {
+    //   content.push(curPage);
+    // }
+    for (let i = 0; i < emojiList.length; i += 30) {
+      content.push(emojiList.slice(i, i + 30));
     }
+
     return (
       <Carousel
         ref={node => {
@@ -44,13 +48,13 @@ class Emoji extends React.Component {
         {content.map((page, index) => (
           <div key={index} className="emoji">
             {page.map((item, index) => (
-              <div className="item" key={item.value}>
+              <div className="item" key={item.id}>
                 <span className="helper" />
                 <img
-                  src={`${prefixUrl}${item.value}.${item.ext}`}
-                  alt={item.title}
+                  src={item.url}
+                  alt={item.name}
                   style={{ display: "inline-block" }}
-                  onClick={() => onClick(item.title)}
+                  onClick={() => onClick(item.name)}
                 />
               </div>
             ))}

src/components/Editor/Upload.js

@@ -60,6 +60,9 @@ class App extends React.Component {
 
   componentDidMount() {
     this.props.app.sOssSts();
+    if (this.props.onRef) {
+      this.props.onRef(this);
+    }
   }
 
   onImgLoad() {
@@ -85,6 +88,7 @@ class App extends React.Component {
 
   customRequest(info) {
     const { file } = info;
+    console.log(file);
     info.onProgress({ percent: 10 });
     let reader = new FileReader();
     reader.readAsDataURL(info.file);
@@ -94,7 +98,7 @@ class App extends React.Component {
       UploadToOss(this.props.app.oss, DRIVER_LICENSE_PATH, file)
         .then(data => {
           info.onProgress({ percent: 100 });
-          info.onSuccess();
+          info.onSuccess(data);
           this.props.onUpload({ path: data.name, uid: file.uid });
         })
         .catch(e => {

src/components/Editor/index.js

@@ -3,23 +3,62 @@ import PropTypes from "prop-types";
 import { Icon, Button, Popover, Input, message } from "antd";
 import classnames from "classnames";
 import intl from "react-intl-universal";
+import dayjs from "dayjs";
+import shortid from "shortid";
 import { OSS_LINK } from "../../constant";
 import { isFunction } from "../../helper";
 import Upload from "./Upload";
 import Emoji from "./Emoji";
+import Comment from "../../Comment";
+import {
+  OSS_ENDPOINT,
+  OSS_BUCKET,
+  DRIVER_LICENSE_PATH,
+  ERROR_DEFAULT
+} from "../../constant";
 import "./index.css";
 
 const { TextArea } = Input;
 
+const client = oss => {
+  return new window.OSS.Wrapper({
+    accessKeyId: oss.access_key_id,
+    accessKeySecret: oss.access_key_secret,
+    stsToken: oss.security_token,
+    endpoint: OSS_ENDPOINT, //常量,你可以自己定义
+    bucket: OSS_BUCKET
+  });
+};
+
+const uploadPath = (path, file) => {
+  return `${path}/${dayjs().format("YYYYMMDD")}/${shortid.generate()}.${
+    file.type.split("/")[1]
+  }`;
+};
+
+const UploadToOss = (oss, path, file) => {
+  const url = uploadPath(path, file);
+  return new Promise((resolve, reject) => {
+    client(oss)
+      .multipartUpload(url, file)
+      .then(data => {
+        resolve(data);
+      })
+      .catch(error => {
+        reject(error);
+      });
+  });
+};
+
 class Editor extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
       showUpload: false,
-      value: props.value, // 编辑器里面的值
-
-      fileList: props.fileList, // 图片列表
-      fileMap: {} // 已经上传的图片路径和 uid 的映射 { uid: path }
+      value: props.value || "", // 编辑器里面的值
+      fileList: props.fileList || [], // 图片列表
+      fileMap: {}, // 已经上传的图片路径和 uid 的映射 { uid: path }
+      uploadVisible: false
     };
     this.handleChange = this.handleChange.bind(this);
     this.handleClickEmoji = this.handleClickEmoji.bind(this);
@@ -27,11 +66,13 @@ class Editor extends React.Component {
     this.handleShowUpload = this.handleShowUpload.bind(this);
     this.handleUpload = this.handleUpload.bind(this);
     this.handleSubmit = this.handleSubmit.bind(this);
+    this.handlePaste = this.handlePaste.bind(this);
     this.resetState = this.resetState.bind(this);
     this.handleEmojiScroll = this.handleEmojiScroll.bind(this);
   }
 
   componentDidMount() {
+    this.props.app.sOssSts();
     if (isFunction(this.props.onRef)) {
       this.props.onRef(this);
     }
@@ -117,6 +158,55 @@ class Editor extends React.Component {
     this.setState({ fileMap, fileList });
   }
 
+  /**
+   * 粘贴回调
+   */
+  handlePaste(e) {
+    if (this.state.fileList.length >= this.props.maxUpload) {
+      return;
+    }
+    const items = e.clipboardData && e.clipboardData.items;
+    let file = null;
+    if (items && items.length) {
+      for (let i = 0; i < items.length; i++) {
+        if (items[i].type.indexOf("image") !== -1) {
+          file = items[i].getAsFile();
+          break;
+        }
+      }
+    }
+    this.setState({
+      uploadVisible: true
+    });
+    let reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onloadend = () => {
+      // DRIVER_LICENSE_PATH oss 的存储路径位置
+      UploadToOss(this.props.app.oss, DRIVER_LICENSE_PATH, file)
+        .then(data => {
+          const fileList = this.state.fileList.concat({
+            url: OSS_LINK + data.name,
+            thumbUrl: OSS_LINK + data.name,
+            type: file.type,
+            uid: new Date().valueOf()
+          });
+          this.props.handleChangeFileList(fileList);
+          this.setState({
+            fileList
+          });
+        })
+        .catch(e => {
+          const msg = e.message || ERROR_DEFAULT;
+          if (this.props.showError) {
+            message.error(msg);
+          }
+          if (this.props.onError) {
+            this.props.onError(msg, { response: e.response });
+          }
+        });
+    };
+  }
+
   /**
    * 提交编辑器内容
    * 提交功能，交给父组件来实现
@@ -168,6 +258,7 @@ class Editor extends React.Component {
 
   resetState() {
     this.handleChange("");
+    this.handleChangeFileList([]);
     this.setState({
       showUpload: false,
       value: "",
@@ -176,6 +267,26 @@ class Editor extends React.Component {
     });
   }
 
+  checkDisabledSubmit() {
+    const { btnDisabled, value, fileList } = this.props;
+    if (btnDisabled) {
+      return true;
+    }
+    if (value && value !== "") {
+      return false;
+    }
+    if (this.state.value && this.state.value !== "") {
+      return false;
+    }
+    if (fileList && fileList.length > 0) {
+      return false;
+    }
+    if (this.state.fileList.length > 0) {
+      return false;
+    }
+    return true;
+  }
+
   render() {
     const {
       value,
@@ -188,11 +299,9 @@ class Editor extends React.Component {
       uploadPopoverPlacement,
       uploadOverlayClassName,
       fileList,
-      closeUploadWhenBlur,
       maxUpload,
       // btnSubmitText,
       btnLoading,
-      btnDisabled,
       button,
       emojiToolIcon,
       imageToolIcon,
@@ -203,27 +312,17 @@ class Editor extends React.Component {
     let btnSubmitText =
       this.props.btnSubmitText || intl.get("editor.SubmitBtn");
     const handleSubmit = this.handleSubmit;
-    const disabledSubmit =
-      btnDisabled ||
-      (!this.props.value &&
-        !this.state.value &&
-        !this.props.fileList.length &&
-        !this.state.fileList.length);
+    const disabledSubmit = this.checkDisabledSubmit();
     const inputValue = value || this.state.value;
     const uploadFileList = fileList || this.state.fileList;
     return (
-      <div className="comment-editor-container">
+      <div className="comment-editor-container" onPaste={this.handlePaste}>
         <div
           className={classnames({
             "comment-editor-toolbar": true,
             "comment-editor-toolbar-error": inputValue.length > maxLength
           })}
-        >
-          {/* {intl.get("editor.alreadyEntered", {
-            count: inputValue.length,
-            maxLength
-          })} */}
-        </div>
+        ></div>
         <div className="comment-editor">
           <TextArea
             value={inputValue}
@@ -251,6 +350,7 @@ class Editor extends React.Component {
                         ref={node => {
                           this.emoji = node;
                         }}
+                        emojiList={this.props.app.emojiList}
                       />
                     </div>
                   }
@@ -266,18 +366,16 @@ class Editor extends React.Component {
                 <Popover
                   trigger="click"
                   // TODO: 针对非 react.js，直接使用 click 事件来控制展开或关闭
-                  // visible={this.state.showUpload}
+                  visible={this.state.uploadVisible}
                   placement={uploadPopoverPlacement}
                   overlayClassName={uploadOverlayClassName}
                   autoAdjustOverflow={false}
                   overlayStyle={{ zIndex: 9999 }}
-                  onVisibleChange={
-                    closeUploadWhenBlur
-                      ? visible => {
-                          this.handleShowUpload(visible);
-                        }
-                      : null
-                  }
+                  onVisibleChange={visible => {
+                    this.setState({
+                      uploadVisible: visible
+                    });
+                  }}
                   content={
                     <div
                       style={{
@@ -287,6 +385,7 @@ class Editor extends React.Component {
                       }}
                     >
                       <Upload
+                        onRef={node => (this.uploadRef = node)}
                         multiple={multiple}
                         onChangeFileList={this.handleChangeFileList}
                         onUpload={this.handleUpload}
@@ -310,16 +409,6 @@ class Editor extends React.Component {
                           </span>
                         ) : null}
                       </span>
-                      {/* 因为是点击别的区域关闭，所以不用右上角的 Icon */}
-                      {/* <Icon
-                        type="close"
-                        onClick={() => this.handleShowUpload(false)}
-                        style={{
-                          float: "right",
-                          cursor: "pointer",
-                          marginTop: 4
-                        }}
-                      /> */}
                     </div>
                   }
                 >
@@ -399,13 +488,12 @@ Editor.defaultProps = {
   uploadPopoverPlacement: "bottomLeft",
   uploadOverlayClassName: "",
   maxUpload: 1,
-  value: "",
-  fileList: [],
   // btnSubmitText: "发表",
   btnLoading: false,
   btnDisabled: false,
   showError: true,
-  maxLength: 5000
+  maxLength: 5000,
+  handleChangeFileList: () => {}
 };
 
-export default Editor;
+export default Comment(Editor);

src/helper.js

@@ -5,9 +5,9 @@ import {
   IMAGE_PROCESS_LARGE,
   IMAGE_PROCESS
 } from "./constant";
-import emoji, { prefixUrl } from "./emoji";
+// import emoji, { prefixUrl } from "./emoji";
 
-const emojiObejct = arrayToObject(emoji, "title");
+// const emojiObejct = arrayToObject(emoji, "title");
 
 export function isFunction(functionToCheck) {
   return (
@@ -71,11 +71,11 @@ export function renderContent(content, onClick) {
         return `<a href="${src}" rel="noopener noreferrer" target="_blank"><img class="comment-img" src="${src}" alt="${src}" /></a>`;
       }
       // 如果不存在对应的表情, 则返回原文
-      const emoji = emojiObejct[src];
+      // const emoji = emojiObejct[src];
+      console.log(src);
+      const emoji = JSON.parse(sessionStorage.getItem("emojiMap"))[src];
       if (emoji) {
-        return `<img class="comment-emoji" src="${prefixUrl}${emoji.value}.${
-          emoji.ext
-        }" alt="${emoji.title}" />`;
+        return `<img class="comment-emoji" src="${emoji}" alt="${emoji.title}" />`;
       }
       return `[${src}]`;
     })

src/index.js

@@ -40,7 +40,7 @@ class Index extends React.Component {
             });
           }}
           handleChangeFileList={fileList => {
-            console.log(fileList);
+            console.log("----", fileList);
             this.setState({
               fileList
             });
@@ -91,9 +91,9 @@ if (process.env.NODE_ENV !== "production") {
     type: 1,
     businessId: "test",
     businessUserId: 4,
-    userId: 71748,
+    userId: 58297,
     currentUser: {
-      user_id: 71748
+      user_id: 58297
     },
     userAvaHoverData: {
       71763: {