Aperçu en direct de l'entrée du formulaire HTML formaté avec rails

Question

Je veux une fonctionnalité de prévisualisation du texte avec des balises HTML, puis de stocker le texte dans la base de données. Je sais que ce n'est pas une bonne idée d'autoriser HTML dans la base de données, pour des raisons de sécurité XSS. Quelles sont les moyens d'y parvenir?

Je veux une fonctionnalité similaire à celle que nous avons dans Stackoverflow, où nous pouvons formater nos codes sources. Merci.

Answer 1

FACE RECOMMANDÉ:

Créé un Écouteur d'événements JavaScript pour le formulaire sur votre pages HTML. Soumettre l'entrée via ajax à votre application Rails, où l'entrée est rendue (par exemple par le même aide qui rendra plus tard la sortie de la base de données).

Utilisez une langue de balisage comme Redcloth / textile pour éviter les XS. Il est également plus facile de taper / comprendre pour vos utilisateurs!

Votre manière demandée:

Créez un écouteur d'événements JavaScript et écrivez le contenu du formulaire / entrée dans un autre div.

Le javascript dont vous aurez besoin dépend de la bibliothèque que vous utilisez (prototype ou jQuery, par exemple).

Exemple:

Supposons que vous ayez une forme avec une textarea, <textarea id="text"></textarea>, et un aperçu de la div de la zone avec <div id="preview"></div> Et vous utilisez le prototype:

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

Cela vérifiera la TextArea toutes les 250 ms pour les modifications et copiera ses entrées dans le DIV Aperçu.

En fait, vous avez juste besoin du code à l'intérieur de la fonction qui s'appelle avec document.observe (commençant par new Form.Element.Observer.... La document.observe appellera ce code après que le navigateur a fini de construire le domaine Dom.

Answer 2

Vous pouvez également envisager d'utiliser quelque chose comme le textile ou la marque, qui sont des moyens d'atteindre le balisage HTML avec du texte brut.