1.0.58 • Published 5 years ago
@beisen-platform/um-rich-editor v1.0.58
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'))
1.0.58
5 years ago
1.0.57
5 years ago
1.0.56
5 years ago
1.0.55
5 years ago
1.0.54
5 years ago
1.0.53
5 years ago
1.0.52
5 years ago
1.0.51
5 years ago
1.0.50
5 years ago
1.0.49
5 years ago
1.0.48
5 years ago
1.0.46
5 years ago
1.0.45
5 years ago
1.0.44
5 years ago
1.0.43
5 years ago
1.0.42
5 years ago
1.0.41
5 years ago
1.0.40
5 years ago
1.0.39
5 years ago
1.0.38
5 years ago
1.0.37
5 years ago
1.0.36
5 years ago
1.0.34
5 years ago
1.0.33
5 years ago
1.0.31
5 years ago
1.0.30
5 years ago
1.0.29
5 years ago
1.0.28
5 years ago
1.0.27
5 years ago
1.0.26
5 years ago
1.0.25
5 years ago
1.0.24
5 years ago
1.0.23
5 years ago
1.0.22
5 years ago
1.0.21
5 years ago
1.0.20
5 years ago
1.0.19
5 years ago
1.0.18
5 years ago
1.0.17
5 years ago
1.0.16
5 years ago
1.0.15
5 years ago
1.0.14
5 years ago
1.0.13
5 years ago
1.0.12
5 years ago
1.0.11
5 years ago
1.0.10
5 years ago
1.0.9
5 years ago
1.0.8
5 years ago
1.0.7
5 years ago