monaco-editor实现SQL编辑器功能——光标位置插入文本

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第3天，点击查看活动详情

一、基础实现

我们现在需要做最简单的实现就是点击按钮，在编辑器中光标的位置插入Hello world

• 核心代码

const onClick = (text) => {
const curSelection = editor.getSelection() // 获取光标的信息
const {startLineNumber, startColumn, endLineNumber, endColumn} = curSelection
// 在光标位置插入文本
editor.executeEdits('', [
  {
    range: new monaco.Range(startLineNumber, startColumn, endLineNumber, endColumn),
    text, // 插入的文本
    forceMoveMarkers: true
  },
])
editor.focus() // 插入完文本 需要聚焦下光标
}

主要是使用executeEdits方法，这里需要注意的是，我们插入文本之后，需要聚焦一下，不然是不会有闪动的光标的。

• 进阶

在sql编辑器中，我们常常会涉及到点击一些比如函数方法并且自动添加上括号，然后光标需要定位到括号中间；这里我们需要用到setPosition方法设置光标的位置。

const onInsetText = (text) => {
    const curSelection = editor.getSelection() // 选择的文本范围或光标的当前位置
    const {startLineNumber, startColumn, endLineNumber, endColumn} = curSelection
    // 在光标位置插入文本
    editor.executeEdits('', [
      {
        range: new monaco.Range(startLineNumber, startColumn, endLineNumber, endColumn),
        text, // 插入的文本
        forceMoveMarkers: true
      },
    ])
    // 核心 设置光标的位置
    editor.setPosition({ column: startColumn + text.length - 1, lineNumber: startLineNumber })
}

const onFuncClick = (text) => {
    onInsetText(`${text}()`)
    editor.focus() // 插入完文本 需要聚焦下光标
}

这里需要注意的点就是，按照初始方法，光标是定位在右括号后面，所以我们插入文本之后需要重新去设置一下光标的位置，最后再聚焦一下。

• 思考问题

开发中我们可能需要在编辑器里面插入html元素，比如有些字段我们需要点击之后作为一个整体去插入到编辑器里面，当回车删除时也是整个删除掉。但是我找了好久并没有找到方法，如果说有大佬知道的话，欢迎留言一下告知一下，谢谢~

二、最后

最后我们看看一些其他属性

1. 获取编辑器里的所有文本：editor.getValue()
2. 设置值： editor.setValue()

3. 有时我们需要选中的文本去执行sql，就需要获取选中的文本

const curSelection = editor.getSelection()
const {startLineNumber, startColumn, endLineNumber, endColumn} = curSelection
const range = new monaco.Range(startLineNumber, startColumn, endLineNumber, endColumn)
const model = editor.getModel()

console.log(23232, model.getValueInRange(range))

主要使用的是使用 editor.getModel().getValueInRange(range)