无外网服务器中，能否不依赖无API密钥CDN使用Tinymce-vue？

针对你遇到的因依赖外网CDN导致内部Web应用无法运行的问题，核心解决思路是将TinyMCE的所有资源切换为本地加载，具体步骤如下：

1. 确保本地安装TinyMCE包 #

如果你尚未通过npm安装TinyMCE 5，执行以下命令（已安装可跳过）：

npm install tinymce@5 --save

2. 拷贝TinyMCE静态资源到项目静态目录 #

将node_modules/tinymce下的核心静态资源复制到Vue项目的public/static/tinymce目录（需手动创建tinymce子目录），需要拷贝的内容包括：

• skins：编辑器皮肤文件
• plugins：你需要用到的编辑器插件（可按需拷贝，比如advlist、link、image等）
• langs：语言包（如果需要中文界面，确保包含zh_CN.js）

可选：用npm脚本自动拷贝 #

为避免手动拷贝的麻烦，可在项目package.json的scripts中添加自动拷贝命令：

{
  "scripts": {
    "copy-tinymce": "cp -r node_modules/tinymce/skins public/static/tinymce/ && cp -r node_modules/tinymce/plugins public/static/tinymce/ && cp -r node_modules/tinymce/langs public/static/tinymce/"
  }
}

Windows环境替换为xcopy命令：

{
  "scripts": {
    "copy-tinymce": "xcopy node_modules\\tinymce\\skins public\\static\\tinymce\\skins /E /I && xcopy node_modules\\tinymce\\plugins public\\static\\tinymce\\plugins /E /I && xcopy node_modules\\tinymce\\langs public\\static\\tinymce\\langs /E /I"
  }
}

执行npm run copy-tinymce即可完成自动拷贝。

3. 配置Vue组件使用本地TinyMCE资源 #

有两种配置方式可选，根据你的习惯选择：

方式一：通过tinymceScriptSrc指定本地脚本 #

直接在Editor组件上指定本地TinyMCE核心脚本路径，无需手动导入主题和插件：

<template>
  <Editor
    v-model="editorContent"
    :tinymceScriptSrc="'/static/tinymce/tinymce.min.js'"
    :init="editorConfig"
  />
</template>

<script>
import Editor from '@tinymce/tinymce-vue'

export default {
  components: { Editor },
  data() {
    return {
      editorContent: '',
      editorConfig: {
        language: 'zh_CN',
        language_url: '/static/tinymce/langs/zh_CN.js', // 明确指定语言包路径
        skin: 'oxide',
        plugins: 'advlist link image code lists table', // 对应你拷贝的插件
        toolbar: 'undo redo | formatselect | bold italic | alignleft aligncenter alignright | bullist numlist outdent indent | link image | code',
        height: 500
      }
    }
  }
}
</script>

方式二：手动导入TinyMCE核心及插件 #

通过代码导入TinyMCE核心、主题和插件，适合需要更精细控制的场景：

<template>
  <Editor
    v-model="editorContent"
    :init="editorConfig"
  />
</template>

<script>
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver' // 导入TinyMCE 5默认主题

// 按需导入你需要的插件
import 'tinymce/plugins/advlist'
import 'tinymce/plugins/link'
import 'tinymce/plugins/image'
import 'tinymce/plugins/code'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/table'

export default {
  components: { Editor },
  data() {
    return {
      editorContent: '',
      editorConfig: {
        base_url: '/static/tinymce', // 指定本地资源根路径
        suffix: '.min', // 使用压缩版资源
        language: 'zh_CN',
        skin: 'oxide',
        plugins: 'advlist link image code lists table',
        toolbar: 'undo redo | formatselect | bold italic | alignleft aligncenter alignright | bullist numlist outdent indent | link image | code',
        height: 500
      }
    }
  },
  mounted() {
    // 初始化全局TinyMCE实例，避免组件加载时资源未就绪
    tinymce.init({})
  }
}
</script>

4. 验证部署效果 #

打包项目后部署到无外网服务器，检查编辑器是否正常加载，无CDN请求报错即可。

注意事项 #

• 只拷贝你实际用到的插件，减少打包体积
• 确保语言包路径正确，若出现语言加载失败，可通过language_url明确指定路径
• 内部部署TinyMCE无需API密钥，只要资源全部本地化即可正常运行

内容的提问来源于stack exchange，提问作者Loom