Vista previa en vivo de la entrada de formato HTML formateada con rieles

Question

Quiero una característica de la vista previa de un texto con etiquetas HTML y luego almacenar el texto en la base de datos.Sé que no es una buena idea permitir html en la base de datos, por razones de seguridad XSS.¿Cuáles son las formas de lograr esto?

Quiero una característica similar a la que tenemos en StackOverFlow, donde podemos formatear nuestros SourceCodedes.Gracias.

Answer 1

RECOMENDADO:

Crear un Escucha de eventos JavaScript Para el formulario en su página HTML . Envíe la entrada a través de AJAX a la aplicación de su rieles , donde se presenta la entrada (por ejemplo, por el mismo ayudante que más tarde hará la salida de la base de datos).

Use un idioma de marcado como Redcloth / Textile para evitar XSS. ¡También es más fácil escribir / entender para sus usuarios!

su manera solicitada:

Cree un oyente de eventos de JavaScript y escriba los contenidos del formulario / entrada a otro DIV.

El JavaScript que necesitará depende de qué biblioteca use (prototipo o jQuery, por ejemplo,).

Ejemplo:

Suponga que tiene un formulario con un código de texto, <textarea id="text"></textarea>, y un área de vista previa con <div id="preview"></div> y está utilizando prototipo:

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

Esto verificará la textarea cada 250 ms para los cambios y copiará su entrada en el DIV de vista previa.

En realidad, solo necesita el código dentro de la función que se llama con document.observe (comenzando con new Form.Element.Observer.... El document.observe llamará a este código después de que el navegador haya terminado de construir el Dom-Tree.

Answer 2

También podría considerar usar algo como Textil o Markdown, que son formas de lograr un marcado HTML con texto sin formato.