富文本编辑器 tinymce 的使用

<template>
  <div>
    <div v-html="content"></div>
    <el-button @click="handleClick">click</el-button>
    <!-- App -->
    <div>
      <vue-tinymce v-model="content" :setup="setup" :setting="setting" />
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      content: '<table style="border-collapse: collapse; width: 100%;height:35px;" border="1"><tbody><tr><td>this is p1</td><td>this is p2</td></tr></tbody></table>',
      setting: {
        readonly: false,
        menubar: false,
        toolbar:
          "undo redo | fullscreen | formatselect alignleft aligncenter alignright alignjustify | link unlink | numlist bullist | image media table | fontselect fontsizeselect forecolor backcolor | bold italic underline strikethrough | indent outdent | superscript subscript | removeformat |",
        toolbar_drawer: "sliding",
        quickbars_selection_toolbar:
          "removeformat | bold italic underline strikethrough | fontsizeselect forecolor backcolor",
        plugins: "link image media table lists fullscreen quickbars",
        language_url: "/static/tinymce/langs/zh_CN.js", // 语言包的路径
        language: "zh_CN",
        height: 350
      }
    };
  },

  methods: {
    handleClick() {
      console.log(this.content);
    },
    setup(editor) {
      console.log(editor);
    }
  }

};
</script>