codemirror只用于一行文本字段？

Question

我有一行文本字段.(输入类型='文字')

我没有textarea.

该文本字段允许用户在简单的DSL中输入小字符串.为了给你一个想法,他们看起来像这样:

• 从米兰到伦敦
• 从意大利(罗马,佛罗伦萨)到英国

我想用codemirror替换这个文本字段

我的问题是:

• 使用代码镜像一行textarea一个好主意？
• 有人这样做过吗？
• 有没有其他方法可以使文本字段更"丰富多彩"？

谢谢,

Answer 1

好吧,有一种方法可以使用CodeMirror的丰富功能来创建单行编辑器.首先,您必须添加功能齐全的CodeMirror对象(使用textarea).

假设你有var cm = CodeMirror(...).(使用value: "").然后做

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

这对我来说很好.