如何扩展一个自定义编辑器？

从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));