qz-park-editor

Project setup

npm install qz-park-editor

使用案例：

// 引入main.js
import editor from 'qz-park-editor'
Vue.use(editor)

// demo.vue
<qz-park-editor
  ref="editor"
  v-model="content"
  :isClear="isClear"
  :uploadImgShowBase64Flg="uploadImgShowBase64Flg"
  :readOnly="readOnly"
  :showFullScreen="showFullScreen"
  :placeholder="placeholder"
  :showMenuTooltips="showMenuTooltips"
  :menuTooltipPositionTop="menuTooltipPositionTop"
  :maxHeight="maxHeight"
  :autoFocus="autoFocus"
  :uploadImgMaxSize="uploadImgMaxSize"
  :uploadImgAccept="uploadImgAccept"
  :uploadImgMaxLength="uploadImgMaxLength"
  :showLinkImg="showLinkImg"
  :elMessage="elMessage"
  :uploadImgCustomConfig="uploadImgCustomConfig"
  :colors="colors"
  :menus="menus"
  @urlHandel="urlHandel"></qz-park-editor>

// 配置项及说明
data(){
    return{
      content: '',// v-model绑定的内容
      // 配置项
      isClear: true,//清除上一操作留下的缓存
      uploadImgShowBase64Flg: false,//是否启用base64图片上传（不可和自定义上传冲突）
      showFullScreen: true,//是否展示全屏按钮
      readOnly: false,//是否只读模式
      placeholder: '请输入内容',//空内容提示文字
      showMenuTooltips:true, // 是否展示工具栏提示
      menuTooltipPositionTop:true,// 工具栏提示上方/下方显示
      maxHeight:400,//最大高度
      autoFocus:false,//自动聚焦
      uploadImgMaxSize:5,// 图片大小限制 5M
      uploadImgAccept:['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'], // 图片类型限制
      uploadImgMaxLength: 1, // 同时最大上传图片数量限制
      showLinkImg:true, // 是否打开网络图片上传
      elMessage:true,//开启element样式提示  false则使用window.alert
      uploadImgCustomConfig:{
        uploadImgServer:'http://*******:****/xdl/addMobileAttach.do',
        uploadImgParams:{
          token:'123'
        },//自定义上传formData参数 参数会被添加到formData中
        uploadImgParamsWithUrl:true,// 是否formData参数拼接到 url 中
        withCredentials:true,//跨域上传中如果需要传递 cookie 需设置 withCredentials 为  true
        uploadImgHeaders:{
          token:'456'
        }, // 自定义上传header
        uploadImgTimeout:10*1000,// 自定义上传超时时间
        uploadFileName:'file',// 附件上传的key值
      },
      colors:[ // 编辑器的字体颜色和背景色
        '#000000',
        '#eeece0',
        '#1c487f',
        '#4d80bf'
      ],
      menus:[
        'head',  // 标题
        'bold',  // 粗体
        'fontSize',  // 字号
        'fontName',  // 字体
        'italic',  // 斜体
        'underline',  // 下划线
        'strikeThrough',  // 删除线
        'indent', // 缩进
        'lineHeight', // 行高
        'foreColor',  // 文字颜色
        'backColor',  // 背景颜色
        // 'link',  // 插入链接
        'list',  // 列表
        'justify',  // 对齐方式
        // 'quote',  // 引用
        'emoticon',  // 表情
        'image',  // 插入图片
        'table',  // 表格
        // 'code',  // 插入代码
        'undo',  // 撤销
        'redo',  // 恢复
        'clean',  // 清除样式
        'splitLine' // 分割线
      ]
    }
  },
  
   methods:{
   	// 当使用自定义上传的时候需要指定接口返回后的逻辑 result：接口返回的数据  
    // 处理获得上传图片url后，调用callback(url)将url返回给组件，已便插入富文本
    urlHandel(result, callback){
      callback(result.result[0].Fileurl);
    },
    // 提供一些可以调用的方法  以便于更好的操控富文本的状态、行为
    test(){
        // 清空文本
        this.$refs.editor.clearTxt()
        // 全屏
        this.$refs.editor.fullscreenFun()
        // 退出全屏
        this.$refs.editor.unFullscreenFun()
        // 禁用
        this.$refs.editor.disableEditor()
        // 启用
        this.$refs.editor.enableEditor()
      }
   }