脚本宝典收集整理的这篇文章主要介绍了tinymce 5更新后，如何使用tinymce-vue，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

在vue项目中使用tinymce编辑器（tinymce-vue）

项目使用vue-cli 3.x版本，tinymce5

1. 安装

npm install @tinymce/tinymce-vue

2. 引用

出现的问题和摸索出的解决方案（参考了https://www.cnblogs.com/wisewrong/p/8985471.html，虽然文章里使用的是tinymce4，但是也有很大帮助）

• 报第一个错，发现只安装tinymce-vue不可以，还需安装tinymce，执行

npm install tinymce

• 按示例初始化发现编辑器不显示，报“theme.js:1 Uncaught SyntaxError: Unexpected token <”这个错，需要手动引入tinymce主题，在inIT({})方法里加theme: 'silver',没用。

import 'tinymce/themes/silver/theme'

• 不报错了但是编辑器还是不显示，继续研究，发现还需要定义skin_url，在init({})里加skin: "oxide"没用。先在Public目录下新建一个文件夹命名为tinymce，然后在node_modules里找到tinymce的skin包，复制到public/tinymce里，然后创建tinymce时添加一行代码

skin_url: '/tinymce/skins/ui/oxide',

3. 定制

• 将语言改为中文

步骤：

1. 在官网下载语言包https://www.tiny.cloud/get-tiny/language-packages/
2. 把下载的语言包放到之前新建的tinymce文件夹里
3. 初始化时添加以下代码

      language_url: `/tinymce/langs/zh_CN.js`,
      language: 'zh_CN',

• 在tinymce5工具栏添加自定义功能按钮

    const that = this
    this.tinymceinit = {
    toolbar: 'imageUpload',
      SETUP: (editor) => {
        editor.ui.registry.addButton('imageUpload', {
          tooltip: '插入图片',
          icon: 'image',
          onAction: () => {

          }
        })
      }
    }

详细例子在我的github项目里https://github.com/Inspiration1/asteroid

脚本宝典总结

以上是脚本宝典为你收集整理的tinymce 5更新后，如何使用tinymce-vue全部内容，希望文章能够帮你解决tinymce 5更新后，如何使用tinymce-vue所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。