本文最后更新于 400 天前，其中的信息可能已经有所发展或是发生改变。
官方：
仓库：https://github.com/microsoft/monaco-editor
文档(英文)：https://microsoft.github.io/monaco-editor/
非官方
文档(中文)：https://aydk.site
创建
create – 创建独立的编辑器实例
在 Monaco Editor 的 create 方法中，可以配置以下项目：
value：字符串，编辑器中要显示的文本值。language：字符串，指定编辑器要使用的语言。lineNumbers：字符串，指定编辑器是否显示行号。可以是"on"、"off"、"relative"。wordWrap：字符串，指定编辑器是否自动换行。可以是"off"、"on"、"wordWrapColumn"、"bounded"。wordWrapColumn：整数，指定当wordWrap设置为"wordWrapColumn"或"bounded"时，编辑器的换行列数。wrappingIndent：字符串，指定编辑器自动换行时的缩进方式。可以是"none"或"same"。readOnly：布尔值，设置为true时，编辑器为只读模式，不允许编辑。theme：字符串，指定编辑器的主题，支持预定义的主题，如"vs"、"vs-dark"，或者自定义主题名称。automaticLayout：布尔值，设置为true时，编辑器会自动根据父容器的大小进行调整布局，设置为false时，需要手动调用layout()方法来调整布局。- 其他更多配置项请参考 Monaco Editor 文档。
案例 ：
<div id="container"></div>
const domElement = document.getElementById('container');
const options = {
value: 'function add(a, b) { return a + b; }',
language: 'javascript'
};
const editor = monaco.editor.create(domElement, options);
console.log(editor.getValue());
createDiffEditor – 创建独立的差异编辑器实例
在 Monaco Editor 的 createDiffEditor 方法中，可以配置以下项目：
automaticLayout：布尔值，设置为true时，编辑器会自动根据父容器的大小进行调整布局，设置为false时，需要手动调用layout()方法来调整布局。readOnly：布尔值，设置为true时，编辑器为只读模式，不允许编辑。theme：字符串，指定编辑器的主题，支持预定义的主题，如"vs"、"vs-dark"，或者自定义主题名称。original：IEditorConstructionOptions对象，用于配置原始文本的编辑器的配置选项。modified：IEditorConstructionOptions对象，用于配置修改后的文本的编辑器的配置选项。
IEditorConstructionOptions 对象具有与单个编辑器的配置选项相同的配置项目，例如：
value：字符串，编辑器中要显示的文本值。language：字符串，指定编辑器要使用的语言。lineNumbers：字符串，指定编辑器是否显示行号。可以是"on"、"off"、"relative"。wordWrap：字符串，指定编辑器是否自动换行。可以是"off"、"on"、"wordWrapColumn"、"bounded"。wordWrapColumn：整数，指定当wordWrap设置为"wordWrapColumn"或"bounded"时，编辑器的换行列数。wrappingIndent：字符串，指定编辑器自动换行时的缩进方式。可以是"none"或"same"。- 其他更多配置项请参考 Monaco Editor 文档。
createDiffNavigator – 疑问？
创建关联两个 create 独立的编辑器？
事件
onDidChangeModelContent
在编辑器的模型内容发生变化时触发。可以通过监听这个事件来实现自定义的模型内容处理逻辑。
this.monacoEditor.onDidChangeModelContent((e) => {
console.log("内容发生变化", JSON.stringify(e, null, 4));
});
问题优化
滚动到下面有空白行
控制编辑器在垂直滚动时是否滚动超过最后一行。
scrollBeyondLastLine: false
移除代码提示
suggestOnTriggerCharacters
用于控制是否在输入触发字符时显示建议。如果启用了该设置，编辑器将在输入触发字符时显示建议。如果禁用了该设置，则不会在输入触发字符时显示建议。
quickSuggestions
用于控制快速建议的行为 / 关闭上下文提示
右键内容去除
contextmenu: false
要在 Monaco Editor 中移除右键菜单，可以通过设置编辑器的 contextmenu 选项为 false 来实现。这样编辑器将不会显示默认的右键菜单。
请参考下面的示例代码：
const editor = monaco.editor.create(container, {
value: 'function hello() {\n\tconsole.log("Hello, world!");\n}\n',
language: 'javascript',
contextmenu: false
});
在上述示例中，我们将 contextmenu 选项设置为 false，这样编辑器将不会显示右键菜单。
如果你已经创建了编辑器实例，可以使用 updateOptions() 方法来更新选项：
editor.updateOptions({ contextmenu: false });
确保在编辑器已创建后，调用 updateOptions() 方法来设置选项，以便移除右键菜单的功能。
添加批注
是的，您可以向 Monaco Editor 的内容添加批注。具体方法是使用 monaco.editor.createModel 函数创建模型，并使用 monaco.editor.setModelMarkers 函数向模型添加批注。下面是一个示例代码：
// 创建编辑器
const editor = monaco.editor.create(document.getElementById("container"), {
value: "Hello, World!",
language: "plaintext"
});
// 创建模型
const model = monaco.editor.createModel(editor.getValue(), "plaintext");
// 添加批注
monaco.editor.setModelMarkers(model, "example", [
{
severity: monaco.MarkerSeverity.Error,
startLineNumber: 1,
startColumn: 1,
endLineNumber: 1,
endColumn: 6,
message: "This is an error message."
},
{
severity: monaco.MarkerSeverity.Warning,
startLineNumber: 1,
startColumn: 8,
endLineNumber: 1,
endColumn: 13,
message: "This is a warning message."
}
]);
// 将模型绑定到编辑器
editor.setModel(model);
在上面的例子中，我们创建了一个简单的 Monaco Editor 实例，并使用 createModel 函数创建了一个模型。然后，通过 setModelMarkers 函数向模型添加了两个批注。最后，我们将模型绑定到编辑器上，以在编辑器中显示批注。
请注意，批注是与模型绑定的，而不是与编辑器绑定的。因此，如果您希望在切换到另一个模型时仍然显示批注，您需要在切换模型之前将批注保存到某个变量中，然后在切换模型后再次添加批注。
报错
路由跳转的时候报错
移除 "monaco-editor-webpack-plugin": "3.1.0" 后问题消失
版本问题
https://blog.csdn.net/qq_37248504/article/details/128193608
其他
beforeCreate() {
axios.get("http://localhost:3000/files/textfileEdit.txt")
.then(response => {
this.monacoEditorValue = response.data;
// console.log(response);
// console.log(response.data);
// 注销重新渲染
// this.monacoEditor.dispose();
// this.editInit();
})
.catch(error => {
console.error(error);
});
},
https://www.primefaces.org/showcase-ext/sections/monacoEditor/extenderDiff.jsf;jsessionid=node01sd7vcjw19lkjfj84irbaj09y6406497.node0?example=options
editInit() {
const originalModel = monaco.editor.createModel(
"`原始的模型 `"
);
const modifiedModel = monaco.editor.createModel(
this.handleEditFileInfo.content
);
const diffEditor = monaco.editor.createDiffEditor(
this.$refs.codeContainerEdit,
{
originalEditable: false,
automaticLayout: true
}
);
diffEditor.setModel({
modified: modifiedModel,
original: originalModel
});
},```
---
`monaco.editor.createDiffEditor` 函数可以接受以下配置参数：
1. `readOnly`：指定编辑器是否为只读模式，默认为 `false`。
2. `theme`：指定编辑器的主题，默认为 `"vs"`.
3. `automaticLayout`：指定编辑器是否自动调整布局以适应父容器大小，默认为 `false`。
4. `originalEditable`：指定对比的原始编辑器是否可编辑，默认为 `false`。
5. `renderSideBySide`：指定对比编辑器是否以“并排”模式渲染，默认为 `true`。
其中，`renderSideBySide` 参数可以用于控制可编辑的部分在左边的显示。若将 `renderSideBySide` 参数设置为 `false`，则可编辑的部分将在右边显示。
以下是示例代码：
```javascript
const diffEditor = monaco.editor.createDiffEditor(diffEditorContainer, {
readOnly: true,
theme: "vs",
automaticLayout: true,
originalEditable: false,
renderSideBySide: false
});
通过将 renderSideBySide 设置为 false，你可以使可编辑的部分在左边显示。你可以根据需求调整其他参数，并根据需要进行样式和布局的更改。
https://blog.csdn.net/qq_34332050/article/details/125599598
// 监听文本改变事件
this.monacoEditor.onDidChangeModelContent((e) => {});
// 获取值
this.monacoEditor.getValue();
// 设置值
this.monacoEditor.setValue('content');
// 销毁
this.monacoEditor.dispose();
本地
以下是monaco.editor的常见配置属性及其注释：
1. value // 设置编辑器的初始值
2. language // 设置编辑器的语言（如：'javascript', 'typescript', 'html'等）
3. theme // 设置编辑器的主题（如：'vs', 'vs-dark'）
4. readOnly // 设置编辑器是否只读（默认值为false）
5. automaticLayout // 设置编辑器是否自动调整布局（默认值为false）
6. wordWrap // 设置编辑器的换行方式（如：'off', 'on', 'wordWrapColumn'等）
7. wordWrapColumn // 当wordWrap设置为'wordWrapColumn'时，设置换行列的位置
8. minimap // 设置编辑器的缩略图（如：{ enabled: true, side: 'right' }）
9. scrollbar // 设置编辑器的滚动条（如：{ vertical: 'auto', horizontal: 'auto' }）
10. lineNumbers // 设置是否显示行号（默认值为on）
11. lineNumbersMinChars // 设置行号最小宽度（默认值为5）
12. glyphMargin // 设置是否显示装饰符号边距（默认值为true）
13. folding // 设置是否启用代码折叠功能（默认值为true）
14. renderWhitespace // 设置是否渲染空白字符（如：'none', 'boundary'）
15. renderControlCharacters // 设置是否渲染控制字符（默认值为false）
16. renderIndentGuides // 设置是否渲染缩进指南线（默认值为true）
17. overviewRulerLanes // 设置概览标尺的宽度（默认值为3）
18. lineDecorationsWidth // 设置行装饰的宽度（默认值为10）
19. cursorBlinking // 设置光标的闪烁方式（如：'blink', 'smooth', 'phase'）
20. cursorStyle // 设置光标样式（如：'line', 'block', 'underline'）
21. cursorSurroundingLines // 设置光标周围的可见行数
22. cursorWidth // 设置光标的宽度
23. hover // 设置悬停功能的配置（如：{ enabled: true, delay: 500 }）
24. contextmenu // 设置右键菜单的配置
25. quickSuggestions // 设置快速建议的方式（如：{ other: true, comments: false }）
26. suggestSelection // 设置建议列表的选择方式（如：'first', 'recentlyUsed', 'recentlyUsedByPrefix'）
27. lineNumbersType // 设置行号的类型（如：'on', 'relative'）
28. rulers // 设置某一列上的装饰器
29. themeCustomizations // 设置主题的自定义配置
30. scrollbarStyle // 设置滚动条的样式（如：'default', 'overlay'）
这些是常见的配置属性，可以根据需求来选择配置。
百度
Monaco Editor 是一个由 Microsoft开发的开源代码编辑器，它在 Visual Studio Code 中被广泛使用。以下是一些你可以在 Vue 项目中使用 Monaco Editor 时进行配置的主要属性：
1. `value`：**必选**，初始代码，可以是任何字符串。
2. `language`：设置编辑器的编程语言，例如 `javascript`，`css`，`html`，`typescript` 等。
3. `theme`：设置编辑器的主题，例如 `vs-dark`，`hc-black` 等。
4. `automaticLayout`：是否自动调整编辑器布局。
5. `scrollBeyondLastLine`：是否允许滚动超出最后一行。
6. `roundedSelection`：是否显示圆角选择。
7. `readOnly`：是否设置为只读模式。
8. `fontSize`：设置字体大小。
9. `fontFamily`：设置字体类型。
10. `lineHeight`：设置行高。
11. `letterSpacing`：设置字符间距。
12. `wordWrap`：设置自动换行。
13. `scrollBeyondLastLine`：设置是否允许滚动超出最后一行。
14. `scrollBeyondLastLine`：设置是否允许滚动时超出最后一行。
15. `handleMouseWheel`：是否响应鼠标滚轮事件。
16. `wordWrapMinified`：是否启用自动折叠。
17. `renderWhitespace`：是否渲染空白字符。
18. `selectAll`：初始时选择所有文本。
19. `onDidChangeModelLanguage`：模型语言更改时触发。
20. `onDidChangeModelContent`：模型内容更改时触发。
21. `onMouseClick`：鼠标点击时触发。
22. `onMouseMove`：鼠标移动时触发。
23. `onMouseLeave`：鼠标离开编辑器时触发。
24. `onClick`：在编辑器上单击时触发。
25. `onWheel`：鼠标滚轮滚动时触发。
26. `onKeyDown`：按下键盘键时触发。
27. `onKeyUp`：释放键盘键时触发。
28. `onCharacterComposition`：字符组合时触发。
29. `onMouseEnterCell`：鼠标进入单元格时触发。
30. `onMouseLeaveCell`：鼠标离开单元格时触发等。
以上只是一些常见的配置选项，Monaco Editor 提供了大量的可配置项，可以根据你的需求进行更详细的配置。更多配置选项可以查阅 Monaco Editor 的官方文档。
阿里
Monaco 编辑器提供了很多配置选项，下面是一些常用的配置属性：
* "value"：设置编辑器的初始值。这是一个字符串，表示编辑器的初始内容。
* "language"：设置编辑器的语言。这是一个字符串，表示编辑器的初始语言。例如，如果 "language" 设置为 "javascript"，则表示编辑器将显示 JavaScript 代码。
* "theme"：设置编辑器的主题。这是一个字符串，表示编辑器的主题。例如，如果 "theme" 设置为 "vs"，则表示编辑器将使用 VSCode 主题。
* "automaticLayout"：设置编辑器是否自动布局。这是一个布尔值，如果设置为 true，则表示编辑器将自动调整布局；如果设置为 false，则表示编辑器将保持初始布局。
* "foldingStrategy"：设置折叠策略。这是一个字符串，表示折叠策略。例如，如果 "foldingStrategy" 设置为 "indentation"，则表示编辑器将根据缩进来折叠代码；如果 "foldingStrategy" 设置为 "markers"，则表示编辑器将根据标记来折叠代码。
* "renderWhitespace"：设置是否显示空白字符。这是一个布尔值，如果设置为 true，则表示显示空白字符；如果设置为 false，则表示不显示空白字符。
* "minimap"：设置是否显示缩略图。这是一个对象，表示缩略图的配置。例如，如果 "minimap" 设置为 { enabled: true }，则表示显示缩略图；如果 "minimap" 设置为 { enabled: false }，则表示不显示缩略图。
* "hover"：设置是否启用代码提示。这是一个对象，表示代码提示的配置。例如，如果 "hover" 设置为 { enabled: true }，则表示启用代码提示；如果 "hover" 设置为 { enabled: false }，则表示禁用代码提示。"delay" 是一个数值，表示代码提示的延迟时间，单位是毫秒。例如，如果 "delay" 设置为 500，则表示当鼠标悬停在代码行上时，代码提示会延迟 500 毫秒后显示。
* "formatOnType"：设置是否在输入时自动格式化。这是一个布尔值，如果设置为 true，则表示在输入时自动格式化；如果设置为 false，则表示不自动格式化。
* "linting"：设置是否启用代码检查。这是一个对象，表示代码检查的配置。例如，如果 "linting" 设置为 { enabled: true }，则表示启用代码检查；如果 "linting" 设置为 { enabled: false }，则表示禁用代码检查。"languageId" 是一个字符串，表示代码检查的语言。例如，如果 "languageId" 设置为 "javascript"，则表示使用 JavaScript 代码检查规则。"requestTimeout" 是一个数值，表示请求超时时间，单位是毫秒。例如，如果 "requestTimeout" 设置为 5000，则表示当请求超时时，代码检查将停止。
* "showLineNumbers"：设置是否显示行号。这是一个布尔值，如果设置为 true，则表示显示行号；如果设置为 false，则表示不显示行号。
* "wordWrap"：设置是否启用换行。这是一个对象，表示换行的配置。例如，如果 "wordWrap" 设置为 "on"，则表示启用换行；如果 "wordWrap" 设置为 "off"，则表示不启用换行。"wordWrapColumn" 是一个数值，表示启用换行的列数。例如，如果 "wordWrapColumn" 设置为 80，则表示当代码行的长度超过 80 个字符时，将启用换行。
* "renderIndentGuides"：设置是否显示缩进指示器。这是一个布尔值，如果设置为 true，则表示显示缩进指示器；如果设置为 false，则表示不显示缩进指示器。
* "showCursorWhenSelecting"：设置是否在选择时显示光标。这是一个布尔值，如果设置为 true，则表示在选择时显示光标；如果设置为 false，则表示在选择时不显示光标。
* "minimap.maxColumn"：设置缩略图的最大列数。这是一个数值，表示缩略图的最大列数。例如，如果 "minimap.maxColumn" 设置为 80，则表示当代码行的长度超过 80 个字符时，缩略图将不再显示整个代码行。
editInit() {
if (this.
value: this.myData, // 编辑器初始显示文字
// language: ‘javascript’, // 语言 javascript | json
automaticLayout: true, // 自动布局
theme: "vs", // 官方自带三种主题 vs, hc-black, or vs-dark
foldingStrategy: "indentation", // 代码可分小段折叠
overviewRulerBorder: false, // 不要滚动条的边框
lineNumbers: "on", // 控制行号的出现 on | off
scrollbar: { // 滚动条设置
verticalScrollbarSize: 4, // 竖滚动条
horizontalScrollbarSize: 6 // 横滚动条
},
readOnly: false, // 是否只读 Defaults to false | true
minimap: { // 关闭小地图
autohide: true, // 控制minimap的渲染方式,意思为自动隐藏，当设置为false时，没有效果一≠≠≠直可见，设置为true时，默认不可见，鼠标悬浮时可见
enabled: true, // 一个布尔值，指示是否启用缩略图。默认为 true
scale: 2 // 字体的放大倍数，默认是1
},
cursorStyle: "block-outline", // 光标样式 line , block , underline , line-thin , block-outline , underline-thin
fontSize: 16, // 字体大小
tabSize: 2, // tab缩进长度
autoIndent: true, // 自动布局 – 自动缩进功能。每当输入回车键时，编辑器会自动缩进到与上一行相同的缩进级别。
hover: {
enabled: true,
delay: 500
}
});
}
},“`
