12

1行のテキストフィールドがあります。（入力タイプ='テキスト'）

テキストエリアがありません。

このテキストフィールドを使用すると、ユーザーは単純なDSLに小さな文字列を入力できます。あなたにアイデアを与えるために、彼らはこのように見えます：

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

このテキストフィールドをcodemirrorに置き換えることを考えていました

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

  • 1行のテキストエリアにコードミラーを使用するのは良い考えですか？
  • 誰かがこれをしましたか？
  • テキストフィールドをより「カラフル」にする他のアプローチはありますか？

ありがとう、

4

2 に答える 2

17

さて、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

これは私にとっては問題なく機能します。

于 2013-03-06T19:46:23.237 に答える
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>');

この種のアプローチでは、コードエディタは必要なく、これらのクラスを使用してタグのスタイルを設定するだけで済みます...

シンプル

于 2012-10-23T11:14:19.087 に答える