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

如何使用英特爾?oneAPI工具實現(xiàn)PyTorch 優(yōu)化，直播火熱報名中>>>>>>

Medit v2.0

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

Demo:?Medit Demo

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

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

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

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

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

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

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

如何使用：

• 第一步，引入medit.js文件，如果不下載使用icon包的話可能會導致部分功能性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ù)，并傳入當前保存的編輯器內(nèi)容content和當前時間戳time。

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

  {?//?默認圖片上傳設(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類進行調(diào)用而不是通過medit實例進行調(diào)用。

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

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

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