freeman-editor v1.1.3

富文本编辑器

用于富文本编辑器需要上传图片等应用场景

//内置组件依赖antd，如果项目未使用请单独安装
npm i antd --save


npm i freeman-editor --save

    import Editor from 'freeman-editor';
    <Editor
        //如果不使用rc-form，则可以使用 value 和 onchange 自行处理组件内的值
        value={this.state.editorHtml}
        onchange={(value)=>{
            this.setState({
                editorHtml: value
            })
        }}

        //推荐使用 rc-form 的 getFieldProps 模式
        //{...getFieldProps('editorHtml')}

        // 编辑器宽度,默认为640
        width={640}
        // 压缩属性配置
        compressConfig={{
            // 图片最大尺寸，超过该尺寸时压缩，默认为640
            imgMaxWidth: 750,
            // 压缩后图片类型，如需透明效果请 输入 "image/png"， 默认为jpg
            imgType: 'image/jpeg',
            // 压缩后图片质量，png格式下无效,取值范围 0~1。默认为1
            quality: 0.6,
        }}
        //上传属性配置
        uploadConfig={{
            // base64图片上传地址，默认为 /upload/base64。如果是bucky用户可以参考添加自己的action http://git.lianjia.com/sh-fe/store-component/blob/master/freeman-editor/src/base64.js
            url: 'https://xxx.com/upload/base64',
            // 上传时base64的key值，默认为 imgData
            name: 'imgData',
            // 返回json对象中哪个参数是图片的url ，此处模板中返回内容为 {name:"xxx",url:"http://xxxx.jpg"}
            resUrlField: 'url'
        }}

        //允许插入视频
        useVideo={false}
    />

已实现功能： · 富文本编辑器基础功能 · 编辑器压缩图片后上传图片 · 配置上传路径与参数 · 多个富文本编辑器同时使用，互不干扰 · 连续上传同一张图片 · 配置插入视频

计划未来迭代功能： · 定时保存草稿 · 恢复历史草稿版本 · 加入视频插入教程