1行テキストフィールドだけのcodemerror？

Question

私は1行のテキストフィールドを持っています。 （入力タイプ= 'テキスト'）

私はテキストエリアを持っていません。

このテキストフィールドでは、簡単なDSLに小さな文字列を入力できます。

• ミラノからロンドン
• イタリア（ローマ、フィレンツェ）から英国
へ

私はcodemirror

でこのテキストフィールドを置き換えるために考えていたに： は、彼らがこのように見えるあなたのアイデアを与えるために、

私の質問は次のとおりです：

• 1行分のコードミラーを使用しています良いアイデア ？
• 誰でもこれを行っていますか？
• テキストフィールドをもっとカラフルにする方法はありますか？

おかげで、

Answer 1

さてあなたのタグのスタイルを設定でき、CodeMirrorの豊富な機能を使用して単一行エディタを作るための方法があります。 まず、フル機能のCodeMirrorオブジェクトを追加する必要があります（テキストエリアを使用します）。

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

誰かがキーを打つとき、あなただけのフィールドで正規表現を実行することができます。

イベントはあなたがちょっとこのような高さ約1ラインでの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>'); 

を-editor、そしてあなただけの...これらのクラスで

最も簡単な