온라인 텍스트 편집기는 어떻게 작동합니까?

Question

온라인 편집기 (예 : FCKEditor/등)를 개발하려하지만 어떻게 작동하는지 잘 모릅니다. 나는 WYSIWYG 것들이 Javascript와 IFrame을 가지고 있지만 실제로 어떻게 작동하는지 알고 있습니까?

편집기에 입력되는 내용을 실시간으로 미리 볼 수 있는지 궁금합니다.

Answer 1

RTE는 일반적으로 iframe을 사용하여 구현됩니다. 해당 iframe 내에서 사용할 수있는 문서 개체의 속성은 designMode set to on이어야합니다. 이 시점 이후에 굵게, 기울임 꼴, 색, 배경 등과 같은 기본 기능을 구현하려면 문서 객체의 execCommand 메소드를 사용하여 수행해야합니다.

iframe을 사용하는 주된 이유는 스타일 버튼을 클릭 할 때 선택의 초점을 잃지 않기 때문입니다 (Firefox는 iframe에서만이 속성을 설정할 수 있습니다). 더 나아가, contentEditable 속성은 3 이전의 Firefox 버전에서는 사용할 수 없습니다.

그 RTE로 멋진 일을하고 싶을 때 좀 더 복잡해집니다. 이 시점에서 Range objects (다양한 브라우저에서 다르게 구현 됨)을 사용해야합니다.

Answer 2

(예 :. 아, 입력 텍스트 국경없는, 실제로 보여주는 부분이 동기화 그래서 그들은 단지 스타일을 변경 빨간색으로 편지를 넣어있다) 등을하고 ..

그것이 어떻게 수행되는지입니다.

Answer 3

는 오픈 소스이며 소스 코드는 무료로 사용할 수 있습니다.

그것은 소스 코드를 읽는 시간을 보내고 가치가있을 수도 유래 is also available

에 사용 the editor의 코드. 여기있는 사람들은 명확하지 않은 코드를 설명해 주시면 기꺼이 도와 드리겠습니다.

Answer 4

WYSIWYG 편집자의 핵심은 contenteditable 속성 (모든 HTML 태그에 적용 할 수 있지만이 경우 div와 같음)이라고 생각합니다. 나머지 기능은 일반적으로 DOM에 액세스하고 HTML을 조작하는 Javascript에 의해 제공됩니다. 미리보기 기능과 관련하여 이것은 사용자가 요소를 편집 할 때 발생하는 이벤트를 연결 한 다음 해당 HTML을 가져 와서 비교적 간단한 Javascript를 사용하여 페이지의 다른 곳에서 표시하는 것과 같습니다.

Answer 5

업데이트 :편집기가 필요하면 다른 사람들이 제안한 다른 제안 사항 중 하나를 사용하는 것이 좋습니다. 그러나 이것을 구축하기위한 학업 목적이 있다면 다음이 도약의 장이 될 것입니다.

이것은 매우 쉽게 달성됩니다 (일부 부품). 예를 들어, jQuery를 사용하여 실제로 빠르게 작동 할 수 있습니다.

div.theScreen { 
    width:320px; 
    height:75px; 
    border:1px solid #CCCCCC; 
    background-color:#f1f1f1; 
} 

<div class="theScreen"></div> 
<div><textarea class="typePad"></textarea></div> 

마크 업 및 스타일이 갖추어 졌으므로 간단한 Javascript를 추가하여 실시간 미리보기를 트리거 할 수 있습니다.

$(document).ready(function(){ 
    $(".typePad").keyup(function(){ 
    $(".theScreen").html($(".typePad").val()); 
    }); 
}); 

매우 원시적이고 간단한 예이지만 시작하게 할 것입니다.

Answer 6

1 년 반 전에 서식있는 텍스트 편집기를 만들기 위해 오픈 소스 "sourceforge"프로젝트를 시작했습니다. 나는 거기에 내 코드를 가져 오는 방법을 찾지 못했지만 IE와 Firefox에서 "content editable mode"가 어떻게 작동하는지 연구해야했다. 내 연구는 주로 파이어 폭스 웹 사이트와 마이크로 소프트 웹 사이트를 포함합니다.

나는 이것을하기 위해 보았던 코드가 좋지 않았고 매우 친절하지 않았다. (미안하지만 나는 그것을 도울 수 없다.) 그래서 다시 생각해볼 때 많은 것을 필요로했다. 나는에서 개발하고 확장 할 수 있습니다.

불행히도 브라우저의 "콘텐츠 편집 가능 모드"에서 제공하는 기능을 수행하더라도 여전히 버그가 많은 편집기로 끝납니다.그 이유는 "콘텐츠 편집 가능 모드"가 MS Word (모든 사람이 시도)에서 붙여 넣기 또는 번호 매기기 목록 만들기와 일관되게 작동하지 않으며 생성하는 마크 업이 일관성이없고 형편없이 형성되기 때문입니다.

내가 이제 TinyMCE을 사용하는 이유입니다. TinyMCE는 내가 개인적으로 피해야 할 디자인 결정으로 가득 차 있지만 독자적인 편집기를 만들 때 얻을 수있는 버그의 대부분을 수정했습니다. 또한 사용자의 필요에 맞게 사용자 정의 할 수있는 기능이 가득합니다.

정말 대안을 시도하지 않았기 때문에 다른 것을 추천 할 수 없습니다.

TinyMCE가 가장 좋은 옵션 인 것처럼 보이지만 Word 문서를 붙여 넣기가 여전히 예측할 수 없기 때문에 여전히 두통 거리에 있습니다. WYSIWYG 약속은 HTML에서는 가능하지 않지만 고객이 기대하며 많은 문제가 있습니다. 일단 사용자가 원시 HTML을 데이터베이스에 넣으면 시작할 수 있습니다. (특히 코드베이스의 마지막 부분이 1993 년에 마지막으로 업데이트 된 경우 ...)