Anteprima dal vivo del modulo HTML formattato in ingresso con binari

Question

Voglio una funzione di in anteprima di qualche testo con tag HTML e quindi memorizzando il testo nel database.So che non è una buona idea consentire l'HTML nel database, per motivi di sicurezza XSS.Quali sono i modi per ottenere questo?

Voglio una caratteristica simile a quella che abbiamo in Stackoverflow, dove possiamo formattare i nostri sourcecodi.Grazie.

Answer 1

modo consigliato:

Crea un JavaScript Event listener per il modulo sulla tua pagina HTML . Invia l'input Via Ajax all'App per i tuoi binari , dove l'ingresso viene reso (per esempio Con lo stesso aiuto che in seguito renderà l'output dal database).

Utilizzare un linguaggio markup come RedCloth / Textile per evitare XSS. È anche più facile digitare / capire per i tuoi utenti!

Il tuo modo richiesto:

Crea un listener di eventi JavaScript e scrivi il contenuto del modulo / ingresso su un altro div.

Il JavaScript di cui hai bisogno dipende da quale libreria usi (prototipo o jQuery, ad esempio).

Esempio:

Supponiamo di avere un modulo con un textarea, <textarea id="text"></textarea> e un div di Anteprima con <div id="preview"></div> e stai utilizzando il prototipo:

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

.

Questo controllerà la textarea ogni 250 ms per le modifiche e copia il suo input nell'anteprima Div.

In realtà, hai solo bisogno del codice all'interno della funzione chiamato con document.observe (a partire da new Form.Element.Observer.... Il document.observe chiamerà questo codice dopo che il browser ha finito di costruire il DOM-Tree.

Answer 2

Potresti anche considerare di usare qualcosa come tessile o markdown, che sono modi per ottenere il markup HTML con testo semplice.