【Vue3知识】Vue3集成富文本编辑器TinyMCE

集成

在 Vue 3 中集成 TinyMCE 富文本编辑器，可以通过官方提供的 @tinymce/tinymce-vue 组件库实现。以下是详细步骤和完整示例：

一、安装依赖

1. 安装 TinyMCE Vue 组件：

   npm install @tinymce/tinymce-vue@^4.0.0 tinymce@^6.0.0
   

2. (可选) 下载本地皮肤文件（若需离线使用）：
   • 从 TinyMCE 官网 下载皮肤包（skins 文件夹）。
   • 将 skins 文件夹复制到项目的 public 目录下。

二、基础集成示例

1. 组件封装：RichEditor.vue

<template>
  <div class="rich-editor">
    <!-- TinyMCE 编辑器组件 -->
    <Editor
      v-model="content"
      :init="initOptions"
      api-key="your-api-key" <!-- 替换为你的 API Key -->
    />
  </div>
</template>

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

// 编辑器内容绑定
const content = ref('<p>初始内容</p>');

// TinyMCE 配置项
const initOptions = ref({
  height: 500,
  menubar: true,
  plugins: [
    'advlist autolink lists link image charmap print preview anchor',
    'searchreplace visualblocks code fullscreen',
    'insertdatetime media table paste code help wordcount'
  ],
  toolbar:
    'undo redo | formatselect | bold italic backcolor | \
    alignleft aligncenter alignright alignjustify | \
    bullist numlist outdent indent | removeformat | help',
  // 本地皮肤配置（需提前放置 skins 文件）
  skin: 'oxide', // 或自定义皮肤名称
  content_css: 'default', // 或自定义 CSS 路径
  // 图片上传配置
  images_upload_handler: async (blobInfo) => {
    const formData = new FormData();
    formData.append('file', blobInfo.blob(), blobInfo.filename());
    // 调用后端接口上传图片
    const response = await fetch('/api/upload', { method: 'POST', body: formData });
    const data = await response.json();
    return data.url; // 返回图片 URL
  }
});
</script>

三、关键配置说明

1. API Key 配置

• 注册 TinyMCE 账号 获取免费 API Key（用于解除试用警告）。
• 若不使用云端服务，需本地化部署，跳过 api-key 并配置 initOptions.skin_url：

initOptions.value.skin_url = '/skins/ui/oxide'; // 路径对应 public/skins

2. 图片上传处理

通过 images_upload_handler 实现图片上传逻辑：

images_upload_handler: async (blobInfo) => {
  const formData = new FormData();
  formData.append('image', blobInfo.blob(), blobInfo.filename());
  try {
    const res = await axios.post('/api/upload', formData);
    return res.data.url;
  } catch (error) {
    console.error('上传失败:', error);
    return '';
  }
}

3. 多语言支持

配置中文语言包：

import 'tinymce-i18n/langs/zh_CN';

initOptions.value.language = 'zh_CN';

四、完整本地化部署步骤（无 API Key）

1. 下载 TinyMCE 完整包：
   • 访问 TinyMCE 下载页面 下载 Self-hosted 版本。
   • 解压后得到 tinymce/js/tinymce 目录。

2. 复制文件到项目：
   • 将 tinymce/js/tinymce 目录复制到项目的 public 文件夹下。

3. 配置路径：

   initOptions.value = {
     // ...
     skin_url: '/tinymce/js/tinymce/skins/ui/oxide', // 皮肤路径
     content_css: '/tinymce/js/tinymce/skins/content/default/content.css'
   };
   

五、在父组件中使用

<template>
  <div>
    <RichEditor v-model="htmlContent" />
    <button @click="getContent">获取内容</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import RichEditor from '@/components/RichEditor.vue';

const htmlContent = ref('');

const getContent = () => {
  console.log('当前内容:', htmlContent.value);
};
</script>

六、常见问题解决

1. 控制台警告 Failed to load 皮肤文件

• 原因：未正确配置皮肤路径。
• 解决：确保 skin_url 指向正确的本地路径或 CDN 地址。

2. 编辑器无法初始化

• 原因：未正确引入 TinyMCE 核心脚本。
• 解决：在 index.html 中手动引入（仅限 CDN 模式）：

<script src="https://cdn.tiny.cloud/1/your-api-key/tinymce/6/tinymce.min.js"></script>

3. 图片上传不生效

• 检查点：
• 确保 images_upload_handler 返回正确的 URL。
• 后端接口需支持 multipart/form-data 格式。

---

七、扩展功能示例

自定义插件

1. 创建插件文件 public/tinymce/custom-plugin.js：

   tinymce.PluginManager.add('customPlugin', (editor) => {
     editor.ui.registry.addButton('customButton', {
       text: '自定义按钮',
       onAction: () => alert('点击自定义按钮')
     });
   });
   

2. 配置插件：

   initOptions.value = {
     plugins: '... customPlugin',
     toolbar: '... | customButton'
   };
   

通过以上步骤，即可在 Vue 3 项目中快速集成功能丰富的 TinyMCE 编辑器，并支持高度定制化开发。

汉化

在 Vue 3 或任何前端框架中集成 TinyMCE 并进行汉化（中文化），需要以下步骤：

---

一、下载 TinyMCE 中文语言包

1. 官方语言包地址
   TinyMCE 的中文语言文件位于：
   https://www.tiny.cloud/get-tiny/language-packages/

2. 直接使用 CDN 链接（推荐）
   中文语言包可直接通过 CDN 引用：

   <!-- 将 `6.x.x` 替换为你实际使用的 TinyMCE 版本 -->
   <script src="https://cdn.tiny.cloud/1/your-api-key/tinymce/6.x.x/langs/zh_CN.js"></script>
   

---

二、配置 TinyMCE 使用中文

根据你的使用场景，选择以下配置方式：

1. 通过 CDN 直接引入

<textarea id="myEditor"></textarea>

<script>
  tinymce.init({
    selector: '#myEditor',
    language: 'zh_CN', // 指定中文
    language_url: 'https://cdn.tiny.cloud/1/your-api-key/tinymce/6.x.x/langs/zh_CN.js',
    plugins: 'advlist lists link image code', // 按需选择插件
    toolbar: 'undo redo | bold italic | alignleft aligncenter alignright | code'
  });
</script>

2. 通过 npm 安装（适用于 Vue/React 项目）

npm install tinymce @tinymce/tinymce-vue

在 Vue 3 中配置：

<template>
  <Editor
    api-key="your-api-key"
    :init="editorConfig"
    v-model="content"
  />
</template>

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

// 引入中文语言包（需确保路径正确）
import 'tinymce/langs/zh_CN';

const content = ref('');

const editorConfig = {
  language: 'zh_CN',
  plugins: 'advlist lists link image code',
  toolbar: 'undo redo | bold italic | alignleft aligncenter alignright | code',
  skin_url: '/path/to/skins/ui/oxide', // 可选：自定义皮肤路径
  content_css: '/path/to/content.css'  // 可选：自定义内容样式
};
</script>

三、完整示例（Vue 3）

1. 创建语言文件目录

在项目的 public 或 static 目录下创建文件夹：

public/tinymce/langs/zh_CN.js

2. 配置路径

// vue.config.js（确保路径映射）
module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        tinymce: '/public/tinymce'
      }
    }
  }
};

3. 组件代码

<template>
  <Editor
    api-key="your-api-key"
    :init="editorConfig"
    v-model="content"
  />
</template>

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

const content = ref('');

const editorConfig = {
  language: 'zh_CN',
  language_url: '/tinymce/langs/zh_CN.js', // 本地路径
  plugins: 'advlist lists link image code',
  toolbar: 'undo redo | bold italic | code',
  height: 500
};
</script>

四、注意事项

1. 路径问题
   • 如果语言包未生效，检查 language_url 路径是否正确。
   • 本地开发时，可将语言文件放在 public 目录下。

2. 版本兼容性
   确保语言包版本与 TinyMCE 主版本一致（如 TinyMCE 6.x 对应 zh_CN.js 6.x）。

3. 清除缓存
   修改语言配置后，强制刷新浏览器（Ctrl + F5）。

4. 完整汉化
   如果部分内容未翻译，检查语言包是否覆盖了所有插件词汇。

---

五、自定义翻译

如果需要手动修改翻译内容，可以编辑 zh_CN.js 文件：

// zh_CN.js
tinymce.addI18n('zh_CN', {
  'Redo': '重做',
  'Undo': '撤销',
  // 其他翻译项...
});

通过以上步骤，TinyMCE 将完全显示为中文界面。