# 富文本编辑器组件
> @beisen-phoenix/richeditor
## 概述
> 富文本编辑器。
## 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 | 自定义格式化方法正则表达式 | string[] | - | No |
| draggable | 是否允许拖拽调整编辑器大小 | boolean | false | No |
| retainOnlyLabelPasted | 粘贴只保留标签，去除标签所有属性 | boolean | false | No |
| pasteplain | 是否默认为纯文本粘贴。false为不使用纯文本粘贴，true为使用纯文本粘贴 | boolean | false | No |
| filterTxtRules | 纯文本粘贴模式下的过滤规则 | object | 默认值见umeditor.config.js配置 | No |
| tooltipRef| toolbar在hover的时候显示tooltip的位置参考元素,适用于需父容器有transform属性的时候定位不准的问题,指的是元素的类名| string | false | No |
| resizeContainer| 点击全屏时,默认是相对屏幕展开,通过此参数可以控制相对于哪个元素进行放大,该值表示相对元素的className| string | false | No |
| extraCls | 扩展的class名称,一般用于样式扩展 | string | -- | 否 |
| onFullScreen | 全屏时的回调 | function | - | No |
| onNarrowScreen | 全屏恢复大小时的回调 | function | - | No |
## 数据格式
videoConfig数据格式:
```$xslt
{
"autoplay": true, //自动播放，默认false
"controls": true,// 默认false
"loop": true //循环播放，默认false
}
```
toolbar的默认值:
```$xslt
[
'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参数
```javascript
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:() => {},//图片上传失败回调
//注: UmRichEditor组件中包含CommonLabel组件,以下props是CommonLabel组件需要的.
name: "测试",//名称
lableTxt: false, //label中文字对齐方式，true左对齐，false右对齐
required: true, //必填
helpMsg:"dqwdqw", //帮助信息
sideTip:false ,//toolTip是否左右显示
hiddenTip:false, //toolTip是否显示
lablePos: false, //label位置，true时在左边，false在上边
translation: {
lang: 'zh-cn' // { zh-cn | en } 目前只支持这两种
}
pasteFormat: ['(<\\w+[^>]*?)\\s+id="[^"]+"([^>]*>)'] // 自定义格式化方法 可以对复制的文本进行格式化处理,只会保留$1,$2
```
## richeditor调用方法
1.安装npm组件包
```
npm install @beisen/richeditor --save-dev
```
2.引用组件
```
import BaseButton from "@beisen/richeditor"
```
3.传入参数
该参数为上述参数，传入方式使用: {...props}
```javascript
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, '>');
}
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 ',
name: "测试",//名称
lableTxt: false, //label中文字对齐方式，true左对齐，false右对齐
required: true, //必填
helpMsg:"dqwdqw", //帮助信息
sideTip:false ,//toolTip是否左右显示
hiddenTip:false, //toolTip是否显示
lablePos: false, //label位置，true时在左边，false在上边
onChange : function(value,haveContet){
console.log(value)
},
onUploadSuccess: () => {console.log('文件上传成功')},
onUploadFailure: () => {console.log('文件上传失败')},
pasteFormat: (html) => {return html.replace(/font-family: PingFangSC-Regular;/g,'');}
}
return (
)
}
}
render(, document.getElementById('content'))
```