cf-rich-editor

react-rich-editor

• 1.development 开发文档
• 2.production 使用文档

development 工程及脚手架说明文档

1.scripts CLI

npm run build 编译模块代码到lib文件夹 npm run build-dist 打包生产版本代码到dist npm start 启动调试，支持HMR npm publish 发布到npm

2.package.json 设置全局变量BABEL_ENV

Window 系统 ：SET BABEL_ENV=production 必须使用在shell中使用命令，写入package.json scripts中没有作用 Unix 系统 ：BABEL_ENV=production YOUR_COMMAND_HERE 可以在shell中使用，也可以直接写入package.json scripts中 cross-env 跨平台：cross-env BABEL_ENV=production YOUR_COMMAND_HERE 可以在shell中使用，也可以直接写入package.json scripts中

3. "env" .babelrc

{
  "presets": [],
  "env": {
    // 1. env 指定的配置选项，将合并和覆盖 非env 配置选项。
    // 2. .babelrc "env" 会读取 process.env.BABEL_ENV 的值来判定采用何种配置，当这种不可用，就读取 process.env.NODE_ENV，如果连这也不可用，则默认为"development"。
    // 3. 可以使用以下设置此环境变量：cross-env YOUR_COMMAND_HERE (npm i cross-env --save-dev)
    "production": {
      "presets": [],
      "plugins": []
    },
    "development": {
       "presets": [],
       "plugins": []
    },
    "自定义环境": { 配置 }
  }
}

FAQ

1.Module not found: Error: Can't resolve 'react-hot-loader/patch' 【解决方法】npm install react-hot-loader@next 使用beta 版本

2.打包后dist文件夹下的 js 无法正常引用 【解决方法】打包文件的自执行函数整体赋值给一个全局变量，然后在js中引用全局变量

打包文件后会生成如下的自执行函数：
(function(module){})([function(){},function(){}]);
然后，
var CFRichEditor = (function(module){})([function(){},function(){}]);

3.报错：you have multiple copies of React loaded（你有多个副本的反应加载） 【解决方案】 可能情况1：peerDependencies配置错误，导致版本重复 通常是在插件(modules)开发的场景下，你的插件需要某些依赖的支持，但是你又没必要去安装， 因为插件的宿主会去安装这些依赖，你就可以用peerDependencies去声明一下需要依赖的插件和版本， 如果出问题npm就会有警告来提醒使用者去解决版本冲突问题。

so,简单的来说：就是插件所使用的依赖包不会直接安装，而会直接使用宿主的依赖包

 "peerDependencies": {
    "react": "^0.14.0 || ^15.0.0-rc",
    "react-dom": "^0.14.0 || ^15.0.0-rc"
  },

可能情况2：插件开发，使用webpack打包，然后通过 HTML script 引入了react.js 和 react-dom.js 和 插件（例如这里的dist/CFRichEditor.js） , 这时候webpack就应该把react,react-dom排除在打包之外。否则会重复 webpack配置:

externals: {
    "react": 'React', // 这时候，webpack会创建一个全局变量 React 替代react模块,而不去打包react.js。
    'react-dom': 'ReactDOM' // 同理
}

production 使用文档

ECMAScript 6

import { RichEditor, EditorRecur } from 'cf-rich-editor';
import request from 'cf-rich-editor/lib/Utils/request';
import 'cf-rich-editor/dist/CFRichEditor.css';

import React, { Component, PropTypes } from 'react';
export default class Demo extends Component {
    constructor(props) {
        super(props);
        this.state = {
            rawContentState: {},
        };
        this.handleChange = this._handleChange.bind(this);
        this.handleImageUpload = (file) => {
            const fileData = new FormData();
            fileData.append('fileDataFileName', file); // 后台接收的参数名（模拟 form 下 input[type='file'] 的 name）
            return request('http://192.168.1.49:8080/CFSP/workorders/uploadPicByFile', {
            method: 'POST',
            body: fileData
            });
                    // 数据返回格式如下：
                    // {
                    //     success: 'true',
                    //     file_path: 'http://cf953000.f3322.org:10101/CFSP/media/images/20170105/c9e09ec1-f582-413f-94f4-6c65a5d57ea6.jpg'
                    // };
        };
    }

    _handleChange(html, rawContentState) {
        // console.log(rawContentState);
        // console.log(html);
        this.setState({ rawContentState });
    }

    render() {
        const { rawContentState } = this.state;
        const sessionKey = window.location.href.split('?')[0]; // session名称
        const rowContentStorage = sessionStorage.getItem(sessionKey);
        const richEditorProps = {
            onImageUpload: this.handleImageUpload, // 上传图片
            onChange: this.handleChange,
            importHtml: false, // 是否导入 html(string) 类型数据
            initialRawContent: JSON.parse(rowContentStorage), // 本地缓存数据
            sniffer: { check:true, url: 'http://192.168.1.49:8080/CFSP/web/checkUrl', param: 'urlStr' }
            // 网址嗅探接口：返回值格式遵循{ vaild:true/false,response:'responseInfo' }有效true,无效false
        };
        const editorRecurProps = {
            rawContentState,
        };
        return (
            <div>
                <h2>RichEditor base on draft.js!</h2>
                <RichEditor {...richEditorProps} />
                <h2>实时预览</h2>
                <EditorRecur {...editorRecurProps} />
            </div>
        );
    }
}

FAQ

1.报错：Uncaught ReferenceError: regeneratorRuntime is not defined 【解决方案】 webpack.config.js 文件入口配置： entry:['whatwg-fetch','babel-polyfill','your-entry-file.js'] babel-polyfill要放在开发模块your-entry-file.js的前面