什么是tinymce呢?
TinyMCE是一款易用蚯根、且功能強(qiáng)大的所見即所得的富文本編輯器晒来。跟其他富文本編輯器相比逃片,有著豐富的插件,支持多種語(yǔ)言份招,能夠滿足日常的業(yè)務(wù)需求并且免費(fèi)。
優(yōu)勢(shì)???
1狞甚、開源可商用锁摔,基于LGPL2.1
2、插件豐富哼审,自帶插件基本涵蓋日常所需功能
3谐腰、接口豐富,可擴(kuò)展性強(qiáng)涩盾,有能力可以無(wú)限拓展功能
4十气、界面好看,符合現(xiàn)代審美
5春霍、提供經(jīng)典砸西、內(nèi)聯(lián)、沉浸無(wú)干擾三種模式(詳見“介紹與入門”)
6址儒、對(duì)標(biāo)準(zhǔn)支持優(yōu)秀(自v5開始)
7籍胯、多語(yǔ)言支持,官網(wǎng)可下載幾十種語(yǔ)言离福。
看看效果吧
有感興趣的可以直接看:TinyMCE中文文檔地址:http://tinymce.ax-z.cn/
vue項(xiàng)目集成TinyMCE編輯器
1杖狼、安裝
npm install tinymce -S
npm install @tinymce/tinymce-vue -S
這兩個(gè)組件安裝完之后,在public目錄下新建文件夾tinymce妖爷,目錄建好后蝶涩,找到node_modules文件夾下的tinymce/skins目錄,將skins目錄復(fù)制到我們創(chuàng)建的static/tinymce文件夾內(nèi)絮识,如下圖所示
2绿聘、使用
組件中使用
配置項(xiàng),我這里展示的只是基本的配置,要完整的可以參考官網(wǎng)或者自行百度
重要提示、重要提示:不然本地是沒問題,打包之后就會(huì)報(bào)錯(cuò)!!!
注意上圖紅色框內(nèi),如果你用的hash或者直接根路徑下則可以不用加,因?yàn)槲疫@邊是history模式修改了輸出文件名次舌、
3熄攘、組件引入
好了、今天就到此為止吧彼念、希望可以幫助到同學(xué)們