npm install -g @vue/cli
vue create tinymce-vue-demo
cd tinymce-vue-demo

<template>
  <div id="app">
    <h1>TinyMCE in Vue</h1>
    <textarea id="editor" v-model="form.content"></textarea>
  </div>
</template>
 
<script>
import { defineComponent, nextTick, onMounted, reactive } from "vue";
 
export default defineComponent({
  setup() {
    const form = reactive({
      content: "我是初始化內(nèi)容",
    });
 
    // 動(dòng)態(tài)引入 TinyMCE
    const loadTinyMCE = () => {
      return new Promise((resolve, reject) => {
        const script = document.createElement('script');
        script.src = '/tinymce/tinymce.min.js';
        script.onload = resolve;
        script.onerror = reject;
        document.head.appendChild(script);
      });
    };
 
    // 頁面加載時(shí)
    onMounted(() => {
      loadTinyMCE().then(() => {
        // 富文本編輯器
        nextTick(() => {
          window.tinymce.init({
            selector: '#editor', // 選擇器，指定哪個(gè)元素使用 TinyMCE
            license_key: 'gpl', // 許可密鑰，如果是 GPL 版本則不需要設(shè)置
            language: 'zh_CN', // 語言設(shè)置
            width: '100%', // 編輯器寬度
            height: 500, // 編輯器高度
            menubar: true, // 是否顯示菜單欄
            statusbar: true, // 是否顯示狀態(tài)欄
            branding: false, // 去除底部的 TinyMCE 廣告
            plugins: [
              'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview', 'anchor',
              'searchreplace', 'visualblocks', 'code', 'fullscreen', 'insertdatetime', 'media',
              'table', 'help', 'wordcount', 'emoticons', 'autosave', 'quickbars', 'codesample'
            ], // 啟用的插件列表
            toolbar: [
              'code formatselect fontselect fontsizeselect forecolor backcolor bold italic underline strikethrough link alignment outdent indent bullist numlist blockquote subscript superscript removeformat table image media importword charmap pagebreak formatpainter cut copy undo redo restoredraft searchreplace fullscreen'
            ], // 工具欄按鈕列表
            toolbar_sticky: true, // 工具欄固定在頂部
            content_css: '/path/to/content.css', // 自定義內(nèi)容樣式文件路徑
            content_style: `
              h2 { position: relative; z-index: 99; }
              h2::before {
                content: "";
                display: block;
                width: 200px;
                height: 8px;
                position: absolute;
                bottom: 6px;
                left: -4px;
                z-index: -1;
                border-radius: 4px 0 0 4px;
                background: linear-gradient(90deg, #F6AFB0 0%, #FFFFFF 100%);
              }
            `, // 自定義編輯器內(nèi)容的樣式
            images_upload_handler: (blobInfo, success, failure) => {
              const xhr = new XMLHttpRequest();
              xhr.withCredentials = false;
              xhr.open('POST', '/your-backend-endpoint'); // 圖片上傳的后端接口
              xhr.onload = () => {
                if (xhr.status === 200) {
                  success(xhr.responseText); // 上傳成功，返回圖片 URL
                } else {
                  failure('HTTP Error: ' + xhr.status); // 上傳失敗，返回錯(cuò)誤信息
                }
              };
              xhr.onerror = () => {
                failure('Image upload failed due to a network error.'); // 網(wǎng)絡(luò)錯(cuò)誤
              };
              xhr.send(blobInfo.blob()); // 發(fā)送圖片數(shù)據(jù)
            },
            setup: (editor) => {
              editor.on('change', () => {
                form.content = editor.getContent(); // 監(jiān)聽編輯器內(nèi)容變化并更新表單內(nèi)容
              });
            }
          });
        });
      }).catch(error => {
        console.error('Failed to load TinyMCE:', error); // 處理 TinyMCE 加載失敗的情況
      });
    });
 
    return {
      form
    };
  }
});
</script>
 
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>

npm run serve

autosave_interval: '5000',
autosave_prefix: 'tinymce-autosave-{path}{query}-{id}-',
autosave_restore_when_empty: true,
autosave_retention: '2m'

spellchecker_languages: 'English=en,Spanish=es,German=de,French=fr,Italian=it,Portuguese=pt,Brazilian Portuguese=pt_BR',
spellchecker_rpc_url: '/your-spellcheck-endpoint'

content_css: '/path/to/your/custom.css'