yanzi-monaco-editorbb/开发笔记.md

这是一个基于微软的monaco和vue封装的一个代码编辑器，浏览器可运行。主要功能有:html、javascript、css代码编辑，高亮显示，语法错误提示等，可以帮您的项目很快的拥有一个web端的代码编辑器

## 相关 API
创建编辑器容器
```js
let ed = document.getElementById("monaco");
this.myEditor = monaco.editor.create(ed, {
    theme: this.theme
});
```

获取内容
```js
this.myEditor.getValue();
```

动态设置主题
```js
moncao.editor.setTheme("vs"); // 可选值 vs | vs-dark | hc-dark
```

动态设置窗口尺寸
```js
this.myEditor = monaco.editor.create(ed, {

    automaticLayout: true // 首先，在初始化的时候就要指定，这个属性为 true

});

// 然后，在需要按照父级尺寸计算的时候，调用以下方法
this.myEditor.layout();
```

向编辑器中光标位置插入内容
```js
insertText(content) {
    var line = this.myEditor.getPosition();
    var range = new monaco.Range(line.lineNumber, 1, line.lineNumber, 1);
    let suffix = content.substring(content.lastIndexOf(".") + 1);
    var id = { major: 1, minor: 1 };
    /* eslint-disable */
    var text =
    suffix == "js"
        ? `\t<script src="${content}"><\/script>`
        : `\t<link rel="stylesheet" href="${content}"/>`;
    /* eslint-disable */
    var op = {
    identifier: id,
    range: range,
    text: text,
    forceMoveMarkers: true
    };
    this.myEditor.executeEdits("my-source", [op]);
}
```

更改编辑器配置
```js
//此例为更改编辑器为只读模式,其余以此类推
this.editor.updateOptions({readOnly:true})
```

获取选中内容
```js
//获取编辑器选中的参数，包括起始行等等
var selection = this.editor.getSelection();
//获取当前选中的文本
var text = currentFn(editor,selection.startLineNumber,selection.startColumn,selection.endLineNumber,selection.endColumn);
```