如何擴展一個自定義編輯器？

從HBuilderX 2.9.2及以上版本開始支持

  • 通過 customEditors 配置擴展點，聲明需要註冊的自定義編輯器。
  1. //package.json；
  2. //...NOTE：package.json不支持註釋，以下代碼使用時需要將註釋刪掉
  3.     "contributes": {
  4.         "customEditors": [{
  5.             "viewType": "catEdit.catScratch",   // 自定義編輯器類型id
  6.             "displayName": "Cat Scratch",
  7.             "selector": [{
  8.                 "fileNamePattern": "*.cscratch" // 文件名匹配模式
  9.             }],
  10.             "priority": "default"
  11.         },
  12.         ...]
  13.     }

  • 插件代碼繼承CustomEditorProvider等

    HBuilderX使用WebViewPanel來作爲自定義編輯器的視圖，WebViewPanel的用法也可以參考視圖擴展中部分示例。

  1. var hx = require("hbuilderx");
  3. // 引入主要的類
  4. let CustomDocument = hx.CustomEditor.CustomDocument;
  5. let CustomEditorProvider = hx.CustomEditor.CustomEditorProvider;
  6. let CustomDocumentEditEvent = hx.CustomEditor.CustomDocumentEditEvent;
  8. // 繼承CustomDocument
  9. class CatCustomDocument extends CustomDocument {
  10.     constructor(uri) {
  11.         super(uri)
  12.     }
  13.     dispose() {
  14.         super.dispose();
  15.     }
  16. }
  18. // 繼承CustomEditorProvider，實現必要的方法
  19. class CatCustomEditorProvider extends CustomEditorProvider{
  20.     constructor(context){
  21.         super()
  22.     }
  23.     openCustomDocument(uri){
  24.         // 創建CustomDocument
  25.         return Promise.resolve(new CatCustomDocument(uri));
  26.     }
  27.     resolveCustomEditor(document, webViewPanel){
  28.         // 關聯CustomDocument與WebViewPanel
  29.     }
  30.     saveCustomDocument(document) {
  31.         // 保存document
  32.         return true;
  33.     }
  34.     saveCustomDocumentAs(document, destination) {
  35.         // document另存爲至destination
  36.         return true;
  37.     }
  38. }

自定義編輯器提供了新的插件激活事件onCustomEditor

  1. // package.json 申明可以激活插件的自定義編輯器類型
  2. "activationEvents": [
  3.     "onCustomEditor:catEdit.catScratch"
  4. ]
  1. // 插件激活入口, 通常是extension.js文件
  2. function activate(context) {
  3.     hx.window.registerCustomEditorProvider("catEdit.catScratch", new CatCustomEditorProvider());
  4. }
  • 其他
  1. // 在合適的位置向HBuilderX發送文檔變動事件，編輯器標籤卡變爲dirty狀態
  2. provider.onDidChangeCustomDocument.fire(new CustomDocumentEditEvent(document));