仅一行文本字段的codemirror? [英] codemirror for just one-line-textfield?

查看:132
本文介绍了仅一行文本字段的codemirror?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一行文本字段。 (输入类型为文本)

I have a one line textfield. (input type='text')

我没有文本区域。

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

This textfield allows the user to enter small strings in a simple DSL. To give you an idea they look like this:


  • 从米兰到伦敦

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

我正考虑用codemirror替换此文本字段

I was thinking to replace this textfield with codemirror

我的问题是:


  • 对一行文本区域使用代码镜像是个好主意吗?

  • 有人这样做吗?

  • 还有没有其他方法可以使文本字段更加丰富多彩?

谢谢,

推荐答案

嗯,有一种方法可以使用CodeMirror的丰富功能来制作单行编辑器。
首先,您必须添加功能齐全的CodeMirror对象(使用文本区域)。

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).

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

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

对我来说这很好。

这篇关于仅一行文本字段的codemirror?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆