レールで入力されたフォーマットされたHTMLフォームのライブプレビュー

Question

HTMLタグを使用してテキストをプレビューしてからデータベースに保存する機能を求めています。XSSセキュリティ上の理由から、データベース内のHTMLを許可することをお勧めします。これを達成する方法は何ですか？

スタックオーバーフローで持っているものと同様の機能を望みます。ここでは、ソースコードをフォーマットできます。ありがとう。

Answer 1

推奨される方法：

html-page上のフォームのjavascriptイベントリスナー 。入力を送信してください。ここで、入力はレンダリングされます（例えば後でデータベースから出力をレンダリングするのと同じヘルパーによって）。

redcloth / textile のようなマークアップ言語を使用して、XSSを避けます。ユーザーのためのタイプ/理解が簡単です。

あなたの要求された方法：

JavaScriptイベントリスナを作成し、フォーム/入力の内容を別のDIVに書き込みます。

JavaScriptは、どのライブラリを使用するか（プロトタイプまたはjQueryなど）に依存します。

例：

TextArea、<textarea id="text"></textarea>、および<div id="preview"></div>を使用したプレビュー領域DIVのフォームがあるとします。プロトタイプを使用しています。

document.observe("dom:loaded", function() {
  new Form.Element.Observer('text', 0.25, 
    function () {
      $('preview').update($F('text'));
    }
  );
}

.

これは、250ミリ秒ごとにTextAreaをチェックし、その入力をプレビューDIVにコピーします。

実際には、document.observe（new Form.Element.Observer...から始まる）で呼び出される関数内のコードが必要です.document.observeは、ブラウザがDOMツリーの構築を完了した後にこのコードを呼び出します。

Answer 2

プレーンテキストでHTMLマークアップを実現する方法であるテキストやマークダウンのようなものを使用することもできます。