如何在Vue2项目中无需API Key本地使用TinyMCE富文本编辑器

你当前的配置可以基础运行，但并未实现真正的本地部署，依然会发起TinyMCE云端资源请求，存在API Key告警和功能限制问题，可做如下调整：

一、现有配置存在的问题 #

• 你仅安装了Vue封装组件@tinymce/tinymce-vue，未安装TinyMCE核心本体，组件默认会从云端拉取TinyMCE脚本，api-key="no-api-key"只是掩盖了报错提示，并不算真正的本地离线部署。

二、优化调整步骤 #

1. 补充安装TinyMCE核心包 #

执行命令安装本地版本的TinyMCE核心：

npm install tinymce --save

2. 调整组件引入和初始化配置 #

需要手动引入本地TinyMCE、默认主题、皮肤和用到的插件，完全避免云端请求，修改后的代码如下：

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <editor
      :tinymce="tinymce"
      :init="tinymceInit"
      v-model="content"
    />
  </div>
</template>

<script>
// 引入本地TinyMCE核心
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
// 引入默认主题
import 'tinymce/themes/silver'
// 引入默认皮肤样式
import 'tinymce/skins/ui/oxide/skin.min.css'
import 'tinymce/skins/content/default/content.min.css'
// 引入你用到的所有插件
import 'tinymce/plugins/advlist'
import 'tinymce/plugins/autolink'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/link'
import 'tinymce/plugins/image'
import 'tinymce/plugins/charmap'
import 'tinymce/plugins/print'
import 'tinymce/plugins/preview'
import 'tinymce/plugins/anchor'
import 'tinymce/plugins/searchreplace'
import 'tinymce/plugins/visualblocks'
import 'tinymce/plugins/code'
import 'tinymce/plugins/fullscreen'
import 'tinymce/plugins/insertdatetime'
import 'tinymce/plugins/media'
import 'tinymce/plugins/table'
import 'tinymce/plugins/paste'
import 'tinymce/plugins/help'
import 'tinymce/plugins/wordcount'

export default {
  name: 'app',
  components: {
    'editor': Editor
  },
  data() {
    return {
      tinymce,
      // 富文本内容绑定变量
      content: '',
      tinymceInit: {
        height: 500,
        menubar: false,
        // 关闭云端加载相关配置
        base_url: '/tinymce',
        suffix: '.min',
        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'
      }
    }
  }
}
</script>

3. 静态资源打包配置（Vue CLI项目适用） #

如果打包后皮肤、图标加载异常，需要在vue.config.js中配置复制TinyMCE的静态资源到打包目录：

// vue.config.js
const CopyWebpackPlugin = require('copy-webpack-plugin')

module.exports = {
  configureWebpack: {
    plugins: [
      new CopyWebpackPlugin([
        { from: 'node_modules/tinymce/skins', to: 'tinymce/skins' },
        { from: 'node_modules/tinymce/icons', to: 'tinymce/icons' }
      ])
    ]
  }
}

三、其他可选优化点 #

• 把init配置抽离到data中，避免模板内写大段JSON，提升代码可读性
• 可以根据实际使用场景裁剪不需要的插件，减小打包体积
• 如果需要中文界面，下载中文语言包放到public/tinymce/langs目录，在init配置中加language: 'zh_CN'即可生效

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