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] 禁用插入链接弹窗敲回车自动提交表单的问题