v-mode组件之 Trix-editor

好的代码会说话，先上组件Wysiwyg.vue代码

Wysiwyg (what you see is what you get)
所见即所得系统，trix-editor就是这么一款编辑器

组件使用
<wysiwyg v-model="form.body" :value="form.body"></wysiwyg>

组件源码

<template>
<div>
  <!-- 此处hidden,id必须，id为trix-editor引用的input属性 -->
  <!-- 此处 name,value,hidden,为trix-editor所存储引用的内容 -->
    <input type="hidden" id="trix" :name="name" :value="value">
    <trix-editor ref="trix" input="trix" :placeholder="placeholder"></trix-editor>
</div>
</template>

<script>
import Trix from "trix";

export default {
  props: ["name", "value","placeholder","shouldClear"],

  // vm.$refs一个对象，持有注册过 ref 特性 的所有 DOM 元素和组件实例。
  // ref 被用来给元素或子组件注册引用信息
  // ref本身是作为渲染结果被创建的
  mounted() {

    // Observing Editor Changes
    // trix-change fires whenever the editor’s contents have changed.
    // trix-change 是trix文本编辑器上观察编辑器内容是否改变状态的事件与vue无关
    this.$refs.trix.addEventListener("trix-change", e => {
      this.$emit("input", e.target.innerHTML);
    });

    this.$watch('shouldClear',()=>{
        this.$refs.trix.value = '';
    });
  }
};
</script>

• 补充相关知识
  
  1. trix
  2. v-model在组件中的使用