Codemirror für nur einzeilige Textfelder?

Ich habe ein einzeiliges Textfeld. (Eingabetyp = 'Text')Codemirror für nur einzeilige Textfelder?

Ich habe keine Textarea.

Dieses Textfeld erlaubt dem Benutzer, kleine Strings in einem einfachen DSL einzugeben. Sie Um eine Vorstellung zu geben, die sie wie folgt aussehen:

von Mailand nach London
aus Italien (Rom, Florenz) nach uk

Ich dachte, dieses Textfeld mit Codemirror ersetzen

meine Fragen sind:

ist Code Spiegel für eine Zeile Textfeld ein mit gute Idee ?
hat jemand das getan?
Gibt es andere Ansätze, um ein Textfeld "bunter" zu machen?

Danke,

Quelle

2012-10-23 Zo72

Ist CodeMirror nicht ein In-Browser-Werkzeug zur Code-Bearbeitung? Ich sehe nicht, wie Ihr Eingabefeld einen Code-Editor benötigt? Was meinst du mit "bunt"? – nimrod

@nimod: Syntax-Highlighting nehme ich an. –

Sie könnten ein Textfeld verwenden und seine Höhe auf eine Zeile setzen. Es scheint eine "ok" Annäherung an mich zu sein. Es ist sicherlich nicht schlecht und etwas selbst zu bauen ist wahrscheinlich schwieriger. Sie müssen den Sprachparser dennoch erstellen, damit die richtigen Token korrekt hervorgehoben werden. –

Nun, es gibt eine Möglichkeit, eine einzeilige Editor umfassende Funktionen von Codemirror zu machen. Zuerst müssen Sie ein CodeMirror-Objekt mit vollem Funktionsumfang hinzufügen (verwenden Sie ein Textfeld).

Angenommen, Sie haben var cm = CodeMirror(...). (Verwenden Sie value: ""). Dann tun

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

Das ist für mich ganz gut funktioniert.

Quelle

2013-03-06 19:46:23

schön beforeChange Hack, thahks –

Nicht alle Änderungen haben eine Update-Funktion – pariesz

Danke Mann, dies ist einer der die besten Antworten aller Zeiten. Alles, was ich wissen wollte, war in deinem Post. Total repariert mich :) Prob rettete mich 2 Tage damit herum fummeln. Sehr geschätzt. Gott segne dich: D Arbeitet noch 4 Jahre später! – danday74

könnten Sie haben soeben einen regulären Ausdruck auf dem Feld laufen, wenn jemand einen Schlüssel trifft.

Wenn das Ereignis passiert, auf den Inhalt eines contentEditable Element eine str.replace tun, die um eine Zeile hoch ein bisschen wie das ist:

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

für diese Art von Ansatz, den Sie einen Code nicht brauchen würde, -Editor, und man konnte nur Ihre Tags mit diesen Klassen Stil ...

simples

Quelle

2012-10-23 11:14:19 nimrod

mag diesen Vorschlag ... es sei denn, jemand mit etwas besser kommt (dh rückgängig machen), so müssen Sie es prüfen existiert zuerst : if (change.update) change.update (change.from, change.to, [newtext]); Auch möchten Sie möglicherweise einige Tastenzuordnungen deaktivieren, indem Sie die folgende Konfiguration hinzufügen: extraKeys: {"Tab": false, "Shift-Tab": false, "Enter": false} – Zo72

Codemirror für nur einzeilige Textfelder?

Antwort

Verwandte Themen