跳转至

工具栏插入菜单实现

最后更新：2024-06-05

一、插入菜单

1.1 插入写作模板

1.2 插入文本块

1.3 Mermaid

1.4 PlantUML

二、功能实现

三、插入文本块

在光标位置之后插入指定的文本块，首先需要获取光标的位置，然后在光标位置之后插入指定文本块。

TypeScript
1
2
3
4
5
function insertTextBlockArticleUpdateDate(mainWindow: Electron.BrowserWindow) {
  import('../../lib/templates/textblock/textblock').then((module) => {
    mainWindow.webContents.send('monaco-insert-text-block-templates', module.article_update_date)
  })
}
TypeScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
window.electron.ipcRenderer.on('monaco-insert-text-block-templates', (_, context: string) => {
    if (context) {
        insertTextAfterCursor(editorInstance, editorCursorPos, context)
    }
})

// 定义一个函数来插入字符串
function insertTextAfterCursor(editor, position, textToInsert: string) {
    if (!position) return
    // 创建一个编辑操作，将字符串插入到光标之后
    const edit = {
        range: new monaco.Range(
            position.lineNumber,
            position.column,
            position.lineNumber,
            position.column
        ), // 这是一个空范围，表示插入位置
        text: textToInsert, // 要插入的文本
        forceMoveMarkers: true // 如果需要，强制移动标记（如断点）
    }

    // 执行编辑操作
    editor.executeEdits('', [edit])
}