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

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

1. 安装及引用

注：只安装tinymce-vue不可以，还需安装tinymce，否则会报错

npm install tinymce
npm install @tinymce/tinymce-vue
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'

2. 初始化编辑器（记录出现的问题和解决方案）

• 按示例初始化发现编辑器不显示，报“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时的init({})里添加下面这行代码：

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

3. 配置

• 一些常用的配置属性

  
  browser_spellcheck: true, // 拼写检查
  branding: false, // 去水印
  elementpath: false,
  //禁用编辑器底部的状态栏
  statusbar: false, // 隐藏编辑器底部的状态栏
  paste_data_images: true, // 允许粘贴图像
  menubar: false, // 隐藏最上方menu

• plugins

  使用某个插件需要先引入这个插件，例：

  import 'tinymce/plugins/fullscreen'
  import 'tinymce/plugins/preview'
  plugins: 'fullscreen preview'

• toolbar

  可以使用“|”给工具栏分组，把某一类功能划分成一组，例：

  toolbar: 'bold italic underline | alignleft aligncenter alignright'

4. 定制

• 将语言改为中文

  步骤：

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

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

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

  this.tinymceInit = {
  ...
  toolbar: 'imageUpload',
  setup: (editor) => {
  editor.ui.registry.addButton('imageUpload', {
  tooltip: '插入图片',
  icon: 'image',
  onAction: () => {
  }
  })
  }
  }

<使用后出现问题>

1.在ie10不能用.最低ie11

2,在ie或者edge上工具栏(最上方的插件) 加载很慢,页面需要加载4~7秒之后才能出现.

这篇主要是记录,有大佬看到这两个问题,麻烦给留个解决方案,不胜感激谢谢

最后

以上就是无私小伙为你收集整理的tinymce 5 在vue项目中使用tinymce编辑器（tinymce-vue）的全部内容，希望文章能够帮你解决tinymce 5 在vue项目中使用tinymce编辑器（tinymce-vue）所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。