javascript - 仅用于单行文本字段的代码镜像？

Question

我有一个单行文本字段。（输入类型='文本'）

我没有文本区域。

此文本字段允许用户在简单的 DSL 中输入小字符串。为了给你一个想法，它们看起来像这样：

• 从米兰到伦敦
• 从意大利（罗马，佛罗伦萨）到英国

我正在考虑用 codemirror 替换这个文本字段

我的问题是：

• 对一行文本区域使用代码镜像是个好主意吗？
• 有人做过吗？
• 还有其他方法可以使文本字段更加“丰富多彩”吗？

谢谢，

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

这对我来说很好。

Answer 2

当有人按下键时，您可以在该字段上运行正则表达式。

当事件发生时，您对 contentEditable 元素的内容执行 str.replace，该元素大约是一行高，有点像这样：

var r = /from\s+(\w+)\s+to\s+(\w+)/gi
s.replace(r, 'from <em>$1</em> to <em class="to">$2</em>');

对于这种方法，您不需要代码编辑器，您可以使用这些类设置标签的样式...

简单的