引入方式跟VUE的其實(shí)差不多，關(guān)鍵在于 Nuxt是服務(wù)端刷新頁(yè)面 所以拿不到引入的文件導(dǎo)致NUXT報(bào)錯(cuò)。
插件安裝：
1.安裝tinymce-vue
npm install @tinymce/tinymce-vue -S
2.下載tinymce
npm install tinymce -S
3.下載的時(shí)候可以先在static下面建個(gè)目錄tinymce，下載tinymce完成后在node_modules 中找到 tinymce/skins目錄，將其復(fù)制到static\tinymce目錄
4.下載中文語(yǔ)言包：tinymce提供了很多的語(yǔ)言包，這里我們下載中文語(yǔ)言包?（進(jìn)去后找到 Chinese下載）然后解壓文件將文件放入tinymce目錄
5.新建一個(gè)目錄 tinymce-editor?組件(這里我封裝了一個(gè)組件，方便以后直接調(diào)用)
直接附上代碼：這是封裝的 Editor?組件 (只適用于 5.2.0版本，低版本的 需要改一些 地址路徑 其他應(yīng)該沒(méi)區(qū)別)。
<template>??
? ?// nuxt有一個(gè)組件是no-ssr組件，所以上面的html最好用no-ssr包起來(lái)，不然會(huì)報(bào)tinymce組件沒(méi)有定義的錯(cuò)誤：
??<no-ssr?placeholder="Loading...">
????<editor?id="tinymce"?v-model="myValue"?:init="init" :disabled="disabled"></editor>
??</no-ssr>
</template>
<script>
// 我們不能把tinymce放到plugin里面去引入，因?yàn)檫@樣會(huì)引入到全局js里面去。
// nuxt官網(wǎng)介紹了一種方法：Window 或 Document 對(duì)象未定義？
import?editor?from?'@tinymce/tinymce-vue'
let?tinymce;
if?(process.client)?{
??tinymce?=?require('tinymce/tinymce');
??// 下面基本上都是 各種各樣的插件，因?yàn)轫?xiàng)目需要 這里用的功能不多，大家需要什么插件可以參考百度。
??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');//?字?jǐn)?shù)統(tǒng)計(jì)插件
//???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:?{
????//傳入一個(gè)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,?//?拼寫(xiě)檢查
????????branding:?false,?//?去水印
????????statusbar:?false,?//?隱藏編輯器底部的狀態(tài)欄
????????elementpath:?false,??//禁用下角的當(dāng)前標(biāo)簽路徑
????????paste_data_images:?true,?//?允許粘貼圖像
????????//此處為圖片上傳處理函數(shù)，這個(gè)直接用了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:?{
????//添加相關(guān)的事件，可用的事件參照文檔=>?https://github.com/tinymce/tinymce-vue?=>?All?available?events
????//需要什么事件可以自己增加
????onClick(e)?{
??????this.$emit('onClick',?e,?tinymce)
????},
????//可以添加一些自己的自定義事件，如清空內(nèi)容
????clear()?{
??????this.myValue?=?''
????}
??},
??mounted(){ // 用process.client判斷一下環(huán)境再執(zhí)行
??????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.這樣調(diào)用上面的組件 就可以了。如下圖：
7.封裝完后在引用 頁(yè)面就出來(lái)了 很完美。
