网站建设流程体会,响应式自适应网站模板,国外做外汇网站交流,南充 网站开发为什么要写这篇文章#xff1f;最近开发了一个简单的在线代码编辑器#xff0c;基于 Monaco Editor 实现#xff0c;没有了解过 Monaco 的人可能不知道#xff0c;我们常用的 VS Code 也是基于它实现的~回到正题#xff0c;Monaco Editor 有一份完整的官方文档#xff0c…为什么要写这篇文章最近开发了一个简单的在线代码编辑器基于 Monaco Editor 实现没有了解过 Monaco 的人可能不知道我们常用的 VS Code 也是基于它实现的~回到正题Monaco Editor 有一份完整的官方文档那为什么还要写这个文章因为官方文档是在是太难用了api 难找不说找到了也是看得云里雾里可能是我查阅的姿势不对吧欢迎有文档使用经验的朋友在评论中指教~话不多说下面开始总结我在开发中的常用功能。开始使用我使用的是 Vue 版本的包 monaco-editor-vue使用方式如下themevs-darklanguagejavascript:editorMountedonEditorMounted:optionsoptionschangeonChangeexport 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 editorwindow.monaco monaco},}};复制代码常用 apieditor.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: , // 菜单项 idlabel: , // 菜单项名称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, // 提示的类型},])复制代码招聘微信支付招聘前后端开发欢迎推荐简历可发送到 timorliangtencent.com ~
