企业级 TinyMCE Vue 编辑器解决方案 - 配置优化与性能提升指南、自定义插件 - 高质量源码分享平台-免费下载各类网站源码与模板及前沿技术分享

简介

TinyMCE Vue 是官方提供的 TinyMCE 富文本编辑器的 Vue 组件封装，支持 Vue 2 和 Vue 3。它让你可以在 Vue 项目中快速集成强大的富文本编辑能力，支持多种插件、主题和自定义扩展，适用于博客、内容管理、后台系统等多种场景。

主要特性：

📦 简单集成，支持 v-model 双向绑定
🧩 丰富的编辑器插件与工具栏自定义
🌏 多语言支持，轻松切换中文等本地化
🎨 支持自定义皮肤和内容样式
🔌 支持图片上传、表格、代码块、媒体等高级功能
⚡ 性能优秀，适配移动端和桌面端

安装依赖

# 安装 tinymce-vue
npm install @tinymce/tinymce-vue

# 或者使用 yarn
yarn add @tinymce/tinymce-vue

基本使用示例

创建基础编辑器组件

<template>
  <div class="editor-container">
    <h2>基础编辑器</h2>
    <Editor v-model="content" :init="initConfig" @onInit="onEditorInit" />
  </div>
</template>

<script setup>
import { ref } from "vue";
import Editor from "@tinymce/tinymce-vue";

const content = ref("<p>这是初始内容</p>");

const initConfig = {
  height: 300,
  menubar: false,
  plugins: [
    "advlist",
    "autolink",
    "lists",
    "link",
    "image",
    "charmap",
    "preview",
    "anchor",
    "searchreplace",
    "visualblocks",
    "code",
    "fullscreen",
    "insertdatetime",
    "media",
    "table",
    "code",
    "help",
    "wordcount",
  ],
  toolbar:
    "undo redo | blocks | " +
    "bold italic forecolor | alignleft aligncenter " +
    "alignright alignjustify | bullist numlist outdent indent | " +
    "removeformat | help",
  content_style:
    "body { font-family:Helvetica,Arial,sans-serif; font-size:14px }",
};

const onEditorInit = (editor) => {
  console.log("编辑器初始化完成", editor);
};
</script>

<style scoped>
.editor-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}
</style>

注意：上面代码无法编辑，需要注册申请 apikey，具体参考官网

<template>
  <Editor api-key="your-api-key" />
</template>

高级功能示例

<template>
  <div class="advanced-editor">
    <h2>高级编辑器</h2>
    <Editor
      v-model="advancedContent"
      :init="advancedConfig"
      @onChange="onContentChange"
    />
  </div>
</template>

<script setup>
import { ref } from "vue";
import Editor from "@tinymce/tinymce-vue";

const advancedContent = ref("");

const advancedConfig = {
  height: 400,
  menubar: true,
  plugins: [
    "advlist",
    "autolink",
    "lists",
    "link",
    "image",
    "charmap",
    "preview",
    "anchor",
    "searchreplace",
    "visualblocks",
    "code",
    "fullscreen",
    "insertdatetime",
    "media",
    "table",
    "paste",
    "help",
    "wordcount",
    "emoticons",
    "codesample",
  ],
  toolbar: [
    "undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify",
    "bullist numlist outdent indent | removeformat | help | image media table | emoticons codesample",
  ],
  content_style: `
    body { 
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; 
      font-size: 14px; 
      line-height: 1.6;
    }
    .mce-content-body { max-width: 100%; }
  `,
  // 自定义样式
  style_formats: [
    { title: "标题 1", format: "h1" },
    { title: "标题 2", format: "h2" },
    { title: "标题 3", format: "h3" },
    { title: "代码", inline: "code" },
    { title: "引用", block: "blockquote" },
  ],
  // 图片上传配置
  images_upload_url: "/api/upload",
  images_upload_handler: (blobInfo, progress) => {
    return new Promise((resolve, reject) => {
      // 模拟上传
      setTimeout(() => {
        resolve("https://via.placeholder.com/300x200");
      }, 1000);
    });
  },
};

const onContentChange = (event) => {
  console.log("内容变化:", event.target.getContent());
};
</script>

常用配置选项

基础配置

const basicConfig = {
  // 编辑器高度
  height: 300,

  // 是否显示菜单栏
  menubar: false,

  // 启用的插件
  plugins: [
    "advlist",
    "autolink",
    "lists",
    "link",
    "image",
    "charmap",
    "preview",
    "anchor",
    "searchreplace",
    "visualblocks",
    "code",
    "fullscreen",
    "insertdatetime",
    "media",
    "table",
    "code",
    "help",
    "wordcount",
  ],

  // 工具栏配置
  toolbar:
    "undo redo | formatselect | bold italic | " +
    "alignleft aligncenter alignright alignjustify | " +
    "bullist numlist outdent indent | removeformat | help",

  // 内容样式
  content_style: "body { font-family: Arial, sans-serif; font-size: 14px; }",

  // 语言设置
  language: "zh_CN",

  // 主题
  skin: "oxide",

  // 占位符文本
  placeholder: "请输入内容...",
};

高级配置

const advancedConfig = {
  // 自定义样式格式
  style_formats: [
    { title: "标题 1", format: "h1" },
    { title: "标题 2", format: "h2" },
    { title: "代码", inline: "code" },
    { title: "引用", block: "blockquote" },
  ],

  // 自定义按钮
  setup: (editor) => {
    editor.ui.registry.addButton("custombutton", {
      text: "自定义按钮",
      onAction: () => {
        editor.insertContent("<p>这是自定义按钮插入的内容</p>");
      },
    });
  },

  // 图片上传
  images_upload_handler: (blobInfo, progress) => {
    return new Promise((resolve, reject) => {
      const formData = new FormData();
      formData.append("file", blobInfo.blob(), blobInfo.filename());

      fetch("/api/upload", {
        method: "POST",
        body: formData,
      })
        .then((response) => response.json())
        .then((result) => resolve(result.url))
        .catch((error) => reject(error));
    });
  },

  // 内容验证
  setup: (editor) => {
    editor.on("change", () => {
      const content = editor.getContent();
      if (content.length > 1000) {
        editor.notificationManager.warn("内容过长，请精简");
      }
    });
  },
};

事件处理

// 编辑器事件
const editorEvents = {
  onInit: (editor) => {
    console.log("编辑器初始化完成");
  },

  onChange: (event) => {
    console.log("内容变化:", event.target.getContent());
  },

  onBlur: (event) => {
    console.log("编辑器失去焦点");
  },

  onFocus: (event) => {
    console.log("编辑器获得焦点");
  },

  onKeyUp: (event) => {
    console.log("按键释放:", event.keyCode);
  },
};

自定义插件

插入当前时间插件

// 注册插入时间插件
tinymce.PluginManager.add("inserttime", function (editor) {
  editor.ui.registry.addButton("inserttime", {
    text: "插入时间",
    tooltip: "插入当前时间",
    onAction: function () {
      const now = new Date();
      const timeString = now.toLocaleString("zh-CN");
      editor.insertContent(`<span class="timestamp">${timeString}</span>`);
    },
  });

  // 添加到工具栏
  editor.ui.registry.addMenuItem("inserttime", {
    text: "插入时间",
    onAction: function () {
      const now = new Date();
      const timeString = now.toLocaleString("zh-CN");
      editor.insertContent(`<span class="timestamp">${timeString}</span>`);
    },
  });
});

// 使用配置
const config = {
  plugins: "inserttime",
  toolbar: "inserttime",
  content_style: `
    .timestamp {
      background-color: #f0f0f0;
      padding: 2px 6px;
      border-radius: 3px;
      font-size: 12px;
      color: #666;
    }
  `,
};

代码高亮插件

// 代码高亮插件
tinymce.PluginManager.add("codehighlight", function (editor) {
  // 添加代码高亮按钮
  editor.ui.registry.addButton("codehighlight", {
    text: "代码高亮",
    tooltip: "插入代码块",
    onAction: function () {
      editor.windowManager.open({
        title: "插入代码",
        body: {
          type: "panel",
          items: [
            {
              type: "input",
              name: "code",
              label: "代码内容",
              placeholder: "请输入代码...",
            },
            {
              type: "selectbox",
              name: "language",
              label: "编程语言",
              items: [
                { value: "javascript", text: "JavaScript" },
                { value: "html", text: "HTML" },
                { value: "css", text: "CSS" },
                { value: "python", text: "Python" },
                { value: "java", text: "Java" },
              ],
            },
          ],
        },
        buttons: [
          {
            type: "submit",
            text: "插入",
          },
          {
            type: "cancel",
            text: "取消",
          },
        ],
        onSubmit: function (api) {
          const data = api.getData();
          const code = data.code;
          const language = data.language;

          editor.insertContent(`
            <pre class="code-block" data-language="${language}">
              <code class="language-${language}">${editor.dom.encode(
            code
          )}</code>
            </pre>
          `);
          api.close();
        },
      });
    },
  });

  // 添加到菜单
  editor.ui.registry.addMenuItem("codehighlight", {
    text: "代码高亮",
    onAction: function () {
      // 同上的对话框逻辑
    },
  });
});

// 使用配置
const config = {
  plugins: "codehighlight",
  toolbar: "codehighlight",
  content_style: `
    .code-block {
      background-color: #f5f5f5;
      border: 1px solid #ddd;
      border-radius: 4px;
      padding: 10px;
      margin: 10px 0;
      font-family: 'Courier New', monospace;
      font-size: 13px;
      line-height: 1.4;
      overflow-x: auto;
    }
    .code-block code {
      background: none;
      padding: 0;
    }
  `,
};

注意事项

API Key: 生产环境需要申请 TinyMCE API Key
CDN: 建议使用 CDN 加速加载
国际化: 需要下载对应的语言包
主题: 可以自定义主题样式
插件: 按需加载插件以提高性能

资源下载

下载价格免费

注意：本网站资源属于虚拟产品，不支持退款。请谨慎购买！购买后资源无法下载，请联系客服QQ：844475003，微信号：th844475003。

原文链接：https://code.ifrontend.net/archives/958，转载请注明出处。

企业级 TinyMCE Vue 编辑器解决方案 – 配置优化与性能提升指南、自定义插件

简介

安装依赖

基本使用示例

创建基础编辑器组件

高级功能示例

常用配置选项

基础配置

高级配置

事件处理

自定义插件

插入当前时间插件

代码高亮插件

注意事项

评论0

在线客服

升级VIP

全屏浏览

夜间模式

返回顶部

企业级 TinyMCE Vue 编辑器解决方案 – 配置优化与性能提升指南、自定义插件

简介

安装依赖

基本使用示例

创建基础编辑器组件

高级功能示例

常用配置选项

基础配置

高级配置

事件处理

自定义插件

插入当前时间插件

代码高亮插件

注意事项

猜你喜欢

深入解析 Vue 3.5 Watch 新特性：从基础到高级应用

Vue 3.5 重磅新特性：useTemplateRef 让模板引用更优雅、更高效！

vue-virtual-scroller 虚拟滚动库 – 轻松处理10万+数据，性能提升90%

CSS3 scroll-snap-type 性能优化秘籍：让滚动速度提升10倍

Vite7性能优化实战：让你的构建速度飞起来

Jotai：React轻量级原子化状态管理，告别重渲染困扰

评论0

在线客服

升级VIP

全屏浏览

夜间模式

返回顶部