Vue集成TinyMCE富文本編輯器的流程步驟

更新時間：2024年11月28日 08:52:36 作者：尋找09之夏

TinyMCE 是一款功能強大的富文本編輯器,廣泛應用于各種 Web 應用中,本文將詳細介紹如何在 Vue 項目中集成 TinyMCE,通過詳盡的步驟說明、示例代碼展示以及豐富的配置選項,助力開發(fā)者輕松實現(xiàn)內容編輯的增強與美化,需要的朋友可以參考下

前提條件

安裝了 Node.js 和 npm。
使用 Vue CLI 創(chuàng)建的 Vue 項目。
熟悉基本的 Vue 開發(fā)。

1. 創(chuàng)建 Vue 項目

如果你還沒有創(chuàng)建 Vue 項目，可以使用 Vue CLI 來快速搭建一個新的項目：

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

選擇默認配置或根據需要自定義配置（本案例選擇地是 Vue3）。

2.引入 TinyMCE

將下載地 tinymce 包放在 public 目錄下，配置 public/index.html 引入 tinymce.min.js 。

3. 配置 TinyMCE

首先，在你的 Vue 組件中引入并配置 TinyMCE。

<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: "我是初始化內容",
    });
 
    // 動態(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);
      });
    };
 
    // 頁面加載時
    onMounted(() => {
      loadTinyMCE().then(() => {
        // 富文本編輯器
        nextTick(() => {
          window.tinymce.init({
            selector: '#editor', // 選擇器，指定哪個元素使用 TinyMCE
            license_key: 'gpl', // 許可密鑰，如果是 GPL 版本則不需要設置
            language: 'zh_CN', // 語言設置
            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', // 自定義內容樣式文件路徑
            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%);
              }
            `, // 自定義編輯器內容的樣式
            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); // 上傳失敗，返回錯誤信息
                }
              };
              xhr.onerror = () => {
                failure('Image upload failed due to a network error.'); // 網絡錯誤
              };
              xhr.send(blobInfo.blob()); // 發(fā)送圖片數據
            },
            setup: (editor) => {
              editor.on('change', () => {
                form.content = editor.getContent(); // 監(jiān)聽編輯器內容變化并更新表單內容
              });
            }
          });
        });
      }).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>

4. 運行項目

確保一切配置正確后，運行你的 Vue 項目：

npm run serve

打開瀏覽器訪問 http://localhost:8080，你應該能看到一個帶有 TinyMCE 編輯器的頁面。

5. 高級配置與功能

5.1 自動保存

自動保存用戶的編輯內容：

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

5.2 拼寫檢查

啟用拼寫檢查功能：

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