linux终端怎么设置monaco,Monaco Editor 使用指南
為什么要寫這篇文章？
最近開發了一個簡單的在線代碼編輯器，基于 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 使用指南的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： html整合vue elementui,
- 下一篇： java保存文件到linux指定目录_怎