Medit.js移動端富文本編輯器

Medit v2.0

一個創(chuàng)新型的移動端所見即所得富文本編輯器。

Demo: Medit Demo

為了更專注做一個更具價值和體驗的移動端富文本編輯器，所以Medit目前不支持Pc端使用，僅支持移動端。

Medit2.0 較上一版本更新內(nèi)容

1. 更易用的內(nèi)容選擇方式，目前已支持選取內(nèi)容塊后手勢左右滑動選擇、通過手機原生自帶長按選擇進(jìn)行編輯操作。

2. 優(yōu)化編輯器樣式，把原有的圖標(biāo)、彈層和編輯器內(nèi)部標(biāo)識都進(jìn)行了優(yōu)化。

3. 開放功能擴展接口Medit.extend，可以通過這個接口來擴展更加豐富的內(nèi)容。

4. 開放內(nèi)置功能配置接口Medit.nativeSetting，開放內(nèi)置彈層調(diào)用接口Medit.settingPage。

5. 工具條目前不在限制于頁面頂部，用戶可以對工具條進(jìn)行自定義配置。

如何使用：

• 第一步，引入medit.js文件，如果不下載使用icon包的話可能會導(dǎo)致部分功能性icon無法顯示，icon存放于 github/medit/build/images 下

在第一步和第二步之間可以選擇性的引入medit插件，也可以自己來書寫medit插件，medit提供了兩個方法，一個是 medit.extend 方法來配置擴展插件，另外還有一個 medit.nativeSetting 方法來配置內(nèi)部功能，詳情請看下面的 medit類方法。

• 第二步，創(chuàng)建medit實例

/*
 * var meditObj = medit(editerContainerNode [, toolBarContainer]);
 *
 * 這里的medit方法內(nèi)部實現(xiàn)了自動new，所以可以使用new medit，也可以直接使用medit。
 *
 * editerContainerNode：這是必須的，代表的是編輯框的node結(jié)點。
 * toolBarContainer： 這是可選的參數(shù)，可以傳入一個node結(jié)點來配置工具條位置，如果不傳入那么就會固定在頁面頂部。
 *
 * 下面是一個實例
 */
 var meditObj = medit(document.getElementById("medit"), document.getElementById("meditToolBar"));

• 經(jīng)過上面兩步之后一個medit富文本編輯器就可以使用了。

Medit實例方法

通過上面創(chuàng)建好的medit實例meditObj可以調(diào)用medit的方法來實現(xiàn)你想要的功能。

• meditObj.getContent() 獲取medit編輯器中所編輯的內(nèi)容結(jié)果。

• meditObj.clear() 清除medit編輯器的內(nèi)容和自動保存在客戶端瀏覽器中的內(nèi)容。

• meditObj.autoSave(name, callBack(content, time)) 配置medit自動保存，需要傳入兩個參數(shù)：

  • name：為了保證在同一頁面引入兩個編輯器后自動保存的效果，所以需要手動傳入一個自動保存的字段名稱，需要在頁面中保持唯一性。

  • callBack(content, time)：這是自動保存的回調(diào)函數(shù)，每次medit自動保存后都會調(diào)用這個回調(diào)函數(shù)，并傳入當(dāng)前保存的編輯器內(nèi)容content和當(dāng)前時間戳time。

• meditObj.image(option) || meditObj.imageUpload(option) medit圖片上傳配置，option是配置參數(shù)

  { // 默認(rèn)圖片上傳設(shè)置
        path:'https://sm.ms/api/upload', // 圖片上傳路徑
        name:'smfile', // 圖片上傳文件參數(shù)
        size:0, // 大小限制，0為不限制大小
        timeout:0, // 上傳超時時間，0為不限制
        ext:["jpg","jpeg","png","gif","bmp"], // 上傳文件格式限制
        success:function(){}, // 上傳成功回調(diào)
        error:function(){} // 上傳失敗回調(diào)
    }

medit類方法

目前有三個medit類方法，所謂類方法就是直接通過medit類進(jìn)行調(diào)用而不是通過medit實例進(jìn)行調(diào)用。

• medit.extend(config) 功能擴展方法，可以通過這個方法實現(xiàn)medit插件和功能擴展。 config是一個對象，其中必須包括 圖標(biāo): icon 、 其它類型模塊轉(zhuǎn)換為此類型模塊時動作: doWhat 、 模塊得到焦點時動作: focus 、模塊失去焦點時動作: blur和 模塊名稱: name 這五個屬性。其中icon可以是遠(yuǎn)程url，也可以是dataURL；name必須保持唯一，不能與內(nèi)置功能名稱產(chǎn)生沖突。

  下面是一個功能模塊的完整配置屬性：

  /* 
    icon: [String] 類型選擇icon url
    name: [String] 類型名稱
    isMerge: [Bollean] 是否開啟相同內(nèi)容自動合并
    notDisplay: [Bollean] 在選擇模式的時候不顯示,
    emptyNotDelete: [Bollean] 如果當(dāng)前塊只存在一個子節(jié)點并且這個子節(jié)點要刪除的時候是否開啟遞歸刪除
  
    doWhat: [Function] 轉(zhuǎn)換到此類型時會自動做哪些轉(zhuǎn)換
    focus：[Function] 點擊或此模塊獲取焦點時自動觸發(fā)的函數(shù)
    blur：[Function] 此模塊失去焦點時自動觸發(fā)的函數(shù)
    empty: [Function] 什么時候當(dāng)前模塊為空
    selecting：[Function] 選擇當(dāng)前模塊并且手指在屏幕上移動時觸發(fā)的操作
    selected：[Function] 手指移動結(jié)束執(zhí)行的操作
    setting: [Array(Object)] 當(dāng)前模塊可以進(jìn)行哪些操作
     -- name: [String] 操作名稱
     -- icon: [String] 操作按鈕icon url
     -- doWhat: [Function/Array] 點擊此操作按鈕執(zhí)行什么，或者是存在更深層次操作
  */

• medit.nativeSetting(callBack(config, name)) 內(nèi)部功能配置方法，會循環(huán)調(diào)用callBack，然后把內(nèi)置功能的配置和名稱傳入，返回值應(yīng)該是一個修改后的config，然后medit就會應(yīng)用這個config，如果沒有返回值那么medit也就不會做任何改動。

• medit.settingPage(title, contentHTML, callBack) 打開medit內(nèi)置彈層，title是配置彈層頂部Title，contentHTML可以傳入一段html文本作為彈層的內(nèi)容，callBack是在彈層的ok按鈕點擊之后觸發(fā)。

下面是一段應(yīng)用medit類方法的實例：

medit.extend({
    name: 'time',
    icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAClklEQVRYR8WXjW0VQQyExxUAHUAFJBWQVACpgFABoQJCBZAKgAqSVECogKQCSAVABUZf8B73s393QXorPa2ebs87Httjn2nHy3Z8v1YBcPfHkp5JeiHpYfzw4Vf8LiR9NbMfvY51AXD3A0lvJbH3rCtJ78yMvbqqANwdL99LOh5ZuZGEp3PjgIOZp6OznHtlZjCUXUUA7r4n6aMkdtZnSactegP0B0kv473rAMG+WFkAcfmXiPEtnplZ1kDJs7DxKRiBgcOcjQWA8IDL8Ry6D0oURlKqxErYIlSEBQcAMQlHDgCooQ/P92rxc3eHATOrhZI8SiAuzOxozNrkxaDtWxzYb9HeAwBbM7uwMCTwHABZ+5yEM7Nx5mdD3QsgQCRmr8zsMBkcAES8fsaDJ61sD6PNEKSLIl++x/9HKbRjAHhM2d2YWSq9qoisYSAAk4gkJNoAI/+k2N2p3dehYKd1/fr7dAMA7KKoQ4jHDJAY6PyArgViAwCU8jz6xZ2s5wBMsrQGIgFAITPnqHc8Heo+egoac21m+/8TQAnnGzMjtClkeA0AOmaRgclLDQYoW4SmtI7H1eTu1RCkJDwzs5NW/Lc8d/dqEqYyHOKz5ZIGY9UyhMpVQrQGYFOIoq6TXC6axprLcmfdPdm+NDNy4W7NewEzX5LL7nJsgZs1o4nM59pxSkbql47YPWAWPCe0OMW+aHKlgWQ8RBxtBdEz3JRGMtDi+YMYtwHRnHDHDITqIbvY+h3DzYLN3kkG24gOIlUNSWQ7DSfNE4x1zJTZ93rGcsSDLpkWhgDDngZV2jcJTHazp3UWk/T6sXxGJ0YBkkbtVuJ3jfCLMmxZjaSiieDx/CuJHIERRq6ix/M7uj7NWsDu83znAP4A8SpJMGG4znIAAAAASUVORK5CYII=',
    doWhat: function(node) {
        node.innerHTML = "this is time node";
        return node;
    },
    setting: [{
        name: 'time',
        icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAClklEQVRYR8WXjW0VQQyExxUAHUAFJBWQVACpgFABoQJCBZAKgAqSVECogKQCSAVABUZf8B73s393QXorPa2ebs87Httjn2nHy3Z8v1YBcPfHkp5JeiHpYfzw4Vf8LiR9NbMfvY51AXD3A0lvJbH3rCtJ78yMvbqqANwdL99LOh5ZuZGEp3PjgIOZp6OznHtlZjCUXUUA7r4n6aMkdtZnSactegP0B0kv473rAMG+WFkAcfmXiPEtnplZ1kDJs7DxKRiBgcOcjQWA8IDL8Ry6D0oURlKqxErYIlSEBQcAMQlHDgCooQ/P92rxc3eHATOrhZI8SiAuzOxozNrkxaDtWxzYb9HeAwBbM7uwMCTwHABZ+5yEM7Nx5mdD3QsgQCRmr8zsMBkcAES8fsaDJ61sD6PNEKSLIl++x/9HKbRjAHhM2d2YWSq9qoisYSAAk4gkJNoAI/+k2N2p3dehYKd1/fr7dAMA7KKoQ4jHDJAY6PyArgViAwCU8jz6xZ2s5wBMsrQGIgFAITPnqHc8Heo+egoac21m+/8TQAnnGzMjtClkeA0AOmaRgclLDQYoW4SmtI7H1eTu1RCkJDwzs5NW/Lc8d/dqEqYyHOKz5ZIGY9UyhMpVQrQGYFOIoq6TXC6axprLcmfdPdm+NDNy4W7NewEzX5LL7nJsgZs1o4nM59pxSkbql47YPWAWPCe0OMW+aHKlgWQ8RBxtBdEz3JRGMtDi+YMYtwHRnHDHDITqIbvY+h3DzYLN3kkG24gOIlUNSWQ7DSfNE4x1zJTZ93rGcsSDLpkWhgDDngZV2jcJTHazp3UWk/T6sXxGJ0YBkkbtVuJ3jfCLMmxZjaSiieDx/CuJHIERRq6ix/M7uj7NWsDu83znAP4A8SpJMGG4znIAAAAASUVORK5CYII=',
        doWhat: function(node){
            medit.settingPage("時間插件測試","Time test",function(){ console.log("ok點擊了")});
        }
    }],
    focus: function(node){
        node.setAttribute("class","medit-editing");
    },
    blur: function(node) {
        node.removeAttribute("class");
    }
})

medit.nativeSetting(function(mode, modeName){
    console.log(mode, modeName);
});