@beisen/um-rich-editor-upload

消息模板项目富文本编辑器

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@beisen/um-rich-editor-upload
1.0.143 years ago4 years agoMinified + gzip package size for @beisen/um-rich-editor-upload in KB

Readme

richeditor 使用说明

项目运行

  1. cnpm install 或 npm install cnpm使用教程

  1. npm run dev (开发环境打包 port:8080)

  1. npm run test (测试用例)

  1. 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>"),  //富文本内显示的值
    videoConfig: { //视频相关配置
   autoplay: true, //自动播放,默认false
   controls: true, //视频工具条,默认true
   loop: true //循环播放,默认false
 },
    name: "测试",
    required: true,  //必填
    errorStatus: true, //是否报错
    errorMsg: "出错了~~~!", //报错信息
    helpMsg:"dqwdqw",  //帮助信息
    sideTip:false ,//toolTip是否左右显示
    hiddenTip:false, //toolTip是否显示
    editStatus : true,  //是否可编辑,只读状态(readonly)
    lablePos: false, //label位置,true时在左边,false在上边
    lableTxt: false, //label中文字对齐方式,true左对齐,false右对齐
    onChange : function(value,haveContet){
 self.onChange(value,haveContet)
    }

richeditor调用方法

1.安装npm组件包
npm install @beisen/richeditor --save-dev

2.引用组件
``` import BaseButton from "@beisen/richeditor" ```
  1. 传入参数
该参数为上述参数,传入方式使用: {...参数}
```
decode(str){
return str
  .replace(/"/g, '"')
  .replace(/'/g, "'")
  .replace(/</g, '<')
  .replace(/>/g, '>')
  .replace(/&/g, '&');
}
let options ={
      value:this.decode("<p><a href="https://www.baidu.com/" target="_blank" title="bd">bd</a><br/></p>"),
      videoConfig: { //视频相关配置
        autoplay: true, //自动播放,默认false
        controls: true, //视频工具条,默认true
        loop: true //循环播放,默认false
      },
      name: "测试",
      required: true,
      errorStatus: true, //是否报错
      errorMsg: "出错了~~~!", //报错信息
      helpMsg:"dqwdqw",
      sideTip:false ,//toolTip是否左右显示
      hiddenTip:false, //toolTip是否显示
      editStatus : true,
      lablePos: false, //label位置,true时在左边,false在上边
      lableTxt: false, //label中文字对齐方式,true左对齐,false右对齐
      onChange : function(value,haveContet){
        self.onChange(value,haveContet)
      }
    }

	render () {
			return (
				 <UmRichEditor id="richeditor" {...options}/>
			)
		}
	```