0

私のページの片側には、非常にシンプルなメールフォームがあります。反対側には、提案された電子メールのプレビューがあります。例えば：

ここに画像の説明を入力してください

ユーザーがフィールドに入力したら、キーアップのプレビューを更新したいと思います。私はそれを行うために小さなjs関数を書きました：

var email_previewer = function() {
  var fields = [
    { input: $('input#editor_invitation_to'), preview: $('dt.to') },
    { input: $('#editor_invitation_message'), preview: $('#message') }
  ];

  var perserve_linebreaks = function(text) {
    var html = text.replace(/\r\n\r\n/g, "</p><p>"),
      html = html.replace(/\r\n/g, "<br />"),
      html = html.replace(/\n\n/g, "</p><p>"),
      html = html.replace(/\n/g, "<br />"),
      html = "<p>"+html+"</p>";
    return html;
  };

  var sync_text = function(input, preview) {
    var text = input.val();
    if (input.is('textarea')) {
      text = perserve_linebreaks(text);
    }
    preview.text(text);
  }

  // sync preview on page load
  $.each(fields, function(index, field) {
    sync_text(field.input, field.preview);
  });

  // create keyup events
  $.each(fields, function(index, field) {
    field.input.keyup(function() {
      sync_text(field.input, field.preview);
    });
  });

}();

Railsが私のHTMLをエスケープして、がらくたのように見せたい場合を除いて、すべてがうまく機能します。

ここに画像の説明を入力してください

通常、これは問題ないことを私は知っています。rawまたはを追加するだけhtml_safeです。しかし、マークアップはキーアップ（またはページの読み込み）に基づいて動的に構築されているため、ここではそれを行うことはできません。私はいくつかの簡単な解決策を逃していますか？回避策のアイデアはありますか？私の唯一のアイデアは、プレビューをiframeにロードすることです。これはまったく奇妙に思えます。

これは途方もなくイライラします。誰か助けてください！

4

1 に答える 1

1

preview.text(text)私はすぐにあなたの職務を疑うでしょうsync_text。これは、DOMにテキストノードを作成する必要があります。必要なのは、複数のノードが作成されるようにinnerHTMLを設定することです。

于 2011-04-16T00:21:20.130 に答える