一个Vue.js 2组件/插件，用于在应用程序上实现  Trumbowyg WYSIWYG编辑器。

变更日志：

v4.0.0（10/31/2020）

• 添加对Vue v3.x的支持

v3.6.2（09/11/2020）

• 修复：禁用的道具初始值未得到反映

v3.6.0（07/01/2020）

• 添加： disabled prop

安装和下载：

# 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>

---

官网：https://github.com/ankurk91/vue-trumbowyg

演示：https://www.vue365.cn/code_demo.php?id=1223

GitHub下载：https://github.com/ankurk91/vue-trumbowyg/archive/master.zip