插件名称 | vue-trumbowyg |
---|---|
发布时间 | 2020年7月3日 |
插件作者 | ankurk91 |
一个Vue.js 2组件/插件,用于在应用程序上实现 Trumbowyg WYSIWYG编辑器。
v4.0.0(10/31/2020)
v3.6.2(09/11/2020)
v3.6.0(07/01/2020)
# Yarn
$ yarn add vue-trumbowyg
# NPM
$ npm install vue-trumbowyg --save
<template>
<textarea></textarea>
</template>
<script type="text/javascript">
import jQuery from 'jquery';
import 'trumbowyg';
// 你必须自己导入css
// 您必须配置webpack以加载svg文件
import svgIcons from 'trumbowyg/dist/ui/icons.svg';
// https://alex-d.github.io/Trumbowyg/documentation/#events
const events = ['focus', 'blur', 'change', 'resize', 'paste', 'openfullscreen', 'closefullscreen', 'close'];
export default {
name: 'trumbowyg',
props: {
value: {
default: null,
required: true,
validator(value) {
return value === null || typeof value === 'string' || value instanceof String
}
},
// http://alex-d.github.io/Trumbowyg/documentation.html#basic-options
config: {
type: Object,
default: () => ({})
},
// https://alex-d.github.io/Trumbowyg/documentation/#svg-icons
svgPath: {
type: [String, Boolean],
default: svgIcons,
},
},
data() {
return {
// jQuery DOM
el: null,
}
},
mounted() {
// 如果实例已加载,请提前返回
if (this.el) return;
// 存储DOM
this.el = jQuery(this.$el);
// 带配置的初始化编辑器
this.el.trumbowyg(Object.assign({svgPath: this.svgPath}, this.config));
// 设定初始值
this.el.trumbowyg('html', this.value);
// 注意进一步的变化
this.el.on('tbwchange', this.onChange);
// 解决方法:trumbowyg不会触发Ctrl+V上的更改事件
this.el.on('tbwpaste', this.onChange);
// 注册事件
this.registerEvents();
},
beforeDestroy() {
// 释放内存
if (this.el) {
this.el.trumbowyg('destroy');
this.el = null;
}
},
watch: {
/**
* 听取来自组件外部的更改并更新DOM
*
* @param newValue String
*/
value(newValue) {
if (this.el) {
// 防止多个输入事件
if (newValue === this.el.trumbowyg('html')) return;
// 设置新值
this.el.trumbowyg('html', newValue)
}
},
},
methods: {
/**
* 使用当前编辑器值发出输入事件
* 这将更新父组件上的v模型
* 当值由编辑器本身更改时,将调用此方法
*
* @param event
*/
onChange(event) {
this.$emit('input', event.target.value);
},
/**
* 发出所有可用事件
*/
registerEvents() {
events.forEach((name) => {
this.el.on(`tbw${name}`, (...args) => {
this.$emit(`tbw-${name}`, ...args);
});
})
}
}
};
</script>