如何使用英特爾?oneAPI工具實現PyTorch 優化，直播火熱報名中>>>>>>

Medit v2.0

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

Demo:?Medit Demo

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

Medit2.0 較上一版本更新內容

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

2. 優化編輯器樣式，把原有的圖標、彈層和編輯器內部標識都進行了優化。

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

4. 開放內置功能配置接口Medit.nativeSetting，開放內置彈層調用接口Medit.settingPage。

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

如何使用：

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

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

• 第二步，創建medit實例

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

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

Medit實例方法

通過上面創建好的medit實例meditObj可以調用medit的方法來實現你想要的功能。

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

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

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

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

  • callBack(content, time)：這是自動保存的回調函數，每次medit自動保存后都會調用這個回調函數，并傳入當前保存的編輯器內容content和當前時間戳time。

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

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

medit類方法

目前有三個medit類方法，所謂類方法就是直接通過medit類進行調用而不是通過medit實例進行調用。

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

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

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

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

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

下面是一段應用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);
});