javascript - 1行高CodeMirror实例

Question

我正在编写一个程序，该程序将使用 CodeMirror 实例，并有一个弹出的小元素，您可以在其中键入文本。该文本键入区域应该为一行高。我将在文本输入区域中执行许多与主 CodeMirror 实例相同的操作，因此我只想使用 CodeMirror 的另一个实例，但到目前为止我尝试过的所有操作都以失败告终太高了。

如何制作一个只有一行高并且可以水平滚动的 CodeMirror 实例？我想要没有行号，没有装订线等，只是要输入文本的区域。

我尝试了几件事，包括这里的代码(我全部和部分尝试过):codemirror for just one-line-textfield? 。该示例阻止用户在代码镜像实例中键入多行代码，但不会使其仅高一行。那里还有其他 CodeMirror 的东西，但我不确定那里有什么或者如何摆脱它。

编辑:回复:@rfornal 的请求，这是我引用的代码和解释(由 Tigran Saluev 编写):

Well, there is a way to make a single-line editor using rich capabilities of CodeMirror. First, you'll have to add a full-featured CodeMirror object (use a textarea).

Assume you've got var cm = CodeMirror(...). (Use value: ""). Then do

cm.setSize(200, cm.defaultTextHeight() + 2 * 4);
// 200 is the preferable width of text field in pixels,
// 4 is default CM padding (which depends on the theme you're using)

// now disallow adding newlines in the following simple way
cm.on("beforeChange", function(instance, change) {
    var newtext = change.text.join("").replace(/\n/g, ""); // remove ALL \n !
    change.update(change.from, change.to, [newtext]);
    return true;
});

// and then hide ugly horizontal scrollbar
cm.on("change", function(instance, change) {
    $(".CodeMirror-hscrollbar").css('display', 'none');
    // (!) this code is using jQuery and the selector is quite imperfect if
    // you're using more than one CodeMirror on your page. you're free to
    // change it appealing to your page structure.
});

// the following line fixes a bug I've encountered in CodeMirror 3.1
$(".CodeMirror-scroll").css('overflow', 'hidden');
// jQuery again! be careful with selector or move this to .css file

This works just fine for me.

到目前为止我所尝试的一切最终仍然比一行高。可能有一种方法可以做到这一点，我只是不明白如何做。

Answer 1

与往常一样，这是用户错误。我原以为 CodeMirror 的样式会覆盖我为容器创建的任何样式，但事实并非如此。我的样式感染了 CodeMirror 实例并导致了奇怪的情况。

具体:
- 设置position:relative于不应该在的地方(我不确定在哪里)
- 设置显示:内联 block 在不应该的地方(再次，不确定它具体影响了什么)

我很抱歉，我希望这对将来的其他人有帮助。