xiaomaer-richeditor
v1.0.2
Published
> xiaomaer-richeditor
Downloads
3
Readme
富文本编辑器组件
xiaomaer-richeditor
概述
基于umeditor的react富文本编辑器组件。
API
| 参数 | 说明 | 类型 | 默认值 | 是否必传 | | --- | --- | --- | --- | --- | | id | 唯一标示 | string | 'richeditor' | Yes | | value | 富文本编辑器的值，默认为空【注意：受控的方式使用该组件，由于设置value时，调用setContent方法会触发selectionchange事件，导致光标所在位置失效，插入图片、链接等内容位置不正确，拖拽异常等，故不推荐使用】| string | - | No | | defaultValue | 富文本编辑器默认值，仅初始化时使用一次，默认为空| string | - | No | | videoConfig | 视频相关配置 | object | - | No | | height | 编辑器高度（包括工具栏） | number | 400 | No | | minheight | 编辑器最小高度（包括工具栏） | number |120 | No | | zIndex | 编辑器z-index | number | 10001 | No | | editStatus | 是否可编辑 | boolean | true | No | | errorMsg | 报错信息 | string | '请填写正确信息' | No | | errorStatus | 是否报错 | boolean | false | No | | imageUrl | 本地上传时请求的上传地址 | string | 当前页面地址 | No | | pastedImageUrl | 自行粘贴图片上传的接口返回，组装成图片url，此参数优先于imagePath | Function | null | No | | imagePath | 使用组合方式组装返回的url，需要设置正确的路径，如果设置了getImageRtnUrl，此参数不起作用 | string | 当前页面地址 | No | | parameter | 本地上传时的参数，开头不加 & | string | - | No | | localUpload | 开启本地上传功能 | boolean | false | No | | fileType | 文件类型 | Array | - | No | | fileSize | 文件大小 | string | - | No | | fileSizeMessage | 文件大小错误提示 | string | - | No | | fileTypeMessage | 文件格式错误提示 | string | - | No | | toolbar | 自定义工具栏 | Array | - | No | | onChange | value是指当前富文本中的value，haveContent（boolean）指当前文本框中是否有内容 | function(value,haveContet){} | - | No | | onBlur | 当前富文本编辑器失去光标时触发（value是指当前富文本中的value，haveContent（boolean）指当前文本框中是否有内容） | function(value,haveContet){} | - | No | | onFocus | 当前富文本编辑器获得光标时触发 | function | - | No | | onUploadSuccess | 图片上传成功回调 | function | - | No | | onUploadFailure | 图片上传失败回调 | function | - | No | | autoHeightEnabled | 是否可以根据内容自动增高| boolean| true | No | | initialStyle | 默认样式,需要指定具体的选择器来设置 | string | -| No | | translation | 多语言支持 | object | { lang: 'zh-cn'} ('zh-cn'|'zh_CN'|'en'|'en_US'|'zh-tw'|zh_TW') | No | | pasteFormat | 自定义格式化方法 可以对复制的文本进行格式化处理 | (html) => {return html} | - | No | | draggable | 是否允许拖拽调整编辑器大小 | boolean | false | No | | retainOnlyLabelPasted | 粘贴只保留标签，去除标签所有属性 | boolean | false | No | | pasteplain | 是否默认为纯文本粘贴。false为不使用纯文本粘贴，true为使用纯文本粘贴 | boolean | false | No | | filterTxtRules | 纯文本粘贴模式下的过滤规则 | object | 默认值见umeditor.config.js配置 | No | | placeholder | 配置编辑器提示文字 | string | '你想说点什么…' | No |
数据格式
videoConfig数据格式:
{
"autoplay": true, //自动播放，默认false
"controls": true,// 默认false
"loop": true //循环播放，默认false
}toolbar的默认值:
[
'source | undo redo | bold italic underline strikethrough | forecolor | fullscreen |',
'insertorderedlist insertunorderedlist | cleardoc removeformat | fontfamily fontsize',
'| justifyleft justifycenter justifyright justifyjustify indent outdent |',
'link unlink | image video music',
'| horizontal preview inserttable ',
]注意
- 该组件插入视频仅支持mp4格式，win7下由于系统限制，最小支持48x48,最大支持1920x1088
richeditor参数
id:"richeditor", //唯一标示，必须
value:this.decode("<p><a href="https://www.baidu.com/" target="_blank" title="bd">bd</a><br/></p>"), //富文本内显示的值，默认为空，demode()方法为解码方法
videoConfig: { //视频相关配置
autoplay: true, //自动播放，默认false
controls: true,// 默认false
loop: true //循环播放，默认false
},
height:240,//编辑器高度，默认240
zIndex: 10001,//编辑器z-index，默认10001
editStatus : true, //是否可编辑，true为可编辑，false为不可编辑，只读状态(readonly)
errorMsg: "出错了~~~！", //报错信息，默认为‘请填写正确信息’
errorStatus: true, //是否报错
imageUrl: "https://demo-cloud.italent.link/api/v2/Data/File/", //本地上传时请求的上传地址，默认为当前页面地址
parameter: "app=BeisenCloudDemo&metaObjName=BeisenCloudDemo.ceshi0602", //本地上传时的参数，开头不加 &
localUpload: true, //开启本地上传功能，默认false
fileType: ['.jpeg','.jpg','.gif','.png','.bmp'],
fileSize: '10M',
fileSizeMessage: '上传图片不允许超过10M',
fileTypeMessage: '上传图片格式错误,默认只支持jpeg,jpg,gif,png,bmp',
toolbar:[
'source | undo redo | bold italic underline strikethrough | forecolor | fullscreen |',
'insertorderedlist insertunorderedlist | cleardoc removeformat | fontfamily fontsize' ,
'| justifyleft justifycenter justifyright justifyjustify indent outdent |',
'link unlink | image video music',
'| horizontal preview inserttable ',
], //自定义工具栏，默认为'source | undo redo | bold italic underline strikethrough | forecolor |','insertorderedlist insertunorderedlist | cleardoc removeformat | fontfamily fontsize' ,'| justifyleft justifycenter justifyright justifyjustify indent outdent |','link unlink | image video music','| horizontal preview inserttable ',
onChange : function(value,haveContet){} //函数参数value是指当前富文本中的value，haveContent（boolean）是指当前文本框中是否有内容
onUploadSuccess:() => {},//图片上传成功回调
onUploadFailure:() => {},//图片上传失败回调
translation: {
lang: 'zh-cn' // { zh-cn | en } 目前只支持这两种
}
pasteFormat: (html) => {return html} // 自定义格式化方法 可以对复制的文本进行格式化处理richeditor调用方法
1.安装npm组件包
npm install xiaomaer-richeditor --save-dev2.引用组件
import RichEditor from "xiaomaer-richeditor"3.传入参数 该参数为上述参数，传入方式使用: {...props}
class Demo extends Component{
constructor(props) {
super(props);
this.state = {
value: ""
}
}
decode(str){
return str
.replace(/"/g, '"')
.replace(/'/g, "'")
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/&/g, '&');
}
encode(str) {
return str
.replace(/&/g, '&')
.replace(/"/g, '"')
.replace(/'/g, ''')
.replace(/</g, '<')
.replace(/>/g, '>');
}
render () {
//视频测试地址mp4: http://f.us.sinaimg.cn/001jqIlHlx07jXQjrcEU01040200WPGC0k010.mp4?label=mp4_ld&template=300x120.28&Expires=1526894899&ssig=ZZ4YhH%2Bl%2F8&KID=unistore,video
//http://www.w3school.com.cn/i/movie.ogg
//http://video.699pic.com/videos/69/64/54/qgE4wF14Rye61523696454.mp4
let options ={
value:"http://video.699pic.com/videos/69/64/54/qgE4wF14Rye61523696454.mp4",
videoConfig: { //视频相关配置
autoplay: false, //自动播放，默认false
controls: true,// 默认false
loop: true //循环播放，默认false
},
height: 240,//编辑器高度，默认240
zIndex:10001,//编辑器z-index，默认10001
editStatus : true,
errorMsg: "出错了~~~！", //报错信息，默认为‘请填写正确信息’
errorStatus: true, //是否报错
imageUrl: "http://demo-cloud.italent.link/api/v2/Data/File", //本地上传时的上传地址，默认为当前页面地址
parameter: "app=BeisenCloudDemo&metaObjName=BeisenCloudDemo.123", //本地上传时的参数，开头不加 &
localUpload: true, //开启本地上传功能
oolbar:[
'source | undo redo | bold italic underline strikethrough | forecolor | fullscreen |',
'insertorderedlist insertunorderedlist | cleardoc removeformat | fontfamily fontsize' ,
'| justifyleft justifycenter justifyright justifyjustify indent outdent |',
'link unlink | image video music',
'| horizontal preview inserttable ',
], //自定义工具栏，默认为'source | undo redo | bold italic underline strikethrough | forecolor |','insertorderedlist insertunorderedlist | cleardoc removeformat | fontfamily fontsize' ,'| justifyleft justifycenter justifyright justifyjustify indent outdent |','link unlink | image video music','| horizontal preview inserttable ',
onChange : function(value,haveContet){
console.log(value)
},
onUploadSuccess: () => {console.log('文件上传成功')},
onUploadFailure: () => {console.log('文件上传失败')},
pasteFormat: (html) => {return html.replace(/font-family: PingFangSC-Regular;/g,'');}
}
return (
<div style={{"width":"1000px"}}>
<RichEditor id="richeditor1" {...options}/>
</div>
)
}
}
render(<Demo />, document.getElementById('content'))