Visualização ao vivo da entrada de formulário HTML formatado com Rails

Question

Quero um recurso para visualizar algum texto com tags HTML e depois armazenar o texto no banco de dados.Eu sei que não é uma boa ideia permitir HTML no banco de dados, por motivos de segurança XSS.Quais são as maneiras de conseguir isso?

Quero um recurso semelhante ao que temos no stackoverflow, onde possamos formatar nossos códigos-fonte.Obrigado.

Answer 1

Maneira recomendada:

Criar um ouvinte de evento javascript para o formulário em sua página HTML.Envie a entrada via ajax para seu aplicativo Rails, onde a entrada é renderizada (por exemplo, pelo mesmo auxiliar que posteriormente renderizará a saída do banco de dados).

Use uma linguagem de marcação como Tecido Vermelho/Têxtil para evitar XSS.Também é mais fácil digitar/entender para seus usuários!

Sua maneira solicitada:

Crie um ouvinte de evento javascript e grave o conteúdo do formulário/entrada em outro div.

O javascript necessário depende de qual biblioteca você usa (Prototype ou jQuery, por exemplo).

Exemplo:

Suponha que você tenha um formulário com uma área de texto, <textarea id="text"></textarea>, e uma div de área de visualização com <div id="preview"></div> e você está usando o protótipo:

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

Isso verificará a área de texto a cada 250 ms em busca de alterações e copiará sua entrada no div de visualização.

Na verdade, você só precisa do código dentro da função que é chamada com document.observe (começando com new Form.Element.Observer....O document.observe chamará esse código depois que o navegador terminar de construir a árvore DOM.

Answer 2

Você também pode considerar usar algo como têxtil ou marcação, que são maneiras de obter marcação HTML com texto simples.