基本應(yīng)用
第一,下載、并引用 zepto.js 和 zepto.touch.js
wangEditor-mobile基于zepto開發(fā),因此頁(yè)面中要首先引用zepto.js和zepto.touch.js。可去zepto中文站下載,或者點(diǎn)擊這里下載。
下載之后,將兩者引用到頁(yè)面內(nèi)。
(建議引用寫在到<body>底部)
第二,下載、并引用 wangEditor-mobile.js 和 wangEditor-mobile.css
進(jìn)入官網(wǎng)或者點(diǎn)擊這里下載wangEditor-mobile的最新代碼,解壓之后,找到dist文件夾,文件夾結(jié)構(gòu)如下:
將其中的wangEditor-mobile.js和wangEditor-mobile.css引用到頁(yè)面中(也可以引用它們丟應(yīng)的min壓縮格式的文件)
請(qǐng)注意以下兩點(diǎn):
紅框中的fonts文件夾及其內(nèi)容,一定要下載下來(lái),并和wangEditor-mobile.css放在同一個(gè)目錄,否則菜單圖標(biāo)將不顯示。
zepto.js和zepto.touch.js一定要引用在wangEditor-mobile.js的前面。
第三,生成富文本編輯器
首先,在頁(yè)面的<body>中添加一個(gè)textarea標(biāo)簽,
然后,可通過(guò)該textarea生成一個(gè)富文本編輯器。編輯器編輯的內(nèi)容,也會(huì)實(shí)時(shí)同步到textarea無(wú)需手動(dòng)同步
運(yùn)行頁(yè)面,使用手機(jī)(或模擬器)瀏覽器即可看到效果。
最后,寫一個(gè)完整的例子