Codemirror для однострочного текстового поля?

У меня есть однострочное текстовое поле. (тип ввода = 'текст')

У меня нет текстового поля.

Это текстовое поле позволяет пользователю вводить небольшие строки в простой DSL. Чтобы дать вам представление, они выглядят так:

от Милана до Лондона
из Италии (rome, florence) в uk

Я думал заменить это текстовое поле на codemirror

мои вопросы:

использует зеркало кода для одной строки textarea - хорошая идея?
Кто-нибудь это сделал?
Есть ли какие-либо другие подходы, чтобы сделать текстовое поле более "ярким"?

Спасибо,

Ответ 1

Ну, есть способ сделать однострочный редактор, используя богатые возможности CodeMirror. Во-первых, вам нужно будет добавить полнофункциональный объект CodeMirror (используйте текстовое поле).

Предположим, у вас есть var cm = CodeMirror(...). (Используйте value: ""). Тогда 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

Это работает отлично для меня.

Ответ 2

Вы можете просто запустить регулярное выражение в поле, когда кто-то нажал клавишу.

Когда событие происходит, вы делаете str.replace в содержимом элемента contentEditable, который примерно на одну строку высок, вроде этого:

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

для такого подхода вам не нужен редактор кода, и вы можете просто стилизовать теги с этими классами...

Simples