vue-editor-interline

Vue富文本框插件 by Jdes

该插件是基于jsy-editor富文本插件进行二次封装的Vue版本的富文本插件，保留全部功能，同时简化常规配置（主要是图片上传配置优化）

jsy-editor 富文本插件是在 wangEditor 的基础上进行功能扩展之后的富文本框插件

插件部分配置和wangEditor权值不一样，请勿随意重复配置。

重要说明： 使用该富文本框插件，在提交表单之后，务必进行重置操作，即将v-model的值设置为空字符串

API

props

| props | default | type | 说明 | | ---------- | ------------------ | --------- | -------------------------------------------------------------------------------------------- | | v-model | - | - | 绑定值，双向绑定 | | toolBar | 同wangEditor菜单 | Array | 富文本框工具栏，默认值和wangEditor一样 | | action | '' | String | 图片上传地址 | | fileName | files | String | 服务器图片上传接口文件流键名 | | baseUrl | '' | String | 图片上传回显的前缀地址，默认空 | | size | 2 | Number | 图片上传大小限制，单位:MB | | limit | - | Number | 图片上传数量限制，默认无 | | data | {} | Object | 图片上传附加参数 | | merge | false | Boolean | 图片上传参数是否合并到 url | | debug | false | Boolean | 富文本框debugger模式开关，生产环境建议关闭 | | hook | {} | Object | 自定义图片上传钩子函数，配置此项必须覆写customInsert钩子 | | option | {} | Object | wangEditor富文本框配置，权值最高，配置此项后，会覆盖之前单独配置的同名配置，请谨慎使用 |

注意，以上图片上传相关配置（fileName,baseUrl,merge,data），必须在开启服务器上传配置action后才会生效。

富文本默认上传方式（即不配置action）为base64。

方法

方法调用需要使用 ref

| 方法名称 | 参数 | 说明 | | -------- | ---- | ---------------- | | clear | - | 清空富文本框内容 |

安装

yarn add vue-editor-interline --save

或者

npm i vue-editor-interline --save

main.js

import vueEditor from 'vue-editor-interline'
import 'vue-editor-interline/lib/vue-editor-interline.css'

Vue.use(vueEditor)

模板语法

<template>
  <div id="app">
    <div>
      <vueEditor
        debug
        ref="vRef"
        v-model="data"
        :option="{fontNames : [
            '宋体',
            '隶书',
            '微软雅黑',
            'Arial',
            'Tahoma',
            'Verdana'
        ]}"
      />
    </div>
  </div>
</template>

<script>
  export default {
    methods: {
      // 调用此方法可以清空富文本内容
      clear() {
        this.$refs.vRef.clear()
      }
    }
  }
</script>

示例

文本模式

图片