扩展编辑器面板
在插件的 package.json 文件中定义 字段如下:
目前编辑器扩展系统支持每个插件注册一个面板,面板的信息通过 panel
字段对应的对象来申明。其中 main
字段用来标记面板的入口程序,和整个扩展包的入口程序概念类似,panel.main
字段指定的文件路径相当于扩展包在渲染进程的入口。
另外值得注意的是 type
字段规定了面板的基本类型:
- :可停靠面板,打开该面板后,可以通过拖拽面板标签到编辑器里,实现扩展面板嵌入到编辑器中。下面我们介绍的面板入口程序都是按照可停靠面板的要求声明的。
要定义一份面板的入口程序,我们需要通过 Editor.Panel.extend()
函数来注册面板。如以下代码:
在这份对象代码中,我们定义了面板的样式(style)和模板(template),并通过定义选择器 $
获得面板元素,最后在ready 初始化回调函数中中对面板元素的事件进行注册和处理。
在完成了上述操作后,我们就可以通过在主进程(入口程序)调用 激活我们的面板窗口。 关于 Editor.Panel
接口的用法请参考 Panel API。
更多关于面板定义对象字段的说明,请阅读。
为了方便我们打开窗口,通常我们会将打开窗口的方法注册到主菜单中,并通过发消息给我们的插件主进程代码来完成。要做到这些事情,我们需要在我们的 package.json 中注册主进程入口函数和主菜单选项:
一切顺利的话,你将可以通过主菜单,打开如下的面板:
更多关于在 package.json
文件中注册面板时的字段描述,请阅读面板字段参考。
通常我们需要在窗口面板中设置一些 UI,然后通过发送 IPC 消息将任务交给主进程处理。这里我们可以通过Editor.Ipc
模块来完成。在我们上面定义的 index.js 中,我们可以通过在 ready()
函数中处理按钮消息来达成。
更全面和详细的主进程和面板之间的 IPC 通讯交互方法,请继续阅读 。