首先解釋一下tinymce是什么？它是一款基于vue的前端編輯器插件并淋。
ok，一句話解釋完珍昨，不說廢話县耽，直接擼代碼。
通過npm install tinymce-vue --save 安裝完成之后镣典，打開node_moudles --> @tinymce-->tinymce-vue.js 可以看到整個(gè)js文件包裝成var Editor=(function(){});
所以我們的初始化方法以及引入的組件也就和Editor有很大關(guān)系
components:{'editor':Editor}
在script中可以建一個(gè)div包裹起來Editor如：
<div>
<Editor id="tinymce" v-model="tinymceHtml" :init='init'></Editor>
</div>
上面的init顯然就是一個(gè)初始化的方法
data(){
? ? ??return{
? ? ? ? ? ? init:{
? ? ? ? ? ? ? ? ?language_url:'/static/tinymce/zh_CN.js',
? ? ? ? ? ? ? ? language:'zh_CN',
? ? ? ? ? ? ? ? skin_url:'/static/tinymce/skins/lightgray',
? ? ? ? ? ? ? ? height:630,
? ? ? ? ? ? ? ?plugins:'link lists code table colorpicker textcolor wordcount ?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?contextmenu'
? ? ? ? ? ? ? ?toolbar:'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | aligncenter aligncenter alignright alignjustify | bullist numlist |outdent indent blockquote | undo redo | link unlink image code | removeformat'
? ? ? ? ? ? ?branding:false? ?? ? ? ? ? ? ?
? ? ? ? ? ? }
? ? ?}
}? ??
ok ,凱哥碼完上面的init兔毙，就有疑惑了，這樣就行了?
不是兄春，還需要導(dǎo)入很多的文件
第一點(diǎn)澎剥，你需要在nodemoudles中找到tinymce里面的skin文件夾將它拷貝到static文件夾中
并且下載一個(gè)zh_CN.js文件與skin放在同一個(gè)目錄下。
第二點(diǎn)赶舆，需要引入一堆頭文件哑姚，但是其實(shí)可以根據(jù)自己的需求酌情引入
import tinymce from 'tinymce/tinymce'?
import 'tinymce/themes/modern/theme'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/plugins/image'
import 'tinymce/plugins/link'
import 'tinymce/plugins/code'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/contextmenu'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/colorpicker'
import 'tinymce/plugins/textcolor'
怎么樣是不是嚇一跳？其實(shí)這里的原理就是將需要的js包引入到當(dāng)前文件中
OK,第三點(diǎn)芜茵，馬上就能出現(xiàn)我們想要的頁面了在mounted初始化方法中初始化我們的tinymce
mounted(){
tinymce.init()叙量；
}
OK ，終于可以看到我們的編輯器頁面了
