codemirror dla tylko jednoliniowego pola tekstowego?

Question

Mam pole tekstowe o jednym wierszu. (typ wejściowy = "tekst")

Nie mam textarea.

To pole tekstowe umożliwia użytkownikowi wprowadzanie małych ciągów w prostej linii DSL. Aby dać wyobrażenie one wyglądać tak:

• z Mediolanu do Londynu
• z Włoch (Rzym, Florencja) do UK

myślałem zastąpienie tego pole tekstowe z CodeMirror

moje pytania są następujące:

• korzysta codemirror dla jednej linii A textarea dobry pomysł ?
• ktoś zrobił to?
• Czy istnieją inne podejścia, które sprawiają, że pole tekstowe jest bardziej "kolorowe"?

Dzięki

Answer 1

dobrze, nie jest to sposób, aby edytor pojedynczej linii przy użyciu bogatych możliwości CodeMirror. Najpierw musisz dodać w pełni funkcjonalny obiekt CodeMirror (użyj obszaru tekstowego).

Załóżmy, że masz var cm = CodeMirror(...). (Użyj value: ""). Następnie zrobić

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 

Działa to dobrze dla mnie.

Answer 2

Możesz po prostu uruchomić regex na polu, gdy ktoś uderza w klawisz.

Gdy zdarzenie zrobisz str.replace na treści contentEditable elementu, który jest o jeden wysoki linia trochę tak:

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

dla tego rodzaju podejścia nie będzie potrzebował kodu -editor, a może po prostu styl tagi z tych klas ...

simples