Monaco Editor 编辑器enter以后 光标定位错乱问题及解决方法

Monaco Editor 编辑器enter以后 光标定位错乱问题及解决方法

开发过程中使用到monacoeditor组件编辑json

<template>
  <div>
    <div ref="codeContainer" class="coder-editor"></div>
  </div>
</template>
<script>
import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
import * as monaco from 'monaco-editor';
export default {
  data() {
    return {
      monacoEditor: null, // 语言编辑器
    }
  },
  mounted(){
    this.init()
  },

  methods: {
    init(){
      if(this.$refs.codeContainer){
        this.monacoEditor = monaco.editor.create(this.$refs.codeContainer, {
            value: '', // 编辑器初始显示文字
            language: 'json', // 语言
            automaticLayout: true, // 自动布局
            theme: 'vs', // 官方自带三种主题vs, hc-black, or vs-dark
            minimap: { // 关闭小地图
              enabled: false,
            },
            fontSize:14,
            fontFamily:'inherit',
            lineNumbers: 'off', // 隐藏控制行号
        });
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.
</style>

以下是引发问题的代码

.monaco-editor .view-line{
	letter-spacing:0.5px !important；
	font-family:inherit !important;
}

我这边手欠通过css设置了字体间距，因为默认的字体被修改后，显得不咋好看，然后发现光标的移动位置错位，删除的也不是当前光标所在位置的数据，后续查看api时发现monaco有一个字体的属性，分别时fontSize和fontFamily,然后去除letter-spacing样式，光标会根据字体大小和字体类型去计算每一个字符的宽度，这样才能保证光标位置的正确。

希望给同踩坑小伙伴一点思路。