1.0.0 • Published 3 years ago
vue-editor-wangeditor v1.0.0
vue-editor-wangeditor
vue-editor-wangeditor 组件是一个 vue 组件，是对 wangeditor 富文本编辑器的二次封装。增加了输入字数的显示、最大输入字数的限制、最大上传图片的限制、错误提示显示自定义等功能。
使用
安装插件
npm install --save vue-editor-wangeditor页面使用
<template>
<div>
<vueWangeditor v-model="value" actionUrl="/common/upload_img" :config="config" />
</div>
</template>
<script>
import vueWangeditor from 'vue-editor-wangeditor';
export default {
name: 'Home',
data() {
return {
value: '',
config: {}
};
},
components: {
vueWangeditor
},
watch: {
value: function () {
console.log('value: ' + this.value);
}
},
created() {
this.config.onchange = (newHtml) => {
console.log('newHtml:' + newHtml);
};
}
};
</script>Prop
| 属性名 | 数据类型 | 默认值 | 说明 |
|---|---|---|---|
editorId | String | - | wangeditor 编辑器的ID。非必填，如果值为空，组件也会自动设定。 |
config | Object | - | wangeditor 编辑器的配置项。详见官方文档说明：https://www.wangeditor.com/doc/。 |
maxTextSize | Number | 1000 | 允许输入的最大文本长度 |
maxImageNum | Number | 10 | 允许上传的最大图片数量。注意，如果你自定义图片上传方法后，该属性将失效。 |
actionUrl | String | - | 图片上传api的 url |
headers | Object | - | 图片上传 api 的 header。注意，如果你自定义图片上传方法，该属性将失效。 |
msgFn | Function | - | 错误信息展示的方法。方法将接收一个错误信息的 参数msg。默认情况下，组件将以 alert 的形式显示错误信息。如果你配置该选项，显示错误信息时将会直接调用你配置的 function。 |
hiddenSizeLimit | Boolean | false | 控制富文本编辑器输入字数的显示器的显示和隐藏。当 value 为 true 时，显示器将消失。 |
方法
getText
说明：获取富文本编辑的的 text，同 wangeditor 的
editor.txt.text()。返回值：该方法返回一个对象。对象有如下连个属性：
属性 类型 说明 originStringwangeditor 的 editor.txt.text()方法返回的值。textString转义后的 origin 值
isNullEditor
- 说明：判断编辑器的内容是否为空
- 返回值：
Boolean。为空时返回true，不为空时返回false
isOverMaxTextLength
- 说明：判断编辑器内容是否超过设定的最大长度
- 返回值：
Boolean。超过返回true
getImageNum
- 说明：获取已上传的图片数量
- 返回值：
Number