一款簡潔表格功能齊全的富文字編輯器，表格編輯有比較強大的功能，支援獲取html,設定只讀功能

1、安裝 tinymce

npm install tinymce --save

2、安裝@packy-tang/vue-tinymce

npm install @packy-tang/vue-tinymce

3、複製 node_modules/tinymce目錄下所有檔案至public/static目錄下

4、public裡面的index.html檔案 引入

<scriptsrc="/static/tinymce/tinymce.min.js"></script>

新建tinymce.vue檔案

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

效果圖