Vue2 实现内容拖拽或添加 HTML 到 Tinymce 富文本编辑器的高级功能详解

在 Web 开发中，Tinymce 被广泛应用作为富文本编辑器。除了基础的文本编辑功能，Tinymce 还提供了一系列高级功能，使得文本编辑更加灵活和便捷。本文将介绍如何在 Tinymce 中实现一些高级功能，并深入了解每个工具的使用。

Tinymce 简介

Tinymce 是一款基于 JavaScript 的富文本编辑器，支持丰富的插件和工具，可通过简单的集成和配置实现高度的定制化。它为开发者提供了一套丰富的 API，使得文本编辑变得更加轻松。其开放性和可扩展性使其成为众多开发者首选的富文本编辑解决方案之一。

效果展示

实现功能详解

1. 实现点击外部按钮，将内容添加到富文本内

通过 Vue2 和 Tinymce 6x 版本，我们可以通过精心配置和处理事件，实现点击外部按钮时，将指定内容添加到富文本编辑器内。这一功能旨在为用户提供更直观和高效的文本编辑体验。

代码示例：

// 在 Vue 组件中处理按钮点击事件，将内容插入富文本编辑器
appendContentInTinymce() {
  let html = `<span style="color:red;">我是点击后到富文本的内容。</span>`;
  this.editor.insertContent(html);
}

2. 实现拖动外部按钮，将内容添加到富文本内

借助拖拽功能，用户可以将指定内容从外部按钮拖动到富文本编辑器中。这种直观的操作方式提高了用户的操作效率。

代码示例：

// 在 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. 实现拖动外部按钮，将一个整体添加到富文本内

通过对整块内容的拖拽，我们不仅可以实现单个元素的拖动，还可以将一整块内容作为一个整体拖动到富文本中。这为用户提供了更灵活的编辑方式。

代码示例：

// 在 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">点击我不会触发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 可以根据内容自动调整编辑器的高度
         * code 显示TinyMCE编辑区的原始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 视频和音频元素添加到可编辑区域的能力
         * nonbreaking 插入不间断空格实体
         * pagebreak 使用户能够在可编辑区域插入分页符
         * preview 预览
         * save 保存
         * searchreplace 搜索和替换插件
         * template 模板插件.即将到来的 TinyMCE 7.0 版本中完全删除。作为替代解决方案，我们建议使用 Advanced Template Premium 插件
         * visualblocks 该插件允许用户在可编辑区域中查看块级元素
         * wordcount 字数统计
         */
        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 创建或移除无序列表
         * numlist 创建或移除有序列表
         * backcolor 将背景色应用于选区
         * blocks 标题列表
         * copy 复制到剪切板
         * copy 将当前所选内容剪切到剪贴板中
         * fontfamily 字体系列的下拉列表
         * fontsize 字体大小的下拉列表
         * fontsizeinput 输入字段提供增大和减小字体大小按钮
         * forecolor 修改文本颜色
         * h1-h6 文本标题
         * hr 插入水平线
         * newdocument 创建一个新文档
         * pastetext 打开/关闭纯文本粘贴模式
         * print 打印当前编辑器内容
         * remove 移除（删除）所选内容或光标位置之前的内容
         * removeformat 从当前选定内容中删除格式
         * selectall 选择编辑器中的所有内容
         * strikethrough 将删除线格式应用于当前选区
         * 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", // 小写字母，小写罗马数字，大写字母，大写罗马数字
        auto_focus: true, // 让编辑器加载完成后自动获得光标焦点
        cache_suffix: Math.random().toString(36).substring(7), // 可在TinyMCE加载js和css文件时，在URL请求后面自动加上指定的后缀，多用于解决缓存问题。
        // content_security_policy: "default-src 'self'",//内容安全策略.仅允许当前域名，不包括子域名
        // external_plugins: {
        //   // 引入站外插件.可用于引入本站外部提供的插件，TinyMCE将根据插件加载规则加载指定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", // 可指定某些元素成为编辑器的一部分，当焦点移动到此选择器匹配的元素上时，不会触发编辑器的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");
        },
        // 初始化前执行
        setup: (editor) => {
          this.editor = editor;

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

          editor.on("blur", () => {
            console.log("触发了 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);
          });
        },
        // 初始化结束后执行
        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 提供了丰富的插件和工具，使得富文本编辑更加灵活。通过探索这些高级功能，我们可以根据项目需求实现定制化的文本编辑器，提升用户体验。

通过本文的介绍，相信你对 Tinymce 的高级功能有了更深入的了解。在实际项目中，结合具体需求，灵活运用这些功能，将为你的文本编辑带来更多可能性。