引入方式跟VUE的其实差不多，关键在于 Nuxt是服务端刷新页面 所以拿不到引入的文件导致NUXT报错。
插件安装：
1.安装tinymce-vue
npm install @tinymce/tinymce-vue -S
2.下载tinymce
npm install tinymce -S
3.下载的时候可以先在static下面建个目录tinymce，下载tinymce完成后在node_modules 中找到 tinymce/skins目录，将其复制到static\tinymce目录
4.下载中文语言包：tinymce提供了很多的语言包，这里我们下载中文语言包 （进去后找到 Chinese下载）然后解压文件将文件放入tinymce目录
5.新建一个目录 tinymce-editor 组件(这里我封装了一个组件，方便以后直接调用)
直接附上代码：这是封装的 Editor 组件 (只适用于 5.2.0版本，低版本的 需要改一些 地址路径 其他应该没区别)。
<template>
// nuxt有一个组件是no-ssr组件，所以上面的html最好用no-ssr包起来，不然会报tinymce组件没有定义的错误：
<no-ssr placeholder="Loading...">
<editor id="tinymce" v-model="myValue" :init="init" :disabled="disabled"></editor>
</no-ssr>
</template>
<script>
// 我们不能把tinymce放到plugin里面去引入，因为这样会引入到全局js里面去。
// nuxt官网介绍了一种方法：Window 或 Document 对象未定义？
import editor from '@tinymce/tinymce-vue'
let tinymce;
if (process.client) {
tinymce = require('tinymce/tinymce');
// 下面基本上都是 各种各样的插件，因为项目需要 这里用的功能不多，大家需要什么插件可以参考百度。
require('tinymce/themes/silver/theme');
require('tinymce/plugins/image');// 插入上传图片插件
require('tinymce/plugins/media');// 插入视频插件
require('tinymce/plugins/table');// 插入表格插件
require('tinymce/plugins/lists');// 列表插件
require('tinymce/plugins/link');//超链接插件
require('tinymce/plugins/wordcount');// 字数统计插件
// require('tinymce/plugins/autolink');
// require('tinymce/plugins/autosave');
// require('tinymce/plugins/charmap');
// require('tinymce/plugins/codesample');
// require('tinymce/plugins/contextmenu');
// require('tinymce/plugins/emoticons');
// require('tinymce/plugins/fullscreen');
// require('tinymce/plugins/hr');
// require('tinymce/plugins/imagetools');
// require('tinymce/plugins/insertdatetime');
// require('tinymce/plugins/noneditable');
// require('tinymce/plugins/paste');
// require('tinymce/plugins/print');
// require('tinymce/plugins/searchreplace');
// require('tinymce/plugins/tabfocus');
// require('tinymce/plugins/template');
// require('tinymce/plugins/textpattern');
// require('tinymce/plugins/visualblocks');
// require('tinymce/plugins/anchor');
// require('tinymce/plugins/autoresize');
// require('tinymce/plugins/bbcode');
// require('tinymce/plugins/code');
// require('tinymce/plugins/colorpicker');
// require('tinymce/plugins/directionality');
// require('tinymce/plugins/fullpage');
// require('tinymce/plugins/help');
// require('tinymce/plugins/importcss');
// require('tinymce/plugins/legacyoutput');
// require('tinymce/plugins/nonbreaking');
// require('tinymce/plugins/pagebreak');
// require('tinymce/plugins/preview');
// require('tinymce/plugins/save');
// require('tinymce/plugins/spellchecker');
// require('tinymce/plugins/toc');
// require('tinymce/plugins/visualchars');
}
export default {
components:{editor},
props: {
//传入一个value，使组件支持v-model绑定
value: {
type: String,
default: ''
},
disabled: {
type: Boolean,
default: false
},
plugins: {
type: [String, Array],
default: 'lists image media table wordcount link'
},
toolbar: {
type: [String, Array],
default: 'undo redo | formatselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table | removeformat'
}
},
data() {
return {
//初始化配置
init: {
language_url: '/tinymce/langs/zh_CN.js',
language: 'zh_CN',
skin_url: '/tinymce/skins/ui/oxide',
content_css:'/tinymce/skins/content/default/content.css',
height: 300,
plugins: this.plugins,
toolbar: this.toolbar,// false禁用工具栏（隐藏工具栏）
menubar: false,// 隐藏最上方menu菜单
browser_spellcheck: true, // 拼写检查
branding: false, // 去水印
statusbar: false, // 隐藏编辑器底部的状态栏
elementpath: false, //禁用下角的当前标签路径
paste_data_images: true, // 允许粘贴图像
//此处为图片上传处理函数，这个直接用了base64的图片形式上传图片，
//如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler
images_upload_handler: (blobInfo, success, failure) => {
const img = 'data:image/jpeg;base64,' + blobInfo.base64()
success(img)
}
},
myValue: this.value
}
},
created(){
},
methods: {
//添加相关的事件，可用的事件参照文档=> https://github.com/tinymce/tinymce-vue => All available events
//需要什么事件可以自己增加
onClick(e) {
this.$emit('onClick', e, tinymce)
},
//可以添加一些自己的自定义事件，如清空内容
clear() {
this.myValue = ''
}
},
mounted(){ // 用process.client判断一下环境再执行
this.$nextTick(()=>{
if (process.client) {
window.tinymce.init({});
}
})
},
watch: {
value(newValue) {
this.myValue = newValue
},
myValue(newValue) {
this.$emit('input', newValue)
}
}
}
</script>
<style scoped>
</style>
6.这样调用上面的组件 就可以了。如下图：
7.封装完后在引用 页面就出来了 很完美。
