Monaco Editor获取选中内容以及实例相关配置

获取选中内容

1.刚开始使用的是浏览器的默认事件，但是当获取多行的内容时，自动隐藏内容，所以自己写了一个比较笨的第二种方法，但是第一种方法可以应用于其他的文本框

//获取文本框选中内容
window.getSelection().toString();

2.monaco editor实例调用鼠标按下，光标改变的方法，获取起始行，列，结束行，列，通过截取编辑器内容的方法获取当前选中的内容

        this.monacoEditor.onMouseDown(e => {
            this.startLineNumber = e.target.position.lineNumber;//获取起始行
            this.startColumn = e.target.position.column;//获取起始列
        })
        this.monacoEditor.onDidChangeCursorPosition(e => {
            //编辑器内容changge事件
            this.endLineNumber = e.position.lineNumber;//获取结束行
            this.endColumn = e.position.column;//获取结束列
            let { startLineNumber, startColumn, endLineNumber, endColumn } = this
            this.currentText = currentFn(
                this.monacoEditor,
                startLineNumber,
                startColumn,
                endLineNumber,
                endColumn
            )
         })

被调用的currentFn.js

export function currentFn(monacoEditor, startLineNumber, startColumn, endLineNumber, endColumn) {
  let currentText = '' //选中文字的内容
  let num = 0;//累计回车的数量
  let startIndex = null;//截取编辑器内容的起始下标
  let endIndex = null;//截取编辑器内容的结束下标
  // monacoEditor.getValue().split('')  :  获取编辑器内容，并拆成数组，并把每一个字符作为数组的每一项
  if (startLineNumber < endLineNumber) {//当起始行<结束行（方向：从上到下，从左到右）
    monacoEditor.getValue().split('').map((item, index) => {
        if (startLineNumber === 1) {//判断起始行当前行数，为1 则前面没有回车
          startIndex = startColumn - 1;//获取起始下标
          if (item === '\n') {
            num += 1；//累计回车数量（针对于结束行）
            if (num === endLineNumber - 1) {//获取结束行最近的回车的下标+结束行的结束列
              endIndex = index + endColumn
            }
          }
        } else {//判断起始行当前行数，大于1 则前面有回车
          if (item === '\n') {//累计回车数量
            num += 1
            if (num === startLineNumber - 1) {//获取起始行最近的回车的下标+起始行的起始列
              startIndex = index + startColumn
            }
            if (num === endLineNumber - 1) {//获取结束行最近的回车的下标+结束行的结束列
              endIndex = index + endColumn
            }
          }
        }
   })
  } else if (startLineNumber > endLineNumber) {//当起始行>结束行（方向：从下到上，从右到左）
    monacoEditor.getValue().split('').map((item, index) => {
        if (endLineNumber === 1) {//判断结束行当前行数，为1 则前面没有回车
          startIndex = endColumn - 1;//获取起始下标
          if (item === '\n') {
            num += 1;//累计回车数量（针对于起始行）
            if (num === startLineNumber - 1) {//获取结束下标：起始行最近的回车的下标+起始行的起始列
              endIndex = index + startColumn
            }
          }
        } else {//判断结束行当前行数，大于1 则前面有回车
          if (item === '\n') {//累计回车数量
            num += 1
            if (num === endLineNumber - 1) {//获取结束行最近的回车的下标+结束行的结束列
              startIndex = index + endColumn
            }
            if (num === startLineNumber - 1) {//获取起始行最近的回车的下标+起始行的起始列
              endIndex = index + startColumn
            }
          }
        }
      })
  } else if (startLineNumber === endLineNumber) {//当起始行=结束行（方向：从左到右，从右到左）
    monacoEditor.getValue().split('').map((item, index) => {
        if (endLineNumber === 1) {
          startIndex = startColumn < endColumn ? startColumn - 1 : endColumn - 1
          endIndex = startColumn > endColumn ? startColumn - 1 : endColumn - 1
        } else {
          if (item === '\n') {
            num += 1
            if (num === endLineNumber - 1) {
              startIndex = startColumn < endColumn ? startColumn + index : endColumn + index
              endIndex = startColumn > endColumn ? startColumn + index : endColumn + index
            }
          }
        }
      })
  }
  currentText = monacoEditor.getValue().slice(startIndex, endIndex)
  return currentText
}

3. 借鉴优秀评论补充第三种获取选中编辑器内容的方法

monacoEditor.getModel().getValueInRange(monacoEditor.getSelection())

初始化实例配置

this.monacoEditor = monaco.editor.create(this.$refs.container, {// 编辑器实例化 
    value:'',
    language: 'mysql',//
    theme: 'vs', // 主题：vs, hc-black, or vs-dark
    scrollBeyondLastLine: false,
    readOnly: true,//是否只读
    automaticLayout: true,//是否自适应
    autoClosingBrackets: true,
    foldingStrategy: 'indentation',//代码可分小段折叠
    overviewRulerBorder: false, // 不要滚动条的边框
    tabSize: 2, // tab 缩进长度
    minimap: {
        enabled: false, // 不要小地图
    },
});

动态设置主题

monaco.editor.setTheme('hc-black');