zan-richtext

zan-richtext

基于 UEditor 的 React 富文件编辑器

代码演示

:::demo 基础用法

import RichText from 'zan-richtext';
 
class Simple extends React.Component {
 
    state = {
        value: 'cafe babe'
    }
 
    componentWillMount() {
        setTimeout(() => {
            this.richTextEditor.editor.setContent('form ajax.');
        }, 5000);
    }
 
    onChange = (data) => {
        this.setState({
          value: data
        });
    }
 
    render() {
        return (
            <div>
                <RichText
                    ref={el => this.richTextEditor = el}
                    value={this.state.value}
                    onChange={this.onChange}
                    editorConfig={{
                        initialFrameWidth: 500
                    }}
                    uploadConfig={{
                        materials: false
                    }}
                />
                <div style={{ marginTop: '20px' }}>
                    <p>结果：</p>
                    <div>{this.state.value}</div>
                </div>
            </div>
        );
    }
}
 
ReactDOM.render(
    <Simple />
    , mountNode
);

:::

API

非受控组件

参数	说明	类型	默认值
className	自定义额外类名	string	''
value	富文本的值	string	''
onChange	内容变化时的回调	func	noop
onReady	ueditor的 ready 回调	func	''
ueditorUrl	ueditor.all.js 的cdn路径	string	'//b.yzcdn.cn/v2/vendor/ueditor/release/ueditor.all.min.201705122045.js'
ueditorConfigUrl	ueditor.config.js 的cdn路径	string	'//b.yzcdn.cn/v2/vendor/ueditor/release/ueditor.config.201705122045.js'
qiniuCdnUrl	七牛 cdn 域名	string	'https://img.yzcdn.cn'
ueditorHomeUrl	ueditor 资源文件 cdn 路径	string	'//b.yzcdn.cn/v2/vendor/ueditor/dist/'
ueditorIframeUrl	ueditor iframe cdn 路径	string	'//www.youzan.com/v2/static/vendor/ueditor/dist/'
editorConfig	ueditor 的自定义配置	object	{}
uploadConfig	upload 组件的自定义配置	object	{}
uploadImageRule	七牛图片规则	string	'!730x0.jpg'

editorConfig 的自定义参数 fetchImgUrl 用来抓取远程图片, onFetchSuccess处理抓取成功数据的解析

更新日志

4.6.7 (2018-05-15)

• [bug fix] 修复在 form 包裹下的 design 组件切换时多余 textarea 的问题

4.5.2 (2017-12-06)

• [bug fix] 禁用插入链接弹窗敲回车自动提交表单的问题