ace-editor - 没有在光标所在的位置输入字符

Question

在我的 Ace 编辑器中，就在滚动条出现之后，正在输入字符，但不是光标所在的位置。见下图。出了什么问题？该代码似乎在我的开发环境中运行良好。

我注意到我的开发环境的字体比我的生产环境的字体大。

开发环境：

产品环境：

我不明白为什么会有差异，以及这是否是问题的原因。

fonts显式设置为 后courier new，编辑器选项为

editor options are   {selectionStyle: "line", highlightActiveLine: true, highlightSelectedWord: true, readOnly: false, copyWithEmptySelection: false, …}animatedScroll: falseautoScrollEditorIntoView: undefinedbehavioursEnabled: truecopyWithEmptySelection: falsecursorStyle: "ace"displayIndentGuides: truedragDelay: 0dragEnabled: trueenableBlockSelect: trueenableMultiselect: truefadeFoldWidgets: falsefirstLineNumber: 1fixedWidthGutter: undefinedfocusTimeout: 0foldStyle: "markbegin"fontFamily: "Courier New"fontSize: "14pt"hScrollBarAlwaysVisible: falsehasCssTransforms: undefinedhighlightActiveLine: truehighlightGutterLine: truehighlightSelectedWord: trueindentedSoftWrap: truekeyboardHandler: undefinedmaxLines: undefinedmaxPixelHeight: 0mergeUndoDeltas: trueminLines: undefinedmode: "ace/mode/html"navigateWithinSoftTabs: falsenewLineMode: "auto"overwrite: falseplaceholder: undefinedprintMargin: 80printMarginColumn: 80readOnly: falserelativeLineNumbers: undefinedscrollPastEnd: 0scrollSpeed: 2selectionStyle: "line"showFoldWidgets: trueshowGutter: trueshowInvisibles: falseshowLineNumbers: trueshowPrintMargin: truetabSize: 4theme: "ace/theme/eclipse"tooltipFollowsMouse: trueuseSoftTabs: trueuseTextareaForIME: trueuseWorker: truevScrollBarAlwaysVisible: falsewrap: "off"wrapBehavioursEnabled: true__proto__: Object

更新

编辑器中的每一行似乎都有一个 class ace_gutter-cell。这个类dev和prod环境不一样。position:absolute中缺失prod。请参阅下面的图片。我在选择不同的版本ace吗？

开发：

产品：

标签： ace-editor

Answer 1

当您使用非等宽字体时会发生这种情况；您必须在 Ace 中使用等宽字体。