这篇博客的目的是记录一下Vue 中使用 tinymce 富文本编辑器，其中参考了一下 https://www.cnblogs.com/wisewrong/p/8985471.html 这篇博客，但原博客只兼容 Tinymce 4.x 不支持最新版本，所以在此做了更新。

特别说明，此博客适用于 tinymce 6.x

版本说明

"vue": "^2.6.14"，
"@tinymce/tinymce-vue": "^3.2.8",
"tinymce": "^6.1.2",

如果有购买 tinymce 的服务，可以参考 tinymce-vue 的说明，通过 api-key 直接使用 tinymce。
安装之后，在 node_modules 中找到 tinymce/skins 目录，然后将 skins 目录拷贝到 public 目录下

初始化

引入以下文件

import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver/theme'
import 'tinymce/models/dom';
import 'tinymce/icons/default';

tinymce-vue 是一个组件，需要在 components 中注册，然后直接使用

<Editor v-model="tinymceHtml" :init="editorInit"></Editor>

编辑器需要一个 skin 才能正常工作，所以要设置一个 skin_url 指向之前复制出来的 skins 文件，content_css 指向 content.css 。
注意，需要使用哪套theme，就将目录指到对应文件。如下面的黑暗模式

editorInit: {skin_url: '/skins/ui/oxide',content_css: '/skins/content/default/content.css',// 黑暗模式// skin_url: '/skins-2/ui/oxide-dark',// content_css: '/skins-2/content/dark/content.css',height: 300,
}

同时在 mounted 中也需要初始化一次：
如果在这里传入上面的 init 对象，并不能生效，但什么参数都不传也会报错，所以这里传入一个空对象。

mounted () {tinymce.init({})
}

扩展插件

完成了上面的初始化之后，就已经能正常运行编辑器了，但只有一些基本功能

tinymce 通过添加插件 plugins 的方式来添加功能

比如要添加一个上传图片的功能，就需要用到 image 插件，添加超链接需要用到 link 插件。

import 'tinymce/plugins/image';
import 'tinymce/plugins/link';

添加plugin:

plugins: 'link image',

添加 toolbar:

toolbar: 'link image',

最后贴一下完整代码：

<template><div class='tinymce'><h1>tinymce</h1><Editor v-model='tinymceHtml' :init='editorInit'></Editor><div v-html='tinymceHtml'></div></div>
</template><script>
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver/theme'
import 'tinymce/models/dom';
import 'tinymce/icons/default';// plugin, 更多plugin，请参考官方文档
import 'tinymce/plugins/image'
import 'tinymce/plugins/link'
import 'tinymce/plugins/code'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/media'export default {// eslint-disable-next-line vue/multi-word-component-namesname: 'tinymce',data () {return {tinymceHtml: '请输入内容',editorInit: {skin_url: '/skins/ui/oxide',content_css: '/skins/content/default/content.css',height: 300,plugins: 'link lists image code table wordcount media',toolbar: 'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat',branding: false}}},mounted () {// 如果在这里传入上面的 init 对象，并不能生效，但什么参数都不传也会报错，所以这里传入一个空对象。tinymce.init({})},components: {Editor}
}
</script>

上传图片

默认配置是不支持上传图片的，需要上传图片需要按照文档添加相应配置，才会出现上传操作按钮。

多语言

默认显示英文，如果需要其他语言，需要自行下载对应的语言包，通过language_url 和 language 设置。
language_url 和语言包设置方法，同 skin_url 。

editorInit: {// ...language_url: '/static/tinymce/zh_CN.js',language: 'zh_CN',
}

在 Vue 项目中引入 tinymce 富文本编辑器

版本说明

初始化

扩展插件

上传图片

多语言

更多配置请参考官方文档

在 Vue 项目中引入 tinymce 富文本编辑器相关推荐

最新文章

热门文章