前一篇隨筆記錄了tinymce的安裝殿衰,這篇講一下個(gè)人的封裝:
第一步:在components中對(duì)控件進(jìn)行聲明
控件聲明
第二步:在main.js中進(jìn)行vue-tinymce控件的賦值
控件賦值
很簡單--就兩個(gè)參數(shù):雙向綁定的富文本編輯器的內(nèi)容雷则,以及最重要的編輯器的配置setting
第三步:配置編輯器
這是我自己編輯器的配置
具體請(qǐng)自行轉(zhuǎn)tinymce中文文檔看詳細(xì)的配置,這部分文檔還是很完善的(基本都是在說配置以及控件)
第四步:寫個(gè)方法獲取綁定的富文本編輯器中的內(nèi)容
內(nèi)容獲取
第五步:對(duì)控件的聲明以及調(diào)用,不打算寫成控件的系草,可以直接就使用vue-tinymce這個(gè)空間開發(fā)
封裝空間聲明
使用
通過refs拿到組件后調(diào)用之前的方法獲取編輯器的值
最終效果
如果你要在dialog之類的有z-index的彈出框中使用tinymce撕贞,因?yàn)榕渲貌恢С中薷膠-index,所以需要去修改static中的源碼:
在默認(rèn)的skin.min.css中全局搜索z-index對(duì)所有大于0的z-index都統(tǒng)一加上一個(gè)數(shù)字比如:1 --》 3001朋蔫,一定要大于彈出框的z-index