跳到主要内容

工具栏

插件可以放置在工具栏上:创建自己的标签页并填充内容,或者向标准标签页添加按钮。

Toolbar itemToolbar item

创建工具栏项目

  1. 如有必要,使用 AddToolbarMenuItem 方法向工具栏菜单添加项目。

    参数说明:

    名称类型描述
    itemsArray.<ToolbarMenuMainItem>包含主工具栏菜单项的数组

    返回值:该方法不返回任何数据。

    示例:

    Asc.plugin.executeMethod("AddToolbarMenuItem", [{
    guid: Asc.plugin.guid,
    tabs: [
    {
    id: "my_tab",
    text: "MYTAB",
    items: [
    {
    id: "idButton1",
    type: "big-button",
    text: "Test item",
    hint: "test hint",
    data: "test_data",
    lockInViewMode: false,
    icons: "resources/%theme-type%(light|dark)/icon%state%(normal)%scale%(default|*).%extension%(png|svg)",
    items: [],
    },
    ],
    },
    ],
    }])

主工具栏菜单项

主工具栏菜单项.

类型:对象

属性:

名称类型描述
guidstring插件的 guid(全局唯一标识符)
tabsArray.<ToolbarMenuTab>包含当前菜单项工具栏标签页的数组

示例:

const oToolbarMenuMainItem = {
guid: "asc.{9DC93CDB-B576-4F0C-B55E-FCC9C48DD007}",
tabs: [oToolbarMenuTab],
}

工具栏菜单选项卡

工具栏菜单选项卡。

类型: 对象 (object)

属性:

名称类型描述
idstring标签页 ID。标准工具栏标签页 ID 列表见下方
textstring标签页文本。
itemsArray.<ToolbarMenuItem>包含当前标签页工具栏菜单项的数组。

示例:

const oToolbarMenuTab = {
id: "ChatGPT",
text: "AI Assistant",
items: [oToolbarMenuItem],
}

工具栏菜单项

工具栏菜单项。

类型:对象

属性:

名称种类描述
idstring菜单项 ID。
typeToolbarMenuItemType菜单项类型。
textstring菜单项标题。如果此字段为"",工具栏按钮仅显示图标,不显示标题。
hintstring菜单项提示信息。
iconsstring / object菜单项图标(参见插件的config文档)。
disabledboolean指定当前菜单项是否被锁定。
enableToggleboolean指定工具栏菜单项(当 "split == false")或其上半部分(当 "split == true")是否可切换。
lockInViewModeboolean指定工具栏菜单项在视图模式下(如预览、查看表单、断开连接等)是否自动锁定。
separatorboolean指定工具栏菜单项之间是否使用分隔符。
splitboolean指定工具栏菜单项是否拆分为两部分,并包含下拉菜单。
itemsArray.<ToolbarMenuItem>包含当前菜单项上下文菜单项的数组。

示例:

const oToolbarMenuItem = {
id: "MeaningItem",
type: "button",
text: "Meaning",
hint: "Meaning",
icons: "resources/%theme-name%(classic|dark)/%theme-type%(light|dark)/icon%state%(normal|hover)%scale%(default|*).%extension%(png|svg)",
disabled: false,
enableToggle: false,
lockInViewMode: false,
separator: true,
split: true,
items: [
{
id: "onMeaningT",
text: "Explain text in comment",
},
{
id: "onFixSpelling",
text: "Fix spelling & grammar",
},
{
id: "onMakeLonger",
text: "Make longer",
},
{
id: "onMakeShorter",
text: "Make shorter",
},
],
}

工具栏菜单项类型

工具栏菜单项类型。buttonbig-button 两个值等效,可用于指定工具栏按钮。

类型:"button" | "big-button"

标准工具栏标签页 ID

文档编辑器

标签页ID标签页名称
home主页
ins插入
draw绘图
layout布局
links参考
forms表单(仅限 PDF 表单)
review协作
protect保护
view视图
plugins插件

电子表格编辑器

标签页 ID标签页名称
home主页
ins插入
draw绘图
layout布局
formula公式
data数据
pivot数据透视表(当光标位于数据透视表时)
review协作
protect保护
view视图
plugins插件

演示文稿编辑器

标签页 ID标签页名称
home主页
ins插入
draw绘图
transit切换
review协作
view视图
plugins插件

PDF 编辑器

标签页 ID标签页名称
home主页
ins插入
comment评论
view视图
plugins插件

样例

样例1

普通按钮。

{
"text": "caption",
"split": false,
"enableToggle": false
}

Regular buttonRegular button

样例2

一个被拆分为两部分的按钮:按钮的上半部分可以单独切换,下半部分包含一个下拉菜单。

{
"text": "caption",
"split": true,
"enableToggle": true,
"items": []
}

Split and toggled buttonSplit and toggled button

样例3

一个拆分为两部分的按钮,每部分可以单独点击,按钮的下半部分包含一个下拉菜单。

{
"text": "caption",
"split": true,
"enableToggle": true,
"items": []
}

Split buttonSplit button

样例4

带有下拉菜单的按钮,点击按钮时会打开该菜单。

{
"text": "caption",
"split": false,
"enableToggle": false,
"items": []
}

Button with menuButton with menu

样例5

可切换的按钮。

{
"text": "caption",
"split": false,
"enableToggle": true
}

Toggled buttonToggled button

  1. 订阅 onToolbarMenuClick 事件,当工具栏菜单按钮被点击时调用。

    参数说明:

    名称类型描述
    idstring项目 ID。

    示例:

    window.Asc.plugin.event_onToolbarMenuClick = (id) => {
    this._onCustomMenuClick("toolbarMenuEvents", id)
    }

更新工具栏菜单项

要更新工具栏菜单项,请指定更新工具栏菜单项方法。

参数:

名称类型说明
itemsArray.<工具栏主菜单>包含主工具栏菜单项的数组。

返回值:此方法不返回任何值。

示例:

Asc.Buttons.updateToolbarMenu = function(id, name, buttons)
{
let buttonMainToolbar = new Asc.ButtonToolbar(null, id);
buttonMainToolbar.text = name;

let items = {
guid : window.Asc.plugin.guid,
tabs : []
};

buttonMainToolbar.childs = buttons;
for (let i = 0, len = buttons.length; i < len; i++)
buttons[i].parent = buttonMainToolbar;

buttonMainToolbar.toToolbar(items);

if (items.tabs.length > 0)
window.Asc.plugin.executeMethod("UpdateToolbarMenuItem", [items]);
};

点击工具栏项

使用 attachToolbarMenuClickEvent 添加事件监听器,即当工具栏菜单中指定按钮被点击并触发事件时调用的函数。对于每个工具栏菜单按钮,可以通过其 ID 指定单独的事件监听器。

参数说明:

名称类型描述
idstring事件名称
actionfunction事件监听器函数

返回值:此方法不返回任何数据。

示例:

plugin.attachToolbarMenuClickEvent("my_tab", (data) => {
console.log(data)
})