vue3项目中使用tinyMCE，完成汉化，并忽略api-key提示（tinymceScriptSrc）

在使用 tinyMCE 之前，首先要知道几点：

1. 2024年以后，云托管的 tinyMCE 都需要使用一个api-key的东西，不添加api-key会报错，且编辑器会变成只读状态。官网是这样说的点击跳转
2. 即使我们根据指示，注册账号，拿到api-key，还是会有1000加载的限制，用户稍微多点就不够用了。
3. 什么叫云托管，简单说就是，你使用 npm install 下载下来的都叫云托管
4. 怎么避免使用api-key的限制？答案是：使用官网提供的一个prop: tinymceScriptSrc

1. npm install 下载 官网下载地址

npm install "@tinymce/tinymce-vue"

2025年6月，我下载的最新版本是："@tinymce/tinymce-vue": "^6.2.0",

新建一个文件夹，直接复制进去，就会有一个最基础的tinyMCE了

<template>
  <div>
    <Editor v-model="content" ref="editorRef" />
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import Editor from '@tinymce/tinymce-vue';
const content = ref('');
</script>

<style lang="scss" scoped></style>

2. 设置 tinymceScriptSrc 的链接

有兴趣的可以看看这个，官网详细解释了为什么要使用api-key，为什么会有1000限制，以及怎么处理 点击跳转

我们随便点一个，我这里点击的第二个，获得了两个链接 把 https://cdn.jsdelivr.net/npm/tinymce@7.9.1/tinymce.min.js 这个链接设置到 tinymceScriptSrc 就行了

<script src="https://cdn.jsdelivr.net/npm/tinymce@7.9.1/tinymce.min.js"></script>

<link href="https://cdn.jsdelivr.net/npm/tinymce@7.9.1/skins/ui/oxide/content.min.css" rel="stylesheet">

<template>
  <div>
    <Editor v-model="content" ref="editorRef" tinymceScriptSrc="https://cdn.jsdelivr.net/npm/tinymce@7.9.1/tinymce.min.js" />
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import Editor from '@tinymce/tinymce-vue';
const content = ref('');
</script>

<style lang="scss" scoped></style>

3. 去掉不需要的logo和按钮

<template>
  <div>
    <Editor v-model="content" ref="editorRef" :init="TinyMCEInitConfig" tinymceScriptSrc="https://cdn.jsdelivr.net/npm/tinymce@7.9.1/tinymce.min.js" />
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import Editor from '@tinymce/tinymce-vue';
const content = ref('');

const TinyMCEInitConfig = computed(() => {
  return {
    // 去除tinyMCE的logo
    branding: false,
    // 去除右上角的按钮
    promotion: false,
    toolbar_mode: 'wrap',
    height: 500,
    // 一些插件
    plugins: 'anchor autolink charmap codesample emoticons image link lists media searchreplace table visualblocks wordcount',
  };
});
</script>

<style lang="scss" scoped></style>

4. 汉化

官方网站关于汉化的文档：点击跳转，这个链接是你拓展学习的，下面的链接才是汉化包

因为我们使用的是 tinymceScriptSrc 属性，重新指定了资源加载的路径，汉化包我们是要自己下载到本地然后再使用 language_url 引入进来的，跟着我的步骤一步一来

去官网把zh_CN的中文汉化包下载下来，中文包在最下面：官网中文汉化包下载地址

下载来下，解压缩，得到汉化文件

把汉化文件放到public文件夹里去，乱放可能会导致404找不到，比如放到src里，可能会出现404的情况

最后加上语言，和语言包路径的配置，就完成汉化了

<template>
  <div>
    <Editor v-model="content" ref="editorRef" :init="TinyMCEInitConfig" tinymceScriptSrc="https://cdn.jsdelivr.net/npm/tinymce@7.9.1/tinymce.min.js" />
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import Editor from '@tinymce/tinymce-vue';
const content = ref('');

const TinyMCEInitConfig = computed(() => {
  return {
    // 去除tinyMCE的logo
    branding: false,
    // 去除右上角的按钮
    promotion: false,
    // 设置中文语言
    language: 'zh_CN',
    // 设置中文语言包路径
    language_url: '/public/lang/zh_CN.js',
    toolbar_mode: 'wrap',
    height: 500,
    // 一些插件
    plugins: 'anchor autolink charmap codesample emoticons image link lists media searchreplace table visualblocks wordcount',
  };
});
</script>

<style lang="scss" scoped></style>

最终效果，这样就完成了最基础的tinyMCE效果

5. 关于其他性化配置

比如 menubar 、 toolbar 啊之类的配置项，这个要自己去官网看一下配置，你需要什么就配置什么：官网配置项地址

6. 其他问题

1. 你会发现没有上传本地图片入口，但是本地的图片可以直接复制进来，会以base64的形式保存