Vue富文本框插件
Vue富文本框插件 by Jdes
该插件是基于jsy-editor富文本插件进行二次封装的Vue版本的富文本插件，保留全部功能，同时简化常规配置（主要是图片上传配置优化）
jsy-editor 富文本插件是在 wangEditor 的基础上进行功能扩展之后的富文本框插件
插件部分配置和
wangEditor权值不一样，请勿随意重复配置。
API props重要说明： 使用该富文本框插件，在提交表单之后，务必进行重置操作，即将
v-model的值设置为空字符串
| 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> 示例 文本模式
版权声明：
1、该文章(资料)来源于互联网公开信息，我方只是对该内容做点评，所分享的下载地址为原作者公开地址。2、网站不提供资料下载，如需下载请到原作者页面进行下载。
