B2B网络软件

标题: AWIROK软件编辑器自定义右键菜单 [打印本页]

作者: YYPOST群发软件    时间: 9 小时前
标题: AWIROK软件编辑器自定义右键菜单
AWIROK软件编辑器自定义右键菜单


AWIROK软件编辑器自定义右键菜单 B2B网络软件

function setupEditorActions(editor) {
// 定义 addAction 函数
function addAction(label, order, textToInsert) {
// 添加自定义右键菜单项的逻辑
}

// 定义 UIControl 函数
function UIControl(label, order) {
// 添加自定义右键菜单项的逻辑
}

// 调用 UIControl 函数以添加 "控件调用" 右键菜单项
UIControl('控件调用', 0);

// 调用 addAction 函数以添加 "if..." 右键菜单项
addAction('if...', 1,
`
if(){

}
`
);

// 调用 addAction 函数以添加 "if...else" 右键菜单项
addAction('if...else', 2,
`
if(){

}else{

}
`
);

// 调用 addAction 函数以添加 "for..i" 右键菜单项
addAction('for..i', 3,
`
for(let i=0;i<10;i++){

}
`
);
}


详细说明

1. 定义 setupEditorActions 函数

function setupEditorActions(editor) {

  • 作用: 这是一个设置编辑器操作的函数,接受一个 editor 对象作为参数,该对象是 Monaco Editor 的实例。

2. 定义 addAction 函数

function addAction(label, order, textToInsert) {
    editor.addAction({
        id: 'menu-item-' + label,
        label: label,
        contextMenuGroupId: 'custom',
        contextMenuOrder: order,
        run: function (ed) {
            // 插入文本的逻辑
            const position = ed.getPosition();
            ed.executeEdits('', [{
                range: new monaco.Range(position.lineNumber, position.column, position.lineNumber, position.column),
                text: textToInsert,
                forceMoveMarkers: true
            }]);
        }
    });
}

  • 作用: 这个函数用于向编辑器添加自定义右键菜单项。
  • 参数:
    • label: 菜单项的显示文本。
    • order: 菜单项在组中的顺序。
    • textToInsert: 当点击菜单项时要插入的文本。
  • editor.addAction: 添加一个自定义操作到编辑器。
    • id: 操作的唯一标识符,通常是菜单项的标签加前缀。
    • label: 菜单项的显示文本。
    • contextMenuGroupId: 菜单项所在的组,这里设置为 'custom'
    • contextMenuOrder: 菜单项在组中的顺序。
    • run: 点击菜单项时执行的函数。在这个函数中,获取当前光标位置并插入指定的文本。
    • getPosition: 获取当前光标的位置。
    • executeEdits: 在指定位置插入文本。
    • new monaco.Range: 定义插入文本的范围,这里是从当前光标位置开始,范围为零(即插入在光标位置)。
    • text: 要插入的文本。
    • forceMoveMarkers: 是否强制移动标记。

3. 定义 UIControl 函数

function UIControl(label, order) {
    editor.addAction({
        id: 'menu-item-' + label,
        label: label,
        contextMenuGroupId: 'custom',
        contextMenuOrder: order,
        run: function (ed) {
            // 插入文本的逻辑
            aiwork.showFastUIMenu();
        }
    });
}

  • 作用: 这个函数用于向编辑器添加一个自定义右键菜单项,该菜单项执行特定的命令(例如调用某个 UI 控制菜单)。
  • 参数:
    • label: 菜单项的显示文本。
    • order: 菜单项在组中的顺序。
  • editor.addAction: 添加一个自定义操作到编辑器。
    • id: 操作的唯一标识符,通常是菜单项的标签加前缀。
    • label: 菜单项的显示文本。
    • contextMenuGroupId: 菜单项所在的组,这里设置为 'custom'
    • contextMenuOrder: 菜单项在组中的顺序。
    • run: 点击菜单项时执行的函数。在这个函数中,调用 aiwork.showFastUIMenu() 来执行特定的命令。
    • aiwork.showFastUIMenu: 假设这是一个已经定义的函数,用于显示某个快速 UI 菜单。

4. 调用 UIControl 函数

UIControl('控件调用', 0);

  • 作用: 调用 UIControl 函数来添加一个名为 “控件调用” 的右键菜单项,并设置其在组中的顺序为 0

5. 调用 addAction 函数

addAction('if...', 1,
`
if(){
    
}
`
);

  • 作用: 调用 addAction 函数来添加一个名为 “if…” 的右键菜单项,并设置其在组中的顺序为 1
  • 插入的文本:
if(){
    
}

6. 调用 addAction 函数

addAction('if...else', 2,
`
if(){

}else{
    
}
`
);

  • 作用: 调用 addAction 函数来添加一个名为 “if…else” 的右键菜单项,并设置其在组中的顺序为 2
  • 插入的文本:
if(){

}else{
    
}

7. 调用 addAction 函数

addAction('for..i', 3,
`
for(let i=0;i<10;i++){

}
`
);

  • 作用: 调用 addAction 函数来添加一个名为 “for…i” 的右键菜单项,并设置其在组中的顺序为 3
  • 插入的文本:
for(let i=0;i<10;i++){

}

总结

  • 这段代码通过 setupEditorActions 函数来设置编辑器的右键菜单项。
  • addAction 函数用于添加插入特定代码的菜单项。
  • UIControl 函数用于添加执行特定命令(例如显示 UI 菜单)的菜单项。
  • 通过 editor.addAction 方法向编辑器添加自定义操作。
  • 每个菜单项都有唯一的 id 和显示的 label
  • contextMenuGroupId 用于指定菜单项所在的组,这里统一为 'custom'
  • contextMenuOrder 用于指定菜单项在组中的顺序。
  • run 函数定义了点击菜单项时要执行的操作,可以是插入文本或调用其他函数。





欢迎光临 B2B网络软件 (http://bbs.niubt.cn/) Powered by Discuz! X3.2