사용 가능한 HTML을 출력하는 JS 양식 만들기

학교의 신문 편집인이 정보를 입력 할 수있는 페이지 (예 : img url, titles, caption)를 만들 수있는 방법을 만들고 있습니다.) 이미 양식화 된 HTML 코드를 출력합니다.사용 가능한 HTML을 출력하는 JS 양식 만들기

그래서 그들은 제목 영역에있는 양식에 입력 : "제목"

그리고 단락 지역을 : 그것은 것 같은 출력 뭔가

"이것은 테스트입니다"와 :

<div class="div1"> 
    <span>Title</span> 
    <p>This is a test</p> 
</div>

나는 그것이 가능하다고 알고 이런 일을 찾는으로 찾아 봤는데

(당신이 놓고 나중에 더 추가 할 수 있습니다 첫 번째 이후부터 div1), 난 그냥 돈 ' 이걸 어디서부터 시작해야할지, 심지어 내가 구글 검색을 할 지 알지도 못한다. 어떤 도움이라도 대단히 감사하겠습니다.

감사합니다.

편집 : 우리는 외부 회사와의 계약으로 인해 Wordpress를 설정할 수 없습니다.

출처

2016-10-20 Bradley Jones

너무 광범위 ... 당신이 그것을 달성하기 위해 손으로 코드 템플릿, React.JS 심지어 CMS에서 아무것도를 사용할 수 있습니다. 클라이언트 측 또는 서버 측 HTML 생성. 이렇게 많은 불특정 변수 ... – Lucero

아마 wordpress를 설정하십시오. – Brian

자신에게 유리하게 편집자를 처음부터 만들려고하지 마십시오. Google 'WYSIWYG 편집기'결과에는 CKEditor 및 TinyMCE 등이 포함됩니다. 실제로 JS를 충분히 쓸 때 처음부터 다시 JS를 작성하고 가치가 없다는 것을 깨달을 수 있습니다. – zer00ne

솔루션을 직접 구현할 것인지, 아니면 이미 사용하고있는 솔루션을 사용할 것인지에 따라 다릅니다. 이 유형의 기능은 이미 WYSIWYG (사용자가 보게되는 것) 편집기를 통해 Wordpress 및 SquareSpace와 같은 플랫폼에 내장되어 있습니다. Stackoverflow의 질문 상자와 유사합니다.

맞춤 솔루션을 구현하려는 경우 마크 다운 언어를 살펴 보는 것이 좋습니다. 예를 들어 여기에 Remarkable이라는 한 개의 markdown 자바 스크립트 라이브러리가 있습니다.

https://github.com/jonschlinkert/remarkable. 당신이 인하 텍스트가 렌더링 함수에 전달하고 HTML로 변환 볼 수 있듯이

이 코드

는 github의의 README

var Remarkable = require('remarkable'); 
var md = new Remarkable(); 

console.log(md.render('# Remarkable rulezz!')); 
// => <h1>Remarkable rulezz!</h1>

에서 직접 가져온 것입니다.

알렉스

출처

2016-10-20 23:02:15

사용 가능한 HTML을 출력하는 JS 양식 만들기

답변

관련 문제