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样式,光标会根据字体大小和字体类型去计算每一个字符的宽度,这样才能保证光标位置的正确。
希望给同踩坑小伙伴一点思路。