HTML/JS WYSIWYG 편집기를 만드는 방법은 무엇입니까?
다양한 Google 검색을 시도했지만 실제로 WYSIWYG 편집기를 만드는 방법에 대한 최신 자습서(2006년 이후)를 찾을 수 없습니다. 이미 많이 있다는 것을 알고 있지만 실제로 어떻게 작동하는지 궁금합니다. 일부 소스 코드를 살펴보았지만 소화해야 할 부분이 많습니다. 서식이 지정된 텍스트는 텍스트 영역 상자에 넣을 수 없는 것처럼 보이지만 그렇게 하는 것처럼 보입니다. 어떻게?
Javascript WYSIWYG 편집기는 텍스트 영역을 사용하지 않습니다(적어도 외부적으로는 그렇지 않지만, 배후에는 WYSIWYG 콘텐츠를 구성하는 코드로 채워져 양식에 게시될 수 있는 텍스트 영역이 있을 수 있습니다).
대신 웹 페이지에서 편집 가능한 영역을 만드는 데 사용되는 두 가지 속성이 있습니다. designMode, 전체 문서에 contentEditable적용되는 , 또는 특정 요소에 적용되는 . 두 속성 모두 원래 Microsoft 혁신이었지만 모든 주요 브라우저에서 채택되었습니다( contentEditable현재 HTML5의 일부임).
문서(서식 있는 텍스트 편집기의 관점에서 이것은 일반적으로 designMode가 설정된 iframe을 페이지에 포함하는 것을 의미함) 또는 요소를 편집 가능하게 만들면 execCommand방법 을 사용하여 서식을 지정합니다 . 기울임꼴 등 -- 모든 브라우저에서 반드시 같을 필요는 없습니다. 자세한 내용은 이 표 를 참조하세요 .
편집 가능한 요소에서 서버로 콘텐츠를 전달하기 위해 일반적으로 innerHTML편집 가능한 요소의 내용이 게시되는 텍스트 영역에 로드됩니다. 생성된 HTML의 구성은 브라우저에 따라 다릅니다.
자원 :
- http://blog.whatwg.org/the-road-to-html-5-contenteditable
- http://www.mozilla.org/editor/ie2midas.html
멋진 WYSIWYG 편집기를 만들기 위해 이 코드를 사용하는 것이 좋습니다.
멋진 편집기를 만들기 위해 결과가 포함된 새 창을 여는 JavaScript로 코드를 만들었습니다.
바디부터 시작하겠습니다-
<body>
<textarea style="height:400px;width:750px;overflow:auto;"onblur="x=this.value"></textarea>
<br />
<button onclick="ShowResult()">see result!</button>
</body>
이제 우리는 JavaScript-
function ShowResult()
{
my_window = window.open("about:blank", "mywindow1");
//By the above line code we have opened a new window
my_window.document.write(x);
//Here we have added the value of the textarea to the new window
}
코드를 전체적으로 보자:-
<html>
<script type="text/javascript">
function ShowResult()
{
my_window = window.open("about:blank", "mywindow1");
my_window.document.write(x);
}
</script>
<body>
<textarea style="height:400px;width:750px;overflow:auto;" onblur="x=this.value">
</textarea><br />
<button onclick="ShowResult()">see result!</button>
</body>
</html>
내가 어떤 식으로든 당신을 도울 수 있다면 그렇게 하는 것이 매우 기쁩니다.
이 질문을 해주시고 JavaScript에 대한 궁금증을 높여주셔서 감사합니다.
Basically they hide your textarea and place an iframe as an editor field. They capture your input (text + formating) and write the corresponding HTML into the iframe. If you submit your form including the original textarea they copy the content of the iframe into the textarea and therefore the html code gets submitted.
Well, this is quite simplified.
ReferenceURL : https://stackoverflow.com/questions/2678264/how-to-make-an-html-js-wysiwyg-editor
'IT이야기' 카테고리의 다른 글
| jpa에서 생성된 테이블의 잘못된 순서 (0) | 2021.09.25 |
|---|---|
| GNU make의 -j 옵션 (0) | 2021.09.25 |
| 날짜에 git diff (0) | 2021.09.24 |
| Moq를 사용하여 전화가 올바른 순서로 이루어졌는지 확인 (0) | 2021.09.24 |
| 내 참조에 대한 Copy Local 속성이 비활성화된 이유 (0) | 2021.09.24 |