@beisen-platform/um-rich-editor
v1.0.58
Published
所见即所得的文本编辑器。
Downloads
161
Readme
richeditor 使用说明
项目运行
cnpm install 或 npm install cnpm使用教程
npm run dev (开发环境打包 port:8080)
npm run test (测试用例)
npm run build (生产环境打包)
注意
- 该组件插入视频仅支持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:() => {},//图片上传失败回调
//注: 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在上边
richeditor调用方法
1.安装npm组件包
npm install @beisen/richeditor --save-dev
2.引用组件
import BaseButton from "@beisen/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 ',
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('文件上传失败')}
}
return (
<div style={{"width":"1000px"}}>
<UmRichEditor id="richeditor1" {...options}/>
</div>
)
}
}
render(<Demo />, document.getElementById('content'))