為什么要寫這篇文章？

最近開發了一個簡單的在線代碼編輯器，基于 Monaco Editor 實現，沒有了解過 Monaco 的人可能不知道，我們常用的 VS Code 也是基于它實現的~

回到正題，Monaco Editor 有一份完整的官方文檔，那為什么還要寫這個文章？因為官方文檔是在是太難用了，api 難找不說，找到了也是看得云里霧里，可能是我查閱的姿勢不對吧，歡迎有文檔使用經驗的朋友在評論中指教~

話不多說，下面開始總結我在開發中的常用功能。

開始使用

我使用的是 Vue 版本的包 monaco-editor-vue，使用方式如下：

theme="vs-dark"

language="javascript"

:editorMounted="onEditorMounted"

:options="options"

@change="onChange"

>

export default {

name: "App",

components: {

MonacoEditor

},

data() {

return {

options: {

value: '', // 初始值

foldingStrategy: 'indentation', // 代碼可分小段折疊

automaticLayout: true, // 自適應布局

overviewRulerBorder: false, // 不要滾動條的邊框

autoClosingBrackets: true,

tabSize: 2, // tab 縮進長度

minimap: {

enabled: false, // 不要小地圖

},

},

}

},

methods: {

onChange(value) {

console.log(value);

}

onEditorMounted(editor, monaco) {

window.editor = editor

window.monaco = monaco

},

}

};

復制代碼

常用 api

editor.getValue()

獲取編輯器中的所有文本，并生成一個字符串返回，會保留所有信息(換行、縮進、注釋等等)。

editor.getSelection()

獲取編輯器中被選中文案的 range ，返回一個對象，如下：

{

startLineNumber: 0,

startColumnNumber: 0,

endLineNumber: 0,

endColumnNumber: 0,

}

復制代碼

editor.getModel()

獲取編輯器當前的 textmodel，一般不會直接使用，通過 textmodel 可以對文本各種操作。

editor.getModel().findMatches(str|regexp)

功能和 “? + F” 一致，通過字符串或正則表達式查找編輯器內匹配的文本，并返回匹配文本 range 的集合。

editor.getModel().getValueInRange(range)

通過 range 獲取范圍內的文本，返回一個字符串。

editor.getModel().getLinesContent(lineNumber)

如果傳入 lineNumber，則返回對應行的文本字符串，不傳參則返回所有行的文本字符串的集合。

editor.executeEdits()

在指定位置插入代碼，跟 editor.setValue() 不同的地方是，可以用 “? + Z” 撤銷輸入。

editor.executeEdits('insert-code', [

{

range: {

startLineNumber,

startColumn,

endLineNumber,

endColumn,

},

text,

},

])

復制代碼

editor.addAction()

在右鍵菜單里增加一欄自定義的操作。

this.editor.addAction({

id: '', // 菜單項 id

label: '', // 菜單項名稱

keybindings: [this.monaco.KeyMod.CtrlCmd | this.monaco.KeyCode.KEY_J], // 綁定快捷鍵

contextMenuGroupId: '9_cutcopypaste', // 所屬菜單的分組

run: () => {}, // 點擊后執行的操作

})

復制代碼

monaco.editor.setModelMarkers()

在編輯器中用波浪線標出錯誤提示。

monaco.editor.setModelMarkers(editor.getModel(), 'owner', [

{

startLineNumber,

startColumn,

endLineNumber,

endColumn,

message, // 提示文案

severity: monaco.MarkerSeverity.Error, // 提示的類型

},

])

復制代碼

招聘

微信支付招聘前后端開發，歡迎推薦，簡歷可發送到 timorliang@tencent.com ~

總結

以上是生活随笔為你收集整理的linux终端怎么设置monaco,Monaco Editor 使用指南的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。