在vue使用微软web在线编辑器 monaco editor

vue.js

之前用的是 ace editor ,在PC运行良好,就是在手机端的时候有点不太舒适。于是找到了这么一个东西,

什么是Monaco Editor?

微软之前有个项目叫做Monaco Workbench,后来这个项目变成了VSCode,而Monaco Editor就是从这个项目中成长出来的一个web编辑器

安装

npm intsall monaco-editor --save

引入

//主库
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js';
//高亮
import 'monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution';

初始化

this.editor = monaco.editor.create(document.getElementById("monaco"),{
    value:'console.log(1)', //代码
    language:"javascript", //语言
    //selectOnLineNumbers: true,
    roundedSelection: false,
    readOnly: false,        // 只读
    cursorStyle: 'line',        //光标样式
    automaticLayout: false, //自动布局
    //glyphMargin: true,  //字形边缘
    useTabStops: false,
    fontSize: 20,       //字体大小
    //autoIndent:true,//自动布局,
})

自适应

const init = ()=>{
    //重新创建前,需要销毁
    this.editor.dispose();
    //再创建
    this.editor = monaco.editor.create(document.getElementById("monaco"),{
        value:'console.log(1)', //代码
        language:"javascript", //语言
        //selectOnLineNumbers: true,
        roundedSelection: false,
        readOnly: false,        // 只读
        cursorStyle: 'line',        //光标样式
        automaticLayout: false, //自动布局
        //glyphMargin: true,  //字形边缘
        useTabStops: false,
        fontSize: 20,       //字体大小
        //autoIndent:true,//自动布局,
    })
}
window.addEventListener('resize',init);

设置获取代码

//获取代码
const code = this.editor.getValue();
//设置代码
this.editor.setValue(code);

在光标处插入代码

//当前光标位置
const line = this.editor.getPosition();
const range = new monaco.Range(line.lineNumber, line.column, line.lineNumber, line.column);
const id = { major: 1, minor: 1 };
const op = {identifier: id, range: range, text: code, forceMoveMarkers: true};
this.editor.executeEdits("my-source", [op]);

获取当前行代码

const pos = this.editor.getPosition();
let code = '';
if (pos) {
    code = this.editor.getModel().getLineContent(pos.lineNumber);
}

移动光标

//拿到光标位置
let position = this.editor.getPosition();
//往后移动一列
position.column += 1;
this.editor.setPosition(position);

1
说点什么

avatar
1 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
超人下拉 Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
超人下拉
Guest

这个有用的吗