如何避免在 Codemirror 文本字段中出现双 cursor/caret？

Question

我使用 Codemirror 编辑一些 javascript 代码。在 Chrome 中，编辑器显示了两个光标，一大一小：

在 Firefox 中，光标旁边还有一个人工制品：

在这两种浏览器中，最初在文本开头都有一个伪像：

我假设它与我的当前页面有 css 冲突，因为它在我的页面之外运行良好，但无法在任何地方找到冲突。有没有人有类似的问题或知道该怎么办？

我可以按如下方式影响两个光标的颜色：

.CodeMirror {
     caret-color: red;
}


.CodeMirror-cursor {    
    background-color: blue;
    width:0px;
    border:none;
}

如何隐藏额外的小红色插入符（或增加它的大小并隐藏蓝色插入符）？我试图将 caret-color 设置为透明。但是，仍然会留下一条小灰线。我可以隐藏大线，但无法纠正小插入符的大小。

示例代码：

var container = document.createElement('div');
this.appendChild(container);   

this.__codeMirror = window.CodeMirror(container,  
              {
                value: self.value,
                mode: self.mode,
                lineNumbers: false, 
                matchBrackets: true,
                continueComments: "Enter",
                extraKeys: {"Ctrl-Q": "toggleComment"}
              }
            );

相关问题：

Codemirror cursor position offset

Answer 1

此问题是由 div 的某些 css 设置引起的：

treez-section div {
  padding-left: 1px;
  padding-right: 1px;
  border-style:none;
  padding-bottom: 5px;
}

仅考虑第一级children:

treez-section > div {
  padding-left: 1px;
  padding-right: 1px;
  border-style:none;
  padding-bottom: 5px;
}

如何避免在 Codemirror 文本字段中出现双 cursor/caret？

How to avoid double cursor/caret in Codemirror textfield?

codemirror