关于monaco-editor编辑器
本文最后更新于 217 天前,其中的信息可能已经有所发展或是发生改变。

官方:
仓库: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",或者自定义主题名称。
  • originalIEditorConstructionOptions 对象,用于配置原始文本的编辑器的配置选项。
  • modifiedIEditorConstructionOptions 对象,用于配置修改后的文本的编辑器的配置选项。

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.Extra open brace or missing close bracerefs.codeContainerEdit) { // 初始化编辑器,确保dom已经渲染 this.monacoEditor = monaco.editor.create(this.refs.codeContainerEdit) { // 初始化编辑器,确保dom已经渲染 this.monacoEditor = monaco.editor.create(this.refs.codeContainerEdit, {
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
}
});
}
},“`

标题:关于monaco-editor编辑器
地址:https://xiaodongxier.com/2114.html
作者:wangyongjie
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇