Monaco Editor

使用过的api

monaco.languages.getLanguages() 方法，获取 Monaco Editor 中支持的所有语言的信息
editor.setValue(val)：设置内容
editor.getValue()：获取内容
editor.updateOptions({ fontSize: 20 })：修改属性

添加自定义action并使用(通过按钮调用api，如格式化代码，搜索，右键等，通过editor._actions可以获取到所有默认action)

// 添加
editor.addAction({
    id: "myAction",
    label: "My Action Label",
    run: function (editor) {
        console.log("***自定义action的editor***", editor);
    },
});
// 使用方法1
editor.getAction("myAction").run().then(() => {
    alert("'myAction'运行成功");
});
// 使用方法二
editor.trigger('自定义的action', 'myAction')

registerCompletionItemProvider方法的使用

描述：可以进行代码自动补全和输入某个字符提示后续代码
参数1：针对的语言

参数2：对象，配置项

provideCompletionItems：主要用于配置
- model：当前文本模型。
- position：包含正在输入的位置信息的对象。
- context：包含有关代码补全请求上下文的信息的对象。
- token：用于取消长时间运行的操作的 CancellationToken。
- 返回值里有suggestions 和incomplete (可选属性，用于表示当前代码补全结果是否不完整)。
triggerCharacters：数组，表示触发代码补全的字符列表，建议只有1个

resolveCompletionItem：可选的额外步骤，用于在代码提示项被选择后进一步处理这些建议

resolveCompletionItem: async (item, token) => {
    if (item.label === 'console') {
    item.detail = 'Outputs a message to the console';
    item.documentation = 'See also: console.debug, console.info, console.warn, console.error';
    item.insertText = new monaco.TextInsertionEdit(6, '.log');
    } else if (item.label === 'alert') {
    item.detail = 'Displays an alert dialog with the specified message and an OK button';
    item.documentation = 'For more information: https://developer.mozilla.org/en-US/docs/Web/API/Window/alert';
    }
    return item;
}

代码示例：

  monaco.languages.registerCompletionItemProvider("javascript", {
      provideCompletionItems(model, position, context, token) {
          var textUntilPosition = model.getValueInRange({
            startLineNumber: 1,
            startColumn: 1,
            endLineNumber: position.lineNumber,
            endColumn: position.column,
          });
          // 实现输入htt. 后面会提示method1和method2
          if (/htt\.$/.test(textUntilPosition)) {
            return {
              suggestions: [
                {
                  label: "method1",
                  kind: monaco.languages.CompletionItemKind.Function,
                  detail: "这是一个console.log自动补全的示例detail",
                  documentation: "console.log(`这是打印的内容`)",
                  insertText: "method1", //插入的内容
                },
                {
                  label: "method2",
                  kind: monaco.languages.CompletionItemKind.Function,
                  insertText: "method2", //插入的内容
                },
              ],
            };
          }
          return {
            // 代码补全
            suggestions: [
              {
                label: "log",
                kind: monaco.languages.CompletionItemKind.Snippet, //Class，Color，Constant，Constructor，Customcolor，Enum，EnumMember，Event，Field，File，Folder，Function，Interface，Issue，Keyword，Method，Module，  Operator，Property，Reference，Snippet，Struct，Text，TypeParameter，Unit，User，Value，Variable，
                detail: "这是一个console.log自动补全的示例detail",
                documentation: "console.log(`这是打印的内容`)",
                insertText: "console.log(`$1`);", //插入的内容
                insertTextRules:
                  monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
                preselect: true, // 该选项出现后，就会被默认选中。一个选项列表只会有一个预选中。如果有多个，则选中最匹配的。
                tags: [monaco.languages.CompletionItemTag.Deprecated], // label会有条横线
                // additionalTextEdits: [
                //   {
                //     range: {
                //       endColumn: "11",
                //       endLineNumber: "11",
                //       startColumn: "11",
                //       startLineNumber: "11",
                //     },
                //     text: `我要引入一个包`,
                //     forceMoveMarkers: true,
                //   },
                //   {
                //     range: {
                //       endColumn: "2",
                //       endLineNumber: "2",
                //       startColumn: "2",
                //       startLineNumber: "2",
                //     },
                //     text: `// 我是备注`,
                //     forceMoveMarkers: true,
                //   },
                // ], // 在指定位置，追加或替换内容的
                command: {
                  id: "editor.action.formatDocument",
                  title: "选中这个建议选项后，触发格式化操作",
                }, //让其在选中后，执行搜索操作或者执行格式化操作
              },
            ],
          };
      },
      triggerCharacters: ['.'],// 遇到.时会触发函数
    });

默认actions

以下是 Monaco Editor 的默认 actions 列表，每个 action 都标注了英文名称和中文解释：

editor.action.addCommentLine：添加行注释（Toggle Line Comment）
editor.action.addCursorsToBottom：在文件尾部添加光标（Add Cursors To Bottom）
editor.action.addCursorsToTop：在文件开头添加光标（Add Cursors To Top）
editor.action.addSelectionToNextFindMatch：选取当前匹配后的下一个匹配项（Add Selection To Next Find Match）
editor.action.addSelectionToPreviousFindMatch：选取当前匹配前的上一个匹配项（Add Selection To Previous Find Match）
editor.action.centerLineInViewport：将当前行垂直居中（Center Line In Viewport）
editor.action.clipboardCopyAction：复制当前选中内容到剪切板（Copy）
editor.action.clipboardCutAction：剪切当前选中内容到剪切板（Cut）
editor.action.clipboardPasteAction：从剪切板中粘贴内容（Paste）
editor.action.commentLine：对选中文本添加或取消行注释（Toggle Line Comment）
editor.action.copyLinesDownAction：复制当前行并粘贴到下一行（Copy Lines Down）
editor.action.copyLinesUpAction：复制当前行并粘贴到上一行（Copy Lines Up）
editor.action.createCursorUndo：撤销所有光标修改（Undo Cursor）
editor.action.cursorColumnSelectDown：向下纵向区域选择行（Cursor Column Select Down）
editor.action.cursorColumnSelectLeft：向左纵向区域选择该行字符（Cursor Column Select Left）
editor.action.cursorColumnSelectPageDown：向下以页面为单位进行纵向区域选择（Cursor Column Select Page Down）
editor.action.cursorColumnSelectPageUp：向上以页面为单位进行纵向区域选择（Cursor Column Select Page Up）
editor.action.cursorColumnSelectRight：向右纵向区域选择该行字符（Cursor Column Select Right）
editor.action.cursorColumnSelectUp：向上纵向区域选择行（Cursor Column Select Up）
editor.action.cursorDown：将光标向下移动（Cursor Down）
editor.action.cursorEnd：将光标定位到行末尾（Cursor End）
editor.action.cursorHalfPageDown：向下移动半个页面距离（Cursor Half Page Down）
editor.action.cursorHalfPageUp：向上移动半个页面距离（Cursor Half Page Up）
editor.action.cursorHome：将光标定位到行首（Cursor Home）
editor.action.cursorLeft：将光标向左移动（Cursor Left）
editor.action.cursorPageDown：向下翻页（Cursor Page Down）
editor.action.cursorPageUp：向上翻页（Cursor Page Up）
editor.action.cursorRight：将光标向右移动（Cursor Right）
editor.action.cursorTop：将光标定位到文件开头（Cursor Top）
editor.action.cursorUp：将光标向上移动（Cursor Up）
editor.action.deleteLines：删除当前行或选中的多行（Delete Lines）
editor.action.deleteAllLeft：删除光标到行首的所有内容（Delete All Left）
editor.action.deleteAllRight：删除光标到行尾的所有内容（Delete All Right）
editor.action.deleteLeft：删除光标前的字符（Delete Left）
editor.action.deleteRight：删除光标后的字符（Delete Right）
editor.action.duplicateSelection：复制并插入一份当前选中内容（Duplicate Selection）
editor.action.editor.action.insertSnippet：插入代码片段（Insert Snippet）
editor.action.filterActions：将行为过滤器或快捷键过滤器应用于列表（Filter Actions）
editor.action.goToDeclaration：跳转到变量声明处（Go to Declaration）
editor.action.goToImplementation：跳转到变量实现处（Go to Implementation）
editor.action.goToTypeDefinition：查找类型定义（Go to Type Definition）
editor.action.insertCursorAbove：插入一个向上的光标（Insert Cursor Above）
editor.action.insertCursorAtEndOfEachLineSelected：插入在每行末尾的光标(Insert Cursor at End of Each Line Selected)
editor.action.insertCursorBelow：插入一个向下的光标（Insert Cursor Below）
editor.action.insertLineAfter：在当前行下面插入一行（Insert Line After）
editor.action.insertLineBefore：在当前行上面插入一行（Insert Line Before）
editor.action.indentLines：将选中行缩进（Indent Lines）
editor.action.indentUsingSpaces：使用空格进行缩进（Indent Using Spaces）
editor.action.intersectSelections：保留所有光标的交集，取消其余光标（Intersect Selections）
editor.action.moveLinesDownAction：将选中的行向下移动一行（Move Lines Down）
editor.action.moveLinesUpAction：将选中的行向上移动一行（Move Lines Up）
editor.action.moveSelectionToNextFindMatch：将光标移到下一个匹配项处，并取消选择（Move Selection to Next Find Match）
editor.action.moveSelectionToPreviousFindMatch：将光标移到上一个匹配项处，并取消选择（Move Selection to Previous Find Match）
editor.action.moveToCenter：将光标定位到屏幕中央（Move To Center）
editor.action.navigateToNextError：跳转到下一个错误（Go to Next Error）
editor.action.navigateToPreviousError：跳转到上一个错误（Go to Previous Error）
editor.action.newLineAbove：在当前行上方新建一行（New Line Above）
editor.action.newLineBelow：在当前行下方新建一行（New Line Below）
editor.action.nextMatchFindAction：查找下一个匹配项（Next Match Find）
editor.action.outdentLines：将选中行的缩进减少（Outdent Lines）
editor.action.outdentUsingSpaces：使用空格减少缩进（Outdent Using Spaces）
editor.action.pasteSelection：粘贴文本并替换当前选中内容（Paste Selection）
editor.action.quickFix：快速修复错误（Quick Fix）
editor.action.quickOutline：打开当前文件的大纲视图（Quick Outline）
editor.action.redo：重做最近一次取消操作（Redo）
editor.action.referenceSearch.trigger：查找该变量的所有引用（Find All References）
editor.action.removeCommentLine：移除行注释（Toggle Line Comment）
editor.action.replaceAll：在全局范围内查找并替换所有匹配项；（Replace All）；通常使用 Command+Shift+H 快捷键

posted @ 2023-06-09 11:31 风紧·扯呼阅读(1771) 评论(0) 编辑收藏举报

刷新页面返回顶部

htt-blog

Monaco Editor

# Monaco Editor

# 使用过的api

# registerCompletionItemProvider方法的使用

# 默认actions

Monaco Editor

使用过的api

registerCompletionItemProvider方法的使用

默认actions