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
posted @ 2018-03-20 18:49  再见,时光  阅读(4269)  评论(0编辑  收藏  举报