在 Web 開發(fā)中，Tinymce 被廣泛應用作為富文本編輯器。除了基礎的文本編輯功能，Tinymce 還提供了一系列高級功能，使得文本編輯更加靈活和便捷。本文將介紹如何在 Tinymce 中實現(xiàn)一些高級功能，并深入了解每個工具的使用。

Tinymce 簡介

Tinymce 是一款基于 JavaScript 的富文本編輯器，支持豐富的插件和工具，可通過簡單的集成和配置實現(xiàn)高度的定制化。它為開發(fā)者提供了一套豐富的 API，使得文本編輯變得更加輕松。其開放性和可擴展性使其成為眾多開發(fā)者首選的富文本編輯解決方案之一。

效果展示

實現(xiàn)功能詳解

1. 實現(xiàn)點擊外部按鈕，將內容添加到富文本內

通過 Vue2 和 Tinymce 6x 版本，我們可以通過精心配置和處理事件，實現(xiàn)點擊外部按鈕時，將指定內容添加到富文本編輯器內。這一功能旨在為用戶提供更直觀和高效的文本編輯體驗。

代碼示例：

// 在 Vue 組件中處理按鈕點擊事件，將內容插入富文本編輯器
appendContentInTinymce() {
  let html = `<span style="color:red;">我是點擊后到富文本的內容。</span>`;
  this.editor.insertContent(html);
}

2. 實現(xiàn)拖動外部按鈕，將內容添加到富文本內

借助拖拽功能，用戶可以將指定內容從外部按鈕拖動到富文本編輯器中。這種直觀的操作方式提高了用戶的操作效率。

代碼示例：

// 在 Vue 組件中處理拖拽事件，將拖動的內容插入富文本編輯器
onDragStart(event) {
  let html = `
    <table style="border-collapse: collapse;width: 80%;margin-left: 20%;" border="1">
      <tbody>
        <tr>
          <td colspan="3" style="width: 100%;">
            <div style="color:blue;text-align:center;">我是被拖進來的</div>
          </td>
        </tr>
        <tr>
          <td style="width: 33.3333%;"></td>
          <td style="width: 33.3333%;"></td>
          <td style="width: 33.3333%;"></td>
        </tr>
        <tr>
          <td style="width: 33.3333%;"></td>
          <td style="width: 33.3333%;"></td>
          <td style="width: 33.3333%;"></td>
        </tr>
      </tbody>
    </table>
  `;
  event.dataTransfer.setData("text/html", html);
}

3. 實現(xiàn)拖動外部按鈕，將一個整體添加到富文本內

通過對整塊內容的拖拽，我們不僅可以實現(xiàn)單個元素的拖動，還可以將一整塊內容作為一個整體拖動到富文本中。這為用戶提供了更靈活的編輯方式。

代碼示例：

// 在 Vue 組件中處理拖拽事件，將整體內容插入富文本編輯器
onDragStartMceNonEditable(event) {
  let html = `<span style="color:green;" class="mceNonEditable">我是被拖進來的，我是一塊整體。</span>`;
  event.dataTransfer.setData("text/html", html);
}

版本介紹

使用vue2 版本和tinymce 6x 版本

"@tinymce/tinymce-vue": "^3",
"core-js": "^3.8.3",
"tinymce": "^6.8.2",
"vue": "^2.6.14"

tinymce 6x 和?tinymce 5x版本代碼寫法不同

具體代碼展示

<template>
  <div>
    <div class="buttons">
      <button @click="toggleEditorReadOnly">編輯器開關</button>
      <button class="my-custom-button">點擊我不會觸發(fā)blur事件</button>
      <button @click="appendContentInTinymce">你可以點擊我到富文本</button>
      <button draggable="true" @dragstart="(event) => onDragStart(event)">
        你可以拖動我到富文本
      </button>
      <button
        draggable="true"
        @dragstart="(event) => onDragStartMceNonEditable(event)"
      >
        你可以拖動我到富文本，我的內容是一塊整體
      </button>
    </div>
    <textarea ref="tinymce" :id="textareaId"></textarea>
  </div>
</template>

<script>
import tinymce from "tinymce/tinymce";
import "tinymce/themes/silver";

export default {
  props: {
    value: String,
    options: Object,
  },
  data() {
    return {
      textareaId: `tinymce-${Math.random().toString(36).substring(7)}`,
      editor: null,
    };
  },
  mounted() {
    this.initializeEditor();
  },
  watch: {
    value(newValue) {
      if (newValue !== this.editor.getContent()) {
        this.editor.setContent(newValue);
      }
    },
  },
  methods: {
    initializeEditor() {
      const defaultOptions = {
        /**
         * 插件
         * autoresize 可以根據(jù)內容自動調整編輯器的高度
         * code 顯示TinyMCE編輯區(qū)的原始html
         * lists,advlist 高級列表插件,擴展了默認的UL (bullist) 和OL (numlist)列表樣式.另外該插件也提供了自定義的選項advlist_bullet_styles, advlist_number_styles
         * codesample 代碼示例插件,擴展codesample_languages
         * directionality 將文本放到左邊或右邊ltr rtl
         * image 圖像插件
         * editimage 編輯圖像插件 要收費
         * emoticons 表情庫
         * export 導出pdf插件 要收費
         * formatpainter 格式刷 要收費
         * fullscreen 全屏插件
         * help 幫助
         * insertdatetime 插入日期
         * link 鏈接
         * media 該插件為用戶提供了將 HTML5 視頻和音頻元素添加到可編輯區(qū)域的能力
         * nonbreaking 插入不間斷空格實體
         * pagebreak 使用戶能夠在可編輯區(qū)域插入分頁符
         * preview 預覽
         * save 保存
         * searchreplace 搜索和替換插件
         * template 模板插件.即將到來的 TinyMCE 7.0 版本中完全刪除。作為替代解決方案，我們建議使用 Advanced Template Premium 插件
         * visualblocks 該插件允許用戶在可編輯區(qū)域中查看塊級元素
         * wordcount 字數(shù)統(tǒng)計
         */
        plugins:
          "autoresize code codesample  lists advlist accordion table fullscreen anchor directionality emoticons help image insertdatetime media nonbreaking pagebreak preview save searchreplace visualblocks wordcount",
        autoresize_overflow_padding: 0,

        /**
         * 工具欄
         * undo 撤銷
         * redo 重做
         * bold 加粗
         * italic 斜體
         * alignleft aligncenter alignright alignjustify 文本對齊
         * outdent 減小當前段落或列表項的縮進級別
         * indent 增加當前段落或列表項的縮進級別
         * lineheight 行高的下拉列表
         * code 顯示TinyMCE的html
         * bullist 創(chuàng)建或移除無序列表
         * numlist 創(chuàng)建或移除有序列表
         * backcolor 將背景色應用于選區(qū)
         * blocks 標題列表
         * copy 復制到剪切板
         * copy 將當前所選內容剪切到剪貼板中
         * fontfamily 字體系列的下拉列表
         * fontsize 字體大小的下拉列表
         * fontsizeinput 輸入字段提供增大和減小字體大小按鈕
         * forecolor 修改文本顏色
         * h1-h6 文本標題
         * hr 插入水平線
         * newdocument 創(chuàng)建一個新文檔
         * pastetext 打開/關閉純文本粘貼模式
         * print 打印當前編輯器內容
         * remove 移除（刪除）所選內容或光標位置之前的內容
         * removeformat 從當前選定內容中刪除格式
         * selectall 選擇編輯器中的所有內容
         * strikethrough 將刪除線格式應用于當前選區(qū)
         * styles 所選內容的樣式的下拉列表
         * subscript 將下標格式應用于當前選定內容
         * superscript 將上標格式應用于當前選定內容
         * underline 將下劃線格式應用于當前選定內容
         * undo 撤消上一個操作
         * visualaid 切換不可見元素的視覺輔助工具
         */
        toolbar:
          "undo redo | bold italic | alignleft aligncenter alignright alignjustify | outdent indent lineheight accordion| bullist numlist backcolor forecolor blocks fontfamily styles fontsize fontsizeinput h1 h2 h3 h4 h5 h6 | copy cut newdocument pastetext print remove  selectall code codesample  | hr strikethrough subscript superscript underline removeformat visualaid | table tableinsertdialog tablecellprops tableprops  fullscreen anchor ltr rtl emoticons help image media insertdatetime link nonbreaking pagebreak preview save searchreplace visualblocks wordcount",
        autoresize_bottom_margin: 16, // 自動調整高度的底部邊距
        height: 500, // 編輯器高度
        min_height: 500, // 最小編輯器高度
        placeholder: "請輸入...", // 占位符
        // advlist_bullet_styles: "square", // 無序列表是否使用方形
        advlist_number_styles:
          "lower-alpha,lower-roman,upper-alpha,upper-roman", // 小寫字母，小寫羅馬數(shù)字，大寫字母，大寫羅馬數(shù)字
        auto_focus: true, // 讓編輯器加載完成后自動獲得光標焦點
        cache_suffix: Math.random().toString(36).substring(7), // 可在TinyMCE加載js和css文件時，在URL請求后面自動加上指定的后綴，多用于解決緩存問題。
        // content_security_policy: "default-src 'self'",//內容安全策略.僅允許當前域名，不包括子域名
        // external_plugins: {
        //   // 引入站外插件.可用于引入本站外部提供的插件，TinyMCE將根據(jù)插件加載規(guī)則加載指定URL的插件。當從CDN加載TinyMCE或希望TinyMCE主目錄與自定義插件分開時，可使用此配置。
        //   testing: "http://www.testing.com/plugin.min.js",
        //   maths: "http://www.maths.com/plugin.min.js",
        // },
        readonly: false, // 是否只讀模式
        // suffix: '.min', // 后綴。如果主程序叫tinymce.js，它在加載插件時就會去找插件文件夾里的plugin.js；如果主程序叫tinymce.min.js，它在加載插件時就會去找plugin.min.js。
        // target: el, // 使用Node替代selector
        custom_ui_selector: ".my-custom-button", // 可指定某些元素成為編輯器的一部分，當焦點移動到此選擇器匹配的元素上時，不會觸發(fā)編輯器的blur事件
        highlight_on_focus: true, // 獲得輸入焦點時，編輯器添加藍色輪廓
        toolbar_mode: "wrap", // 不會被折疊隱藏
        codesample_languages: [
          { text: "HTML/XML", value: "markup" },
          { text: "JavaScript", value: "javascript" },
          { text: "CSS", value: "css" },
          { text: "PHP", value: "php" },
          { text: "Ruby", value: "ruby" },
          { text: "Python", value: "python" },
          { text: "Java", value: "java" },
          { text: "C", value: "c" },
          { text: "C#", value: "csharp" },
          { text: "C++", value: "cpp" },
        ],
        extended_valid_elements:
          "script[src],span[class|style|title],table[class|style]", // 給元素添加有效屬性
        save_onsavecallback: () => {
          console.log("Saved");
        },
        // 初始化前執(zhí)行
        setup: (editor) => {
          this.editor = editor;

          editor.on("change", () => {
            this.$emit("input", editor.getContent());
          });

          editor.on("blur", () => {
            console.log("觸發(fā)了 blur");
          });

          editor.on("dragover", function (event) {
            console.log("dragover");
            event.preventDefault();
          });

          editor.on("drop", function (event) {
            console.log("drop");
            event.preventDefault();
            var htmlContent = event.dataTransfer.getData("text/html");
            editor.insertContent(htmlContent);
          });
        },
        // 初始化結束后執(zhí)行
        init_instance_callback: function (editor) {
          console.log("ID為: " + editor.id + " 的編輯器已初始化完成.");
        },
      };

      tinymce.init({
        ...defaultOptions,
        ...this.options,
        selector: `#${this.textareaId}`,
      });
    },
    toggleEditorReadOnly() {
      const editor = tinymce.get(this.textareaId); // 替換為你的編輯器 ID
      const status = editor.mode.get();

      if (status === "design") {
        editor.mode.set("readonly"); // 設為設計模式，允許編輯
      } else {
        editor.mode.set("design"); // 設為只讀模式
      }
    },
    appendContentInTinymce() {
      let html = `<span style="color:red;">我是點擊后到富文本的。</span>`;
      this.editor.insertContent(html);
    },
    onDragStart(event) {
      let html = `
      <table style="border-collapse: collapse;width: 80%;margin-left: 20%;" border="1">
        <tbody>
          <tr>
            <td colspan="3" style="width: 100%;">
              <div style="color:blue;text-align:center;">我是被拖進來的</div>
            </td>
          </tr>
          <tr>
            <td style="width: 33.3333%;"></td>
            <td style="width: 33.3333%;"></td>
            <td style="width: 33.3333%;"></td>
          </tr>
          <tr>
            <td style="width: 33.3333%;"></td>
            <td style="width: 33.3333%;"></td>
            <td style="width: 33.3333%;"></td>
          </tr>
        </tbody>
      </table>
    `;
      event.dataTransfer.setData("text/html", html);
    },
    onDragStartMceNonEditable(event) {
      let html = `<span style="color:green;" class="mceNonEditable">我是被拖進來的，我是一塊整體。</span>`;
      event.dataTransfer.setData("text/html", html);
    },
  },
  beforeDestroy() {
    if (this.editor) {
      this.editor.destroy();
    }
  },
};
</script>
<style scoped>
.buttons {
  padding-bottom: 30px;
}
button {
  margin-left: 15px;
  cursor: pointer;
}
</style>

總結

Tinymce 提供了豐富的插件和工具，使得富文本編輯更加靈活。通過探索這些高級功能，我們可以根據(jù)項目需求實現(xiàn)定制化的文本編輯器，提升用戶體驗。

通過本文的介紹，相信你對 Tinymce 的高級功能有了更深入的了解。在實際項目中，結合具體需求，靈活運用這些功能，將為你的文本編輯帶來更多可能性。

?文章來源地址http://www.zghlxwxcb.cn/news/detail-778973.html

到了這里，關于Vue2 實現(xiàn)內容拖拽或添加 HTML 到 Tinymce 富文本編輯器的高級功能詳解的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！