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