react富文本使用
Version note: React 15.4.2+ and react-dom 15.4.2+ is required. Antd version at last 2.8.3 in your project is recommended.
版本号说明:react、react-dom 版本必须在15.4.2以上,Antd版本最好在2.8.3以上。
1,使用命令安装第三方模块
npm install react-lz-editor --save 或者 yarn add react-lz-editor
2, 把模块引入到自己的项目中,然后根据模块提供的api方法进行设置,实例如下
renter(){
return (
<div>
<LzEditor
active={true}
importContent={this.state.rawContent}
cbReceiver={this.receiveRaw}
uploadConfig={uploadConfig}
image={false}
video={false}
audio={false}
convertFormat="raw"/>
</div>
)
}
3, api参考
配置项 | 类型 | 默认值 | 说明 |
---|---|---|---|
active | bool | false | 有更新时是否刷新 |
importContent | string | "" | 编辑器显示内容 |
cbReceiver | function | null | 编辑器内容更新后的回调函数,此函数接受一个改动后的返回参数值 |
undoRedo | bool | true | 是否启用撤销恢复功能,默认启用 |
removeStyle | bool | true | 是否启用移除格式功能,默认启用 |
pasteNoStyle | bool | true | 是否启用文本粘贴功能,默认启用 |
blockStyle | bool | true | 是否启用段落样式设置功能(H1、列表、区段等),默认启用 |
alignment | bool | true | 是否启用文本对齐设置功能,默认启用 |
inlineStyle | bool | true | 是否启用文字样式设置功能(加粗、倾斜、下划线等),默认启用 |
color | bool | true | 是否启用文字颜色设置功能,默认启用 |
image | bool | true | 是否启用图片上传后插入功能,默认启用 |
video | bool | true | 是否启用视频上传后插入功能,默认启用 |
audio | bool | true | 是否启用音频上传后插入功能,默认启用 |
urls | bool | true | 是否启用添加删除链接功能,默认启用 |
autoSave | bool | true | 是否启用自动保存功能,默认启用 |
fullScreen | bool | true | 是否启用全屏功能,默认启用 |
convertFormat | string | "html" | 设置内容导入导出格式,支持html、markdown、raw三种格式,默认html |
uploadConfig | object | null | 启用媒体上传后插入功能时,上传参数配置对象(上传到七牛,无需配置uploadProps) |
uploadProps | object | null | 自定义上传方法及上传设置(无需配置uploadConfig,同时配置uploadConfig和uploadProps,则uploadProps优先),API请参考Antd.Upload |