Rails로 서식이 지정된 HTML 양식 입력의 실시간 미리보기

Question

HTML 태그로 일부 텍스트를 미리 본 다음 텍스트를 데이터베이스에 저장하는 기능이 필요합니다. XSS 보안상의 이유로 데이터베이스에 HTML을 허용하는 것이 좋지 않다는 것을 알고 있습니다. 이것을 성취하는 방법은 무엇입니까?

나는 우리가 소스 코드를 포맷 할 수있는 stackoverflow에있는 것과 비슷한 기능을 원한다. 감사.

Answer 1

권장 방법 :

당신의 HTML 페이지의 양식에 대한 을 만듭니다. 입력이 렌더링되는 곳의 via ajax to your rails app 입력을 제출하십시오 (예 : 나중에 데이터베이스의 출력을 렌더링하는 동일한 도우미로).

XSS를 피하려면 RedCloth/Textile과 같은 마크 업 언어를 사용하십시오. 사용자에게 입력/이해하기가 더 쉽습니다!

귀하의 요청 방법 :

는 자바 스크립트 이벤트 리스너를 만들고 다른 사업부에 양식/입력의 내용을 작성합니다.

필요한 자바 스크립트는 사용하는 라이브러리 (예 : Prototype 또는 jQuery)에 따라 다릅니다.

예 :

것은 당신이 텍스트 영역, <textarea id="text"></textarea> 및 <div id="preview"></div>있는 미리보기 영역의 사업부와 형태가 있고 프로토 타입을 사용하는 가정 :

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

이것은 텍스트 영역을 확인합니다 250ms마다 변경 사항을 입력하고 미리보기 div에 입력 내용을 복사합니다.

사실, 당신은 단지 new Form.Element.Observer...로 시작 document.observe (호출되는 함수 내부의 코드가 필요합니다. 브라우저가 DOM 트리를 구축 완료 후 document.observe이 코드를 호출합니다.

Answer 2

또한 사용을 고려할 수있다 평범한 텍스트로 HTML 마크 업을 얻는 방법 인 텍스타일 또는 마크 다운과 같은 것