fix parts of #40

README.md

@@ -67,15 +67,16 @@ Version note: React 15.4.2+ and react-dom 15.4.2+ is required. Antd version at l
     render() {
       const uploadConfig = {
         QINIU_URL: "http://up.qiniu.com", //上传地址，现在暂只支持七牛上传
-        QINIU_IMG_TOKEN_URL: "http://www.yourServerAddress.mobi/getUptokenOfQiniu.do", //请求图片的token
+        QINIU_IMG_TOKEN_URL: "http://www.yourServerAddress.mobi/getUptokenOfQiniu.do", //请求图片的token,支持提供一个返回token的函数
         QINIU_PFOP: {
           url: "http://www.yourServerAddress.mobi/doQiniuPicPersist.do" //七牛持久保存请求地址
         },
-        QINIU_VIDEO_TOKEN_URL: "http://www.yourServerAddress.mobi/getUptokenOfQiniu.do", //请求媒体资源的token
-        QINIU_FILE_TOKEN_URL: "http://www.yourServerAddress.mobi/getUptokenOfQiniu.do?name=patch", //其他资源的token的获取
+        QINIU_VIDEO_TOKEN_URL: "http://www.yourServerAddress.mobi/getUptokenOfQiniu.do", //请求媒体资源的token,支持提供一个返回token的函数
+        QINIU_FILE_TOKEN_URL: "http://www.yourServerAddress.mobi/getUptokenOfQiniu.do?name=patch", //其他资源的token的获取,支持提供一个返回token的函数
         QINIU_IMG_DOMAIN_URL: "https://image.yourServerAddress.mobi", //图片文件地址的前缀
         QINIU_DOMAIN_VIDEO_URL: "https://video.yourServerAddress.mobi", //视频文件地址的前缀
-        QINIU_DOMAIN_FILE_URL: "https://static.yourServerAddress.com/", //其他文件地址前缀
+        QINIU_DOMAIN_FILE_URL: "https://static.yourServerAddress.com/", //其他文件地址前缀,
+        isGenerateKeyByRandom: false // 上传时是否由编辑器产生随机的key
       }
       return <LzEditor
         active={true}
@@ -99,6 +100,7 @@ Version note: React 15.4.2+ and react-dom 15.4.2+ is required. Antd version at l
 | 配置项 | 类型 | 默认值 | 说明 |
 | -- | -- | -- | -- |
 | active | bool | false | 有更新时是否刷新 |
+| needClearContent | bool | flase | 是否需要清除编辑器里的内容 |
 | importContent | string | "" | 编辑器显示内容 |
 | cbReceiver | function | null | 编辑器内容更新后的回调函数，此函数接受一个改动后的返回参数值 |
 | undoRedo | bool | true | 是否启用撤销恢复功能，默认启用 |

package.json

@@ -55,6 +55,7 @@
   "dependencies": {
     "antd": "^2.8.3",
     "draft-js": "^0.10.0",
+    "draft-js-export-html": "^0.5.4",
     "immutable": "^3.8.1",
     "js-base64": "^2.1.9",
     "lodash": "^4.17.3",

src/editor/index.jsx

@@ -3,6 +3,7 @@
  */
 import './components.css'
 import '../global/supports/resources/system.css';
+import { tokenPropTypes } from '../global/propTypes';
 // import 'antd/dist/antd.css';
 import React, {Component} from 'react';
 import ReactDom from 'react-dom';
@@ -35,7 +36,8 @@ import {
   // Affix,
   Icon
 } from 'antd';
-import {stateToHTML,stateFromHTML,stateToMD,stateFromMD} from './utils';
+import {stateFromHTML,stateToMD,stateFromMD} from './utils';
+import {stateToHTML} from 'draft-js-export-html';
 
 import getSelectedBlocks from './utils/stateUtils/getSelectedBlocks';
 import {PRO_COMMON} from '../global/supports/publicDatas';
@@ -194,26 +196,41 @@ class EditorConcist extends React.Component {
     },60000);
   } // 此钩子用作编辑时候的回调
   componentWillReceiveProps(newProps) {
-    if (!newProps.active) {
-      return false;
-    }
-    if (newProps.importContent == this.props.importContent) {
-      return false;
-    }
+    const { needClearContent } = newProps;
     const ConvertFormatProps = this.props.convertFormat;
     let newContent ="";
-    // console.log("ConvertFormatProps",ConvertFormatProps)
-    if (ConvertFormatProps==="html") {
-      newContent = newProps.importContent.replace(/[\s\xA0\u1680\u180E\u2000-\u200A\u2028\u2029\u202F\u205F\u3000]\>/g,">");
-      if (newContent == "undefined" ||!newContent) {
+
+    if (!needClearContent) {
+      if (!newProps.active) {
+        return false;
+      }
+      if (newProps.importContent == this.props.importContent) {
+        return false;
+      }
+
+      // console.log("ConvertFormatProps",ConvertFormatProps)
+      if (ConvertFormatProps==="html") {
+        newContent = newProps.importContent.replace(/[\s\xA0\u1680\u180E\u2000-\u200A\u2028\u2029\u202F\u205F\u3000]\>/g,">");
+        if (newContent == "undefined" ||!newContent) {
+          newContent = "<p>&nbsp;</p>";
+        }
+      } else if (ConvertFormatProps==="markdown") {
+        newContent = newProps.importContent||"";
+        this.state.tempSouceContent=newContent;
+      } else if (ConvertFormatProps==="raw") {
+        newContent = newProps.importContent||"{}";
+      }
+    } else {
+      if (ConvertFormatProps==="html") {
         newContent = "<p>&nbsp;</p>";
+      } else if (ConvertFormatProps==="markdown") {
+        newContent = "";
+        this.state.tempSouceContent=newContent;
+      } else if (ConvertFormatProps==="raw") {
+        newContent = "{}";
       }
-    } else if (ConvertFormatProps==="markdown") {
-      newContent = newProps.importContent||"";
-      this.state.tempSouceContent=newContent;
-    } else if (ConvertFormatProps==="raw") {
-      newContent = newProps.importContent||"{}";
     }
+
     /*const decorator = new CompositeDecorator([
       LinkDecorator,
       ImageDecorator,
@@ -815,6 +832,7 @@ const Media = (props) => {
   return media;
 };
 
+
 EditorConcist.propTypes = {
   active: React.PropTypes.bool,
   importContent: React.PropTypes.string,
@@ -834,17 +852,18 @@ EditorConcist.propTypes = {
   fullScreen: React.PropTypes.bool,
   uploadConfig:React.PropTypes.shape({
     QINIU_URL: React.PropTypes.string.isRequired,
-    QINIU_IMG_TOKEN_URL: React.PropTypes.string.isRequired,
+    QINIU_IMG_TOKEN_URL: tokenPropTypes,
     QINIU_PFOP:React.PropTypes.shape({
       url: React.PropTypes.string.isRequired
     }),
-    QINIU_VIDEO_TOKEN_URL: React.PropTypes.string.isRequired,
-    QINIU_FILE_TOKEN_URL: React.PropTypes.string.isRequired,
+    QINIU_VIDEO_TOKEN_URL: tokenPropTypes,
+    QINIU_FILE_TOKEN_URL: tokenPropTypes,
     QINIU_DOMAIN_IMG_URL: React.PropTypes.string.isRequired,
     QINIU_DOMAIN_VIDEO_URL: React.PropTypes.string.isRequired,
     QINIU_DOMAIN_FILE_URL: React.PropTypes.string.isRequired
    }),
   convertFormat: React.PropTypes.oneOf(['html', 'markdown', 'raw']),
+  needClearContent: React.PropTypes.bool,
 }
 EditorConcist.defaultProps = {
   undoRedo: true,
@@ -861,6 +880,7 @@ EditorConcist.defaultProps = {
   autoSave: true,
   fullScreen:true,
   convertFormat: 'html',
+  needClearContent: false,
 };
 // export default EditorConcist;
 module.exports = EditorConcist;

src/editor/toolBar/mediaImageUploader.jsx

@@ -6,6 +6,7 @@ import {
   Icon
 } from 'antd';
 import {UploadImage,GroupUpload} from '../../global/components/businessComponents';
+import { tokenPropTypes } from '../../global/propTypes';
 import cloneDeep from "lodash/cloneDeep";
 /*视频音频图片*/
 class ImgStyleControls extends Component {
@@ -164,7 +165,7 @@ class ImgStyleControls extends Component {
           display: "inline",
           overflow: "hidden",
           position: "absolute"
-        }}>{this.state.images.map((item, index) => <img style = {{width:"100px"}} src = {
+        }}>{this.state.images.map((item, index) => <img key={index} style = {{width:"100px"}} src = {
             item.url+"?t=10"
           }
           onError = {
@@ -213,12 +214,12 @@ ImgStyleControls.propTypes = {
   receiveImage: React.PropTypes.func.isRequired,
   uploadConfig:React.PropTypes.shape({
     QINIU_URL: React.PropTypes.string.isRequired,
-    QINIU_IMG_TOKEN_URL: React.PropTypes.string.isRequired,
+    QINIU_IMG_TOKEN_URL: tokenPropTypes,
     QINIU_PFOP:React.PropTypes.shape({
       url: React.PropTypes.string.isRequired
     }),
-    QINIU_VIDEO_TOKEN_URL: React.PropTypes.string.isRequired,
-    QINIU_FILE_TOKEN_URL: React.PropTypes.string.isRequired,
+    QINIU_VIDEO_TOKEN_URL: tokenPropTypes,
+    QINIU_FILE_TOKEN_URL: tokenPropTypes,
     QINIU_DOMAIN_IMG_URL: React.PropTypes.string.isRequired,
     QINIU_DOMAIN_VIDEO_URL: React.PropTypes.string.isRequired,
     QINIU_DOMAIN_FILE_URL: React.PropTypes.string.isRequired

src/global/components/businessComponents/UploadImage.jsx

@@ -1,6 +1,7 @@
 import React, {Component} from 'react'
 import {Upload, Button, Icon, message,Input} from 'antd';
 import {PRO_URL, PRO_QINIU, PRO_COMMON} from '../../supports/publicDatas';
+import { tokenPropTypes } from '../../../global/propTypes';
 import findIndex from "lodash/findIndex";
 import isEqual from "lodash/isEqual";
 import cloneDeep from "lodash/cloneDeep";
@@ -207,11 +208,18 @@ class UploadImage extends Component {
           if (!token) {
             token = PRO_QINIU.checkQiniu.returnToken(this.props.uploadConfig);
           }
-          key = PRO_COMMON.String.RndNum(20)+"."+PRO_COMMON.String.GetFileExtensionName(file.name)[0];
-          if (this.props.uploadConfig.QINIU_KEY_PREFIX) {
-            key = this.props.uploadConfig.QINIU_KEY_PREFIX + '/' + key
+
+          const isGenerateKeyByRandom = typeof this.props.uploadConfig.isGenerateKeyByRandom === 'undefined' ? true : false;
+          if (isGenerateKeyByRandom) {
+            key = PRO_COMMON.String.RndNum(20)+"."+PRO_COMMON.String.GetFileExtensionName(file.name)[0];
+            if (this.props.uploadConfig.QINIU_KEY_PREFIX) {
+              key = this.props.uploadConfig.QINIU_KEY_PREFIX + '/' + key
+            }
+
+            return {token,key};
           }
-          return {token,key}
+
+          return {token};
         },
       multiple: properties.isMultiple || false,
       beforeUpload: this.beforeUpload.bind(this),
@@ -256,15 +264,16 @@ UploadImage.propTypes = {
   fileList: React.PropTypes.arrayOf(React.PropTypes.shape({url: React.PropTypes.string.isRequired, thumbUrl: React.PropTypes.string, name: React.PropTypes.string})),
   uploadConfig:React.PropTypes.shape({
     QINIU_URL: React.PropTypes.string.isRequired,
-    QINIU_IMG_TOKEN_URL: React.PropTypes.string.isRequired,
+    QINIU_IMG_TOKEN_URL: tokenPropTypes,
     QINIU_PFOP:React.PropTypes.shape({
       url: React.PropTypes.string.isRequired
     }),
-    QINIU_VIDEO_TOKEN_URL: React.PropTypes.string.isRequired,
-    QINIU_FILE_TOKEN_URL: React.PropTypes.string.isRequired,
+    QINIU_VIDEO_TOKEN_URL: tokenPropTypes,
+    QINIU_FILE_TOKEN_URL: tokenPropTypes,
     QINIU_DOMAIN_IMG_URL: React.PropTypes.string.isRequired,
     QINIU_DOMAIN_VIDEO_URL: React.PropTypes.string.isRequired,
-    QINIU_DOMAIN_FILE_URL: React.PropTypes.string.isRequired
+    QINIU_DOMAIN_FILE_URL: React.PropTypes.string.isRequired,
+    isGenerateKeyByRandom: React.PropTypes.bool.isRequired
    })
 };
 

src/global/propTypes/index.js

@@ -0,0 +1,3 @@
+
+export * from './token';
+

src/global/propTypes/token.js

@@ -0,0 +1,6 @@
+import React from 'react';
+
+export const tokenPropTypes = React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.func]);
+
+
+

src/global/supports/methods/public.jsx

@@ -72,6 +72,16 @@ module.exports = {
                 url = uploadConfig.QINIU_IMG_TOKEN_URL;
             }
             //console.log("token_url",url);
+
+            if (Object.prototype.toString.call(url) === '[object Function]') {
+                token = url();
+
+                localStorage.setItem("qiniu_" + type + "_token", token);
+                localStorage.setItem("last_qiniu_token_time_" + type, Date.parse(new Date()) / 1000);
+
+                return "";
+            }
+
             AJAX.requestData({
                 url: url,
                 method: 'post',