Vue-editor-interline NPM

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>