Live-Vorschau der formatierten HTML-Formulareingabe mit Rails

Question

Ich möchte eine Funktion zur Vorschau eines Texts mit HTML-Tags und zur anschließenden Speicherung des Texts in der Datenbank.Ich weiß, dass es aus XSS-Sicherheitsgründen keine gute Idee ist, HTML in der Datenbank zuzulassen.Welche Möglichkeiten gibt es, dies zu erreichen?

Ich möchte eine Funktion ähnlich der, die wir in Stackoverflow haben, mit der wir unsere Quellcodes formatieren können.Danke.

Answer 1

Empfohlener Weg:

Erstelle ein JavaScript-Ereignis-Listener für das Formular auf Ihrer HTML-Seite.Senden Sie die Eingabe über Ajax zu Ihrer Rails-App, wo die Eingabe gerendert wird (z. B. von demselben Helfer, der später die Ausgabe aus der Datenbank rendert).

Verwenden Sie eine Auszeichnungssprache wie RotStoff/Textil um XSS zu vermeiden.Außerdem ist es für Ihre Benutzer einfacher zu tippen/zu verstehen!

Ihr gewünschter Weg:

Erstellen Sie einen Javascript-Ereignis-Listener und schreiben Sie den Inhalt des Formulars/der Eingabe in ein anderes Div.

Welches Javascript Sie benötigen, hängt davon ab, welche Bibliothek Sie verwenden (z. B. Prototyp oder jQuery).

Beispiel:

Angenommen, Sie haben ein Formular mit einem Textbereich, <textarea id="text"></textarea>, und einen Vorschaubereich div mit <div id="preview"></div> und Sie verwenden Prototype:

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

Dadurch wird der Textbereich alle 250 ms auf Änderungen überprüft und seine Eingabe in das Vorschau-Div kopiert.

Eigentlich benötigen Sie nur den Code innerhalb der Funktion, die mit aufgerufen wird document.observe (beginnen mit new Form.Element.Observer....Der document.observe ruft diesen Code auf, nachdem der Browser den Aufbau des DOM-Baums abgeschlossen hat.

Answer 2

Sie könnten auch in Betracht ziehen, etwas wie Textil oder Markdown zu verwenden, wodurch HTML-Markup mit einfachem Text erreicht werden können.