javascript 풍부한 텍스트 편집기

Question

몇 가지가 있습니다(아주 좋)풍부한 텍스트는 웹 편집자 자바 스크립트로 작성된(예를 들어 FCKeditor,YUI Texteditor 그리고 많은 다른 사람).

그러나지를 구축하는 방법에 대한 자습서 이러한 구성 요소입니다.그런 것 모두를 설명하기 위해 고려해야 할 사항(건축물)및/또는 세상에서 낮은 수준의"중요한 포인트"(즉,왜의 대부분이 사용 iFrame,당신은 어떻게 처리하는 키보드 입력을 다음과 같 Ctrl-B,Ctrl-C 면 텍스트를 선택하지 않을 때 등등)

나의 주된 동기는 호기심;이번에 개발한 편집기를 오늘 내가 알 수 없는 곳에서 시작.

지의 튜토리얼을 커버하는 위의 문제점(이상적으로는 뭔가를 구축하는 방법에 대해 설명합니다 wysiwyg editor 처음부터)?

Answer 1

후에 더 많은 연구가 발견은 다음과 같습니다.이 기능은 건물에 대한 풍부한 텍스트 편집기를 이미 구현에서는 브라우저입니다.IE 를 작성하는 첫번째이었다 그러한 API 를 Firefox 복제됩니다.

개요

주요 포인트는 자바 스크립트 객체"문서"이라는 속성이 designMode 설정할 수 있습니다"on".이 변환 모든 페이지를 텍스트 영역과 같은 구성 요소입니다.상상하는 브라우저로 페이지 같은 방법으로는 MS-Word 것:사용자가 볼 수 있는 서식지만 그는 입력 할 수 있습 페이지에서(일반적으로 브라우저로 페이지 읽기 전용).

window.document.designMode = "On";

기 때문에 위에 영향을 미치는 모든 웹 페이지의,대부분의 편집기를 사용 iframe 도록 수정 가능한 지역은 iFrame 고있다 그것의 자신의 문서는 개체입니다.

그의 위에 있 API 용할 수 있게 해주는 javascript 액세스하는 스타일입니다.이것은 노출을 던져 execCommand()메소드가 있습니다.예를 들어,당신은에서 호출 할 수 있습 Javascript

document.execCommand('bold', false, '');

및 선택한 텍스트가 굵게 표시됩니다.

튜토리얼

내가 찾은 다음과 같다:

간단한 단계적 가이드.

Mozilla 가이드.그것은 가장 편리한 API 를 참조가 발견되고 또한 일부는 더 링크입니다.

가이드 microsoft.

Answer 2

호기심을 사용하여 좋아하는 편집기에서 소스 코드를 열고 탐색을 시작하도록 동기를 부여하십시오. 이 편집자들은 JavaScript로 작성되었으므로 답은 무료입니다.

나는 당신이 더 쉽게 소화 할 수있는 것을 찾고 있다는 것을 알고 있지만 소스 코드를 읽는 것은 매우 보람이있을 수 있습니다.

편집자를 구축하기 시작하는 것은 기존 오픈 소스 편집기를 가져 와서 자신의 특별한 요구를 충족시키기 위해 수정하는 것만 큼 간단 할 수 있습니다.