2

ここで YUI 初心者を完了します。

次のように、ユーザーが YUI3 テキスト エディター コントロールにテキストを入力すると、テキストの背景に動的に色を付ける必要があります。

  • テキストの最初の行はオレンジ色です。
  • で始まる行までのすべての行--はオレンジ色です。
  • それ以降は で始まる行も含めて、--で始まる次の行まで--すべて青色です。
  • その後 — オレンジ色に戻ります。

最初の行が で始まる場合でも、--オレンジ色になります。

ユーザーはビジュアル テキスト スタイルを手動で制御してはならず、貼り付け時にプレーン テキストを挿入して色を変更する必要があります。

ユーザーがテキストを入力すると、テキストの背景色を「リアルタイム」で更新する必要があります。

例：

オレンジオレンジ
オレンジ
オレンジ
-- ブルーブルー
青い  - 
青い
-  オレンジ
-  青い
-- オレンジオレンジ
オレンジ

これを実装する方法を掘り下げる場所を教えてください。私は例を閲覧しましたが、まだ内容を理解することはできません.

注: 適切な JS フレームワークについて、私が必要としているものにより適したエディターを知っている場合は、アドバイスしてください。

4

1 に答える 1

1

あなたが見たい例はYUI3nodeChangeだと思います。アプリケーションでは、「Enter-up」nodeChangeイベントを探す必要があります。次に、e.dompathからNodeListを使用して、スタイルを設定する適切なノードを取得できるようになります。開始する必要のある例として、例の「logFn」関数を次のように置き換えます。

var logFn = function(e) {
    Y.log('nodeChange Event: ' + e.changedType);
    if (e.changedType === 'enter-up') {
       var pContainerOfNewBr = e.dompath.item(1);
       var pContainerOfPrevLine = pContainerOfNewBr.previous();
       pContainerOfPrevLine.setStyle('backgroundColor', '#0000ff');
       Y.log('nodeChange got enter-up: ' + e.changedType);
    }
};

そして、「on」リスナーを「after」に変更します。

editor.after('nodeChange', logFn);

これからわか​​るのは、行で「Enter」を押すと、前の行の背景色が青に変わることです。正確にはあなたが望むものではありませんが、うまくいけば正しい方向に向かっています。

警告-リッチテキストエディタは、初めてYUI3を体験するために飛び込む非常に複雑なウィジェットです。YUI3のイベントとノードを適切に処理できれば簡単ですが、実際のRTEコードをハックする必要がある場合はかなり難しいでしょう。

于 2011-07-05T08:26:59.597 に答える