Question

我正在编写一个程序，该程序将使用CodeMirror实例并且弹出一个小元素，您可以在其中输入文本。该文本输入区域应该是一行高。我将使用我在主CodeMirror实例上执行的文本输入区域做很多相同的事情，所以我想只使用CodeMirror的另一个实例，但我要做的就是我所做的一切。到目前为止尝试过的人太高了。

如何创建一个只有一行高且可水平滚动的CodeMirror实例？我不喜欢行号，没有排水沟等，只是要输入文本的区域。

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

编辑： re：@ rfornal的请求，这里是我所指的代码和解释（由Tigran Saluev提供）：

嗯，有一种方法可以使用丰富的CodeMirror功能制作单行编辑器。首先，您必须添加功能齐全的CodeMirror对象（使用textarea）。

假设你有var cm = CodeMirror（...）。（使用价值：＆＃34;＆＃34;）。然后做

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

这对我来说很好。

到目前为止，我所尝试过的所有内容仍然高于一行。可能有一种方法可以做到这一点，我只是不了解如何。

Answer 1

按照惯例，这是用户错误。我曾假设CodeMirror的样式会覆盖我为容器创建的任何样式，但它们并没有。我的样式感染了CodeMirror实例并导致了怪异。

具体地：
- 设定位置：相对于不应该的地方（我不知道在哪里）
- 设置显示：内联块不应该在某个地方（再次，不确定它特别受影响）

我道歉，我希望将来可以帮助其他人。

1行高CodeMirror实例

1 个答案: