wangEditor-mobile移動版是一個專門針對移動端設(shè)計的富文本編輯器,雖然是『富文本』編輯器,但是功能非常少,操作非常簡潔。適用于小屏幕、手指觸摸操作。使用javascript開發(fā),可輕松集成到webapp。
基本應(yīng)用
第一,下載、并引用 zepto.js 和 zepto.touch.js
wangEditor-mobile基于zepto開發(fā),因此頁面中要首先引用 zepto.js 和 zepto.touch.js?扇epto中文站下載,或者點擊這里下載。
下載之后,將兩者引用到頁面內(nèi)。
(建議引用寫在到<body>底部)
第二,下載、并引用 wangEditor-mobile.js 和 wangEditor-mobile.css
進入官網(wǎng)或者點擊這里下載wangEditor-mobile的最新代碼,解壓之后,找到dist文件夾,文件夾結(jié)構(gòu)如下:
將其中的wangEditor-mobile.js和wangEditor-mobile.css引用到頁面中(也可以引用它們丟應(yīng)的min壓縮格式的文件)
請注意以下兩點:
紅框中的 fonts 文件夾及其內(nèi)容,一定要下載下來,并和wangEditor-mobile.css 放在同一個目錄,否則菜單圖標將不顯示。
zepto.js 和 zepto.touch.js 一定要引用在 wangEditor-mobile.js 的前面。
第三,生成富文本編輯器
首先,在頁面的<body>中添加一個textarea標簽,
然后,可通過該textarea生成一個富文本編輯器。編輯器編輯的內(nèi)容,也會實時同步到 textarea 無需手動同步
運行頁面,使用手機(或模擬器)瀏覽器即可看到效果。
最后,寫一個完整的例子