Appearance
在自定义工具栏上添加按钮的相关事件
OnCustomToolBarCommand
语法
javascript
OnCustomToolBarCommand(ButtonIndex)
参数
名称 | 必选/可选 | 数据类型 | 说明 |
---|---|---|---|
ButtonIndex | 必选 | long | 自定义按钮位置 |
说明
该事件处理自己定义的自定义工具栏的命令点击事件。 参数为调用AddCustomToolButton的返回值,即自定义工具栏上面的按钮的序号。 用户可以在该事件判断点击的按钮执行相应的方法。
HTML绑定示例
html
<object name='webwps' id='webwps_id' type='application/ntko-plug'
data='/opt/kingsoft/wps-office/office6/mui/default/templates/Normal.dotm'
width='1000' height='600'
ForOnCustomToolBarCommand='OnCustomToolBarCommand'>
</object>
示例代码
javascript
// 自定义工具栏按钮命令事件处理
function OnCustomToolBarCommand(ButtonIndex) {
console.log("OnCustomToolBarCommand成功回调");
console.log("按钮索引:", ButtonIndex);
// 根据按钮索引处理不同操作
switch(ButtonIndex) {
case 0:
handleNewDocument();
break;
case 1:
handleOpenDocument();
break;
case 2:
handleSaveDocument();
break;
case 3:
handlePrintDocument();
break;
case 4:
handleCopyDocument();
break;
case 5:
handlePasteDocument();
break;
case 6:
handleCutDocument();
break;
case 7:
handleUndoDocument();
break;
case 8:
handleRedoDocument();
break;
case 9:
handleFindDocument();
break;
case 10:
handleReplaceDocument();
break;
default:
console.log("未知按钮索引:", ButtonIndex);
}
}
// 处理新建文档
function handleNewDocument() {
console.log("执行新建文档操作");
try {
OCX_OBJ.New();
console.log("新建文档成功");
showSuccessMessage("新建文档成功");
} catch (error) {
console.error("新建文档失败:", error);
showErrorMessage("新建文档失败:" + error.message);
}
}
// 处理打开文档
function handleOpenDocument() {
console.log("执行打开文档操作");
try {
OCX_OBJ.Open();
console.log("打开文档成功");
showSuccessMessage("打开文档成功");
} catch (error) {
console.error("打开文档失败:", error);
showErrorMessage("打开文档失败:" + error.message);
}
}
// 处理保存文档
function handleSaveDocument() {
console.log("执行保存文档操作");
try {
OCX_OBJ.Save();
console.log("保存文档成功");
showSuccessMessage("保存文档成功");
} catch (error) {
console.error("保存文档失败:", error);
showErrorMessage("保存文档失败:" + error.message);
}
}
// 处理打印文档
function handlePrintDocument() {
console.log("执行打印文档操作");
try {
OCX_OBJ.Print();
console.log("打印文档成功");
showSuccessMessage("打印文档成功");
} catch (error) {
console.error("打印文档失败:", error);
showErrorMessage("打印文档失败:" + error.message);
}
}
// 处理复制文档
function handleCopyDocument() {
console.log("执行复制文档操作");
try {
OCX_OBJ.Copy();
console.log("复制文档成功");
showSuccessMessage("复制文档成功");
} catch (error) {
console.error("复制文档失败:", error);
showErrorMessage("复制文档失败:" + error.message);
}
}
// 处理粘贴文档
function handlePasteDocument() {
console.log("执行粘贴文档操作");
try {
OCX_OBJ.Paste();
console.log("粘贴文档成功");
showSuccessMessage("粘贴文档成功");
} catch (error) {
console.error("粘贴文档失败:", error);
showErrorMessage("粘贴文档失败:" + error.message);
}
}
// 处理剪切文档
function handleCutDocument() {
console.log("执行剪切文档操作");
try {
OCX_OBJ.Cut();
console.log("剪切文档成功");
showSuccessMessage("剪切文档成功");
} catch (error) {
console.error("剪切文档失败:", error);
showErrorMessage("剪切文档失败:" + error.message);
}
}
// 处理撤销文档
function handleUndoDocument() {
console.log("执行撤销文档操作");
try {
OCX_OBJ.Undo();
console.log("撤销文档成功");
showSuccessMessage("撤销文档成功");
} catch (error) {
console.error("撤销文档失败:", error);
showErrorMessage("撤销文档失败:" + error.message);
}
}
// 处理重做文档
function handleRedoDocument() {
console.log("执行重做文档操作");
try {
OCX_OBJ.Redo();
console.log("重做文档成功");
showSuccessMessage("重做文档成功");
} catch (error) {
console.error("重做文档失败:", error);
showErrorMessage("重做文档失败:" + error.message);
}
}
// 处理查找文档
function handleFindDocument() {
console.log("执行查找文档操作");
try {
OCX_OBJ.Find();
console.log("查找文档成功");
showSuccessMessage("查找文档成功");
} catch (error) {
console.error("查找文档失败:", error);
showErrorMessage("查找文档失败:" + error.message);
}
}
// 处理替换文档
function handleReplaceDocument() {
console.log("执行替换文档操作");
try {
OCX_OBJ.Replace();
console.log("替换文档成功");
showSuccessMessage("替换文档成功");
} catch (error) {
console.error("替换文档失败:", error);
showErrorMessage("替换文档失败:" + error.message);
}
}
完整示例
自定义工具栏事件管理器
javascript
// 自定义工具栏事件管理器
class CustomToolBarEventManager {
constructor() {
this.buttonHandlers = new Map();
this.buttonStates = new Map();
this.buttonInfo = new Map();
this.initButtonHandlers();
}
// 初始化按钮处理器
initButtonHandlers() {
// 新建按钮
this.buttonHandlers.set(0, {
name: "新建",
handler: this.handleNewDocument.bind(this),
enabled: true,
icon: "new",
shortcut: "Ctrl+N"
});
// 打开按钮
this.buttonHandlers.set(1, {
name: "打开",
handler: this.handleOpenDocument.bind(this),
enabled: true,
icon: "open",
shortcut: "Ctrl+O"
});
// 保存按钮
this.buttonHandlers.set(2, {
name: "保存",
handler: this.handleSaveDocument.bind(this),
enabled: false,
icon: "save",
shortcut: "Ctrl+S"
});
// 打印按钮
this.buttonHandlers.set(3, {
name: "打印",
handler: this.handlePrintDocument.bind(this),
enabled: false,
icon: "print",
shortcut: "Ctrl+P"
});
// 复制按钮
this.buttonHandlers.set(4, {
name: "复制",
handler: this.handleCopyDocument.bind(this),
enabled: false,
icon: "copy",
shortcut: "Ctrl+C"
});
// 粘贴按钮
this.buttonHandlers.set(5, {
name: "粘贴",
handler: this.handlePasteDocument.bind(this),
enabled: false,
icon: "paste",
shortcut: "Ctrl+V"
});
// 剪切按钮
this.buttonHandlers.set(6, {
name: "剪切",
handler: this.handleCutDocument.bind(this),
enabled: false,
icon: "cut",
shortcut: "Ctrl+X"
});
// 撤销按钮
this.buttonHandlers.set(7, {
name: "撤销",
handler: this.handleUndoDocument.bind(this),
enabled: false,
icon: "undo",
shortcut: "Ctrl+Z"
});
// 重做按钮
this.buttonHandlers.set(8, {
name: "重做",
handler: this.handleRedoDocument.bind(this),
enabled: false,
icon: "redo",
shortcut: "Ctrl+Y"
});
// 查找按钮
this.buttonHandlers.set(9, {
name: "查找",
handler: this.handleFindDocument.bind(this),
enabled: false,
icon: "find",
shortcut: "Ctrl+F"
});
// 替换按钮
this.buttonHandlers.set(10, {
name: "替换",
handler: this.handleReplaceDocument.bind(this),
enabled: false,
icon: "replace",
shortcut: "Ctrl+H"
});
}
// 处理按钮点击事件
handleButtonClick(buttonIndex) {
console.log("处理按钮点击事件:", buttonIndex);
// 检查按钮是否存在
if (!this.buttonHandlers.has(buttonIndex)) {
console.warn("未知按钮索引:", buttonIndex);
return;
}
// 获取按钮信息
var buttonInfo = this.buttonHandlers.get(buttonIndex);
// 检查按钮是否启用
if (!buttonInfo.enabled) {
console.warn("按钮已禁用:", buttonInfo.name);
showWarningMessage("该功能当前不可用");
return;
}
// 执行按钮处理函数
try {
buttonInfo.handler(buttonIndex);
} catch (error) {
console.error("按钮处理失败:", error);
showErrorMessage("操作失败:" + error.message);
}
}
// 处理新建文档
handleNewDocument(buttonIndex) {
console.log("执行新建文档");
try {
OCX_OBJ.New();
console.log("新建文档成功");
showSuccessMessage("新建文档成功");
// 更新按钮状态
this.updateButtonStates();
} catch (error) {
console.error("新建文档失败:", error);
showErrorMessage("新建文档失败:" + error.message);
}
}
// 处理打开文档
handleOpenDocument(buttonIndex) {
console.log("执行打开文档");
try {
OCX_OBJ.Open();
console.log("打开文档成功");
showSuccessMessage("打开文档成功");
// 更新按钮状态
this.updateButtonStates();
} catch (error) {
console.error("打开文档失败:", error);
showErrorMessage("打开文档失败:" + error.message);
}
}
// 处理保存文档
handleSaveDocument(buttonIndex) {
console.log("执行保存文档");
try {
OCX_OBJ.Save();
console.log("保存文档成功");
showSuccessMessage("保存文档成功");
// 更新按钮状态
this.updateButtonStates();
} catch (error) {
console.error("保存文档失败:", error);
showErrorMessage("保存文档失败:" + error.message);
}
}
// 处理打印文档
handlePrintDocument(buttonIndex) {
console.log("执行打印文档");
try {
OCX_OBJ.Print();
console.log("打印文档成功");
showSuccessMessage("打印文档成功");
} catch (error) {
console.error("打印文档失败:", error);
showErrorMessage("打印文档失败:" + error.message);
}
}
// 处理复制文档
handleCopyDocument(buttonIndex) {
console.log("执行复制文档");
try {
OCX_OBJ.Copy();
console.log("复制文档成功");
showSuccessMessage("复制文档成功");
} catch (error) {
console.error("复制文档失败:", error);
showErrorMessage("复制文档失败:" + error.message);
}
}
// 处理粘贴文档
handlePasteDocument(buttonIndex) {
console.log("执行粘贴文档");
try {
OCX_OBJ.Paste();
console.log("粘贴文档成功");
showSuccessMessage("粘贴文档成功");
} catch (error) {
console.error("粘贴文档失败:", error);
showErrorMessage("粘贴文档失败:" + error.message);
}
}
// 处理剪切文档
handleCutDocument(buttonIndex) {
console.log("执行剪切文档");
try {
OCX_OBJ.Cut();
console.log("剪切文档成功");
showSuccessMessage("剪切文档成功");
} catch (error) {
console.error("剪切文档失败:", error);
showErrorMessage("剪切文档失败:" + error.message);
}
}
// 处理撤销文档
handleUndoDocument(buttonIndex) {
console.log("执行撤销文档");
try {
OCX_OBJ.Undo();
console.log("撤销文档成功");
showSuccessMessage("撤销文档成功");
} catch (error) {
console.error("撤销文档失败:", error);
showErrorMessage("撤销文档失败:" + error.message);
}
}
// 处理重做文档
handleRedoDocument(buttonIndex) {
console.log("执行重做文档");
try {
OCX_OBJ.Redo();
console.log("重做文档成功");
showSuccessMessage("重做文档成功");
} catch (error) {
console.error("重做文档失败:", error);
showErrorMessage("重做文档失败:" + error.message);
}
}
// 处理查找文档
handleFindDocument(buttonIndex) {
console.log("执行查找文档");
try {
OCX_OBJ.Find();
console.log("查找文档成功");
showSuccessMessage("查找文档成功");
} catch (error) {
console.error("查找文档失败:", error);
showErrorMessage("查找文档失败:" + error.message);
}
}
// 处理替换文档
handleReplaceDocument(buttonIndex) {
console.log("执行替换文档");
try {
OCX_OBJ.Replace();
console.log("替换文档成功");
showSuccessMessage("替换文档成功");
} catch (error) {
console.error("替换文档失败:", error);
showErrorMessage("替换文档失败:" + error.message);
}
}
// 更新按钮状态
updateButtonStates() {
// 根据文档状态更新按钮状态
var documentState = this.getDocumentState();
// 更新所有按钮状态
for (var [buttonIndex, buttonInfo] of this.buttonHandlers) {
var enabled = this.shouldEnableButton(buttonIndex, documentState);
this.updateButtonState(buttonIndex, enabled);
}
}
// 获取文档状态
getDocumentState() {
try {
return {
isOpen: OCX_OBJ.IsDocumentOpen || false,
isModified: OCX_OBJ.IsDocumentModified || false,
isReadOnly: OCX_OBJ.IsReadOnly || false,
hasContent: OCX_OBJ.HasContent || false,
canUndo: OCX_OBJ.CanUndo || false,
canRedo: OCX_OBJ.CanRedo || false,
hasSelection: OCX_OBJ.HasSelection || false
};
} catch (error) {
console.error("获取文档状态失败:", error);
return {
isOpen: false,
isModified: false,
isReadOnly: false,
hasContent: false,
canUndo: false,
canRedo: false,
hasSelection: false
};
}
}
// 判断是否应该启用按钮
shouldEnableButton(buttonIndex, documentState) {
switch(buttonIndex) {
case 0: // 新建
return true;
case 1: // 打开
return true;
case 2: // 保存
return documentState.isOpen && documentState.isModified && !documentState.isReadOnly;
case 3: // 打印
return documentState.isOpen && documentState.hasContent;
case 4: // 复制
return documentState.isOpen && documentState.hasSelection;
case 5: // 粘贴
return documentState.isOpen && !documentState.isReadOnly;
case 6: // 剪切
return documentState.isOpen && documentState.hasSelection && !documentState.isReadOnly;
case 7: // 撤销
return documentState.isOpen && documentState.canUndo;
case 8: // 重做
return documentState.isOpen && documentState.canRedo;
case 9: // 查找
return documentState.isOpen && documentState.hasContent;
case 10: // 替换
return documentState.isOpen && documentState.hasContent && !documentState.isReadOnly;
default:
return false;
}
}
// 更新按钮状态
updateButtonState(buttonIndex, enabled) {
if (this.buttonHandlers.has(buttonIndex)) {
this.buttonHandlers.get(buttonIndex).enabled = enabled;
this.buttonStates.set(buttonIndex, enabled);
console.log("按钮状态已更新:", buttonIndex, enabled);
}
}
// 启用按钮
enableButton(buttonIndex) {
this.updateButtonState(buttonIndex, true);
}
// 禁用按钮
disableButton(buttonIndex) {
this.updateButtonState(buttonIndex, false);
}
// 获取按钮状态
getButtonState(buttonIndex) {
return this.buttonStates.get(buttonIndex) || false;
}
// 获取按钮信息
getButtonInfo(buttonIndex) {
return this.buttonHandlers.get(buttonIndex);
}
}
// 创建自定义工具栏事件管理器实例
const customToolBarEventManager = new CustomToolBarEventManager();
// 全局事件处理函数
function OnCustomToolBarCommand(ButtonIndex) {
customToolBarEventManager.handleButtonClick(ButtonIndex);
}
工具栏状态管理
javascript
// 工具栏状态管理器
class ToolBarStateManager {
constructor() {
this.buttonStates = new Map();
this.documentState = {
isOpen: false,
isModified: false,
isReadOnly: false,
hasContent: false,
canUndo: false,
canRedo: false,
hasSelection: false
};
this.initStateManager();
}
// 初始化状态管理器
initStateManager() {
// 定期更新状态
setInterval(() => {
this.updateDocumentState();
this.updateButtonStates();
}, 1000); // 每秒更新一次
}
// 更新文档状态
updateDocumentState() {
try {
this.documentState.isOpen = OCX_OBJ.IsDocumentOpen || false;
this.documentState.isModified = OCX_OBJ.IsDocumentModified || false;
this.documentState.isReadOnly = OCX_OBJ.IsReadOnly || false;
this.documentState.hasContent = OCX_OBJ.HasContent || false;
this.documentState.canUndo = OCX_OBJ.CanUndo || false;
this.documentState.canRedo = OCX_OBJ.CanRedo || false;
this.documentState.hasSelection = OCX_OBJ.HasSelection || false;
console.log("文档状态已更新:", this.documentState);
} catch (error) {
console.error("更新文档状态失败:", error);
}
}
// 更新按钮状态
updateButtonStates() {
// 根据文档状态更新按钮状态
this.updateButtonState(0, true); // 新建
this.updateButtonState(1, true); // 打开
this.updateButtonState(2, this.documentState.isOpen && this.documentState.isModified && !this.documentState.isReadOnly); // 保存
this.updateButtonState(3, this.documentState.isOpen && this.documentState.hasContent); // 打印
this.updateButtonState(4, this.documentState.isOpen && this.documentState.hasSelection); // 复制
this.updateButtonState(5, this.documentState.isOpen && !this.documentState.isReadOnly); // 粘贴
this.updateButtonState(6, this.documentState.isOpen && this.documentState.hasSelection && !this.documentState.isReadOnly); // 剪切
this.updateButtonState(7, this.documentState.isOpen && this.documentState.canUndo); // 撤销
this.updateButtonState(8, this.documentState.isOpen && this.documentState.canRedo); // 重做
this.updateButtonState(9, this.documentState.isOpen && this.documentState.hasContent); // 查找
this.updateButtonState(10, this.documentState.isOpen && this.documentState.hasContent && !this.documentState.isReadOnly); // 替换
}
// 更新按钮状态
updateButtonState(buttonIndex, enabled) {
this.buttonStates.set(buttonIndex, enabled);
console.log("按钮状态已更新:", buttonIndex, enabled);
}
// 获取按钮状态
getButtonState(buttonIndex) {
return this.buttonStates.get(buttonIndex) || false;
}
// 启用按钮
enableButton(buttonIndex) {
this.updateButtonState(buttonIndex, true);
}
// 禁用按钮
disableButton(buttonIndex) {
this.updateButtonState(buttonIndex, false);
}
// 检查按钮是否启用
isButtonEnabled(buttonIndex) {
return this.getButtonState(buttonIndex);
}
}
// 创建工具栏状态管理器实例
const toolBarStateManager = new ToolBarStateManager();
工具栏功能增强
javascript
// 工具栏功能增强器
class ToolBarFeatureEnhancer {
constructor() {
this.features = new Map();
this.shortcuts = new Map();
this.initFeatures();
}
// 初始化功能
initFeatures() {
this.features.set('new', {
enabled: true,
shortcut: 'Ctrl+N',
description: '新建文档'
});
this.features.set('open', {
enabled: true,
shortcut: 'Ctrl+O',
description: '打开文档'
});
this.features.set('save', {
enabled: true,
shortcut: 'Ctrl+S',
description: '保存文档'
});
this.features.set('print', {
enabled: true,
shortcut: 'Ctrl+P',
description: '打印文档'
});
this.features.set('copy', {
enabled: true,
shortcut: 'Ctrl+C',
description: '复制内容'
});
this.features.set('paste', {
enabled: true,
shortcut: 'Ctrl+V',
description: '粘贴内容'
});
this.features.set('cut', {
enabled: true,
shortcut: 'Ctrl+X',
description: '剪切内容'
});
this.features.set('undo', {
enabled: true,
shortcut: 'Ctrl+Z',
description: '撤销操作'
});
this.features.set('redo', {
enabled: true,
shortcut: 'Ctrl+Y',
description: '重做操作'
});
this.features.set('find', {
enabled: true,
shortcut: 'Ctrl+F',
description: '查找内容'
});
this.features.set('replace', {
enabled: true,
shortcut: 'Ctrl+H',
description: '替换内容'
});
}
// 启用功能
enableFeature(featureName) {
if (this.features.has(featureName)) {
this.features.get(featureName).enabled = true;
console.log("功能已启用:", featureName);
}
}
// 禁用功能
disableFeature(featureName) {
if (this.features.has(featureName)) {
this.features.get(featureName).enabled = false;
console.log("功能已禁用:", featureName);
}
}
// 检查功能是否启用
isFeatureEnabled(featureName) {
return this.features.has(featureName) && this.features.get(featureName).enabled;
}
// 获取功能信息
getFeatureInfo(featureName) {
return this.features.get(featureName);
}
// 处理按钮点击
handleButtonClick(buttonIndex) {
var featureName = this.getFeatureNameByIndex(buttonIndex);
if (featureName && this.isFeatureEnabled(featureName)) {
console.log("执行功能:", featureName);
this.executeFeature(featureName);
} else {
console.warn("功能不可用:", featureName);
showWarningMessage("该功能当前不可用");
}
}
// 根据索引获取功能名称
getFeatureNameByIndex(buttonIndex) {
var featureMap = {
0: 'new',
1: 'open',
2: 'save',
3: 'print',
4: 'copy',
5: 'paste',
6: 'cut',
7: 'undo',
8: 'redo',
9: 'find',
10: 'replace'
};
return featureMap[buttonIndex];
}
// 执行功能
executeFeature(featureName) {
switch(featureName) {
case 'new':
this.executeNew();
break;
case 'open':
this.executeOpen();
break;
case 'save':
this.executeSave();
break;
case 'print':
this.executePrint();
break;
case 'copy':
this.executeCopy();
break;
case 'paste':
this.executePaste();
break;
case 'cut':
this.executeCut();
break;
case 'undo':
this.executeUndo();
break;
case 'redo':
this.executeRedo();
break;
case 'find':
this.executeFind();
break;
case 'replace':
this.executeReplace();
break;
default:
console.warn("未知功能:", featureName);
}
}
// 执行新建
executeNew() {
console.log("执行新建");
// 实现新建逻辑
}
// 执行打开
executeOpen() {
console.log("执行打开");
// 实现打开逻辑
}
// 执行保存
executeSave() {
console.log("执行保存");
// 实现保存逻辑
}
// 执行打印
executePrint() {
console.log("执行打印");
// 实现打印逻辑
}
// 执行复制
executeCopy() {
console.log("执行复制");
// 实现复制逻辑
}
// 执行粘贴
executePaste() {
console.log("执行粘贴");
// 实现粘贴逻辑
}
// 执行剪切
executeCut() {
console.log("执行剪切");
// 实现剪切逻辑
}
// 执行撤销
executeUndo() {
console.log("执行撤销");
// 实现撤销逻辑
}
// 执行重做
executeRedo() {
console.log("执行重做");
// 实现重做逻辑
}
// 执行查找
executeFind() {
console.log("执行查找");
// 实现查找逻辑
}
// 执行替换
executeReplace() {
console.log("执行替换");
// 实现替换逻辑
}
}
// 创建工具栏功能增强器实例
const toolBarFeatureEnhancer = new ToolBarFeatureEnhancer();
注意事项
事件绑定:
- 确保在HTML中正确绑定事件处理函数
- 事件函数名要与HTML中的属性值一致
- 注意大小写和拼写
参数处理:
- 检查参数的有效性
- 处理可选参数的情况
- 注意参数的数据类型
按钮识别:
- 使用按钮索引识别按钮
- 按钮索引从0开始
- 注意按钮索引的有效性
状态管理:
- 实现按钮状态管理
- 根据文档状态启用/禁用按钮
- 处理按钮状态变化
错误处理:
- 处理按钮操作失败的情况
- 提供用户友好的错误信息
- 记录操作日志
性能优化:
- 避免在事件处理中执行耗时操作
- 合理使用异步操作
- 避免重复处理
用户体验:
- 提供及时的状态反馈
- 显示操作进度
- 处理用户交互
兼容性:
- 考虑不同浏览器的兼容性
- 处理不同版本的差异
- 测试各种场景