Editor 富文本编辑器

编辑器文档

点击进入 (opens new window)

配置方式

import Vue from 'vue';
import { Editor, ImgUpload } from '@polyv/polyv-ui';

Vue.use(Editor, {
  // 配置上传图片到服务器方法
  uploadImageAction: async (files, cb) => {
    console.log(files);
    const url = await ImgUpload.imgUpload({
      autoFileSource: files[0],
    });
    // 调用cb回调图片地址
    cb(url);
  }
});

基础用法

<template>
  <div>
    <plv-editor
      v-model="content"
      :upload-params="{ type: 'menuImage' }" />
  </div>
</template>

<script>
  export default {
    data() {
      return {
        content: '<p>编辑器内容</p>'
      };
    }
  };
</script>

显示代码

自定义菜单栏

<template>
  <div>
    <plv-editor
      v-model="content"
      :menus="['bold', 'italic']"
      :upload-params="{ type: 'menuImage' }" />
  </div>
</template>

<script>
  export default {
    data() {
      return {
        content: '<p>编辑器内容</p>'
      };
    }
  };
</script>

显示代码

注意height参数只影响编辑器容器高度，如果需要修改输入框的高度，可以设置editorConfig.height, 详细配置可以看wangEditor文档。

Attributes

参数	说明	类型	可选值	默认值
value / v-model	绑定值	String	-	-
menus	菜单栏内容	Array	-	-
height	编辑器高度	String	-	350px
upload-image-action	上传图片处理回调，优先级高于全局配置	Function	-	-
show-full-screen	是否显示全屏按钮	Boolean	-	true
placeholder	编辑器的placeholder	String	-	-
editorConfig	编辑器自定义配置，详情可以看wangEditor文档	Object	-	-

Events

事件名称	说明	回调参数
change	绑定值改变时触发	新的值