편집
MTE (다기능 텍스트 편집기) 는 Microsoft Word 와 같은 편집 기능을 제공하여 HTML 을 쓰지 않고 다양한 텍스트 형식을 지정해야 하는 사용자에게 쉽게 사랑받습니다. 그것의 응용도 갈수록 광범위해지고 있다. 처음에는 IE 브라우저만 지원했고, 다른 브라우저는 속속 따라갔다. 기능성 면에서 IE 가 더 강합니다. 균일한 표준은 없지만 브라우저에서 제공하는 API 는 가장 기본적인 기능에 대해 기본적으로 동일하므로 브라우저 간 리치 텍스트 편집기를 작성할 수 있습니다.
많은 개발자들에게 리치 텍스트 편집기의 작성은 매우 신비하거나 복잡한 일이다. 아무런 현기증이 없다. 만약 복잡하다면, 그것은 바로 그것이다. 그러나 그것의 기본 원리는 결코 복잡하지도 않고, 시작하지도 어렵지 않다. 오늘날 Dell 의 주제는 기본 원칙을 설명하고 간단한 리치 텍스트 편집기의 생성을 단계별로 시연하는 것입니다. 이것은 내가 D2 에서 공유한 내용이다. 무대 위의 강연 효과가 좋지 않아서, 나는 관심 있는 독자들에게 도움이 되기를 바라며 적었다.
기본 원리
편집
이 원리는 너무 간단하다! 서식 있는 텍스트 편집을 지원하는 브라우저의 경우 실제로 document 의 designMode 속성을 on 으로 설정한 다음 document 를 실행합니다. Execcommand ('commandname' [,uiflag [,value]]). 명령 이름과 값은 MSDN 및 MDC 에서 찾을 수 있습니다. 그것들은 우리가 다양한 형식으로 만든 명령이다. 예를 들어 굵은 글꼴과 실행 문서가 필요합니다. Execcommand ('bold', false). 간단하죠? 그러나 이 명령은 일반적으로 텍스트를 선택한 후에 실행되며 선택한 텍스트의 서식을 지정하는 것이 중요합니다. 선택하지 않은 텍스트의 경우 브라우저마다 이 명령을 처리하는 방법이 다릅니다. 예를 들어, IE 는 커서에 있는 태그의 내용을 포맷할 수 있지만 다른 브라우저는 아무것도 하지 않습니다. 이는 이 문서의 내용을 넘어 더 이상 자세히 설명하지 않습니다. 또한 UIFlag 매개 변수를 true 로 설정하면 이 명령이 트리거하는 모든 사용자 인터페이스 (있는 경우) 가 표시됩니다. 이는 오늘 자습서에서 false 입니다. value 는 일부 commandName 에만 있습니까? 중국어밖에 없습니다. 자세한 내용은 위에 방금 주신 두 개의 링크를 참고하세요.
현재 문서에 영향을 주지 않도록 페이지에 iframe 요소를 포함한 다음 이 iframe (iframe.contentWindow.document 를 통해 얻음) 에서 문서를 조작하는 것이 일반적인 방법입니다.
아주 간단하죠, 그렇죠? 우리 하나 만들어 봅시다.
단순 편집
편집
이 예제는 YUI 를 사용합니다. 익숙하지 않아도 괜찮아요. 나는 여기서 그것의 DOM 과 몇 가지 기본적인 플랫폼 간 이벤트 방법만을 사용한다.
향상
여기서, 나는 당돌하지 않다는 것을 강조하고 싶다, 이것은 이미 오랫동안 언급되지 않았다. 우리의 편집기는 textarea 요소의 향상된 기능입니다. 즉, JavaScript 가 비활성화된 경우에도 사용자는 textarea 를 통해 내용을 편집할 수 있습니다.
이 경우, 우리는 textarea 만 계산할 것이다. 인스턴스 변수를 사용하여 도구막대의 항목을 저장하겠습니다. 인스턴스 초기화는 render 라는 메서드에 배치됩니다. 이 단계의 페이지와 코드는 1 단계에 나와 있습니다.
Iframe 을 작성하고 textarea 를 대체합니다.
내가 전에 말했듯이, 선반을 만들어 iframe 을 만들어라. 편집기의 모든 작업은 iframe 의 문서에서 수행됩니다. 텍스트 영역을 숨깁니다. 2 단계에서 보듯이 이미 iframe 이 있지만 아무 것도 입력할 수 없습니다. 정상입니다. 우리는 그것의 디자인 패턴을 열지 않았다.
디자인 모드를 켭니다
이 단계는 많은 것을 포함하고 있으며, 또한 관건이다. Iframe 의 문서를 가져오고 외부 blank.html 을 사용하는 대신 프로그램을 통해 iframe 에 빈 페이지를 쓰는 방법을 만들겠습니다. 클래스 속성 YAHOO.realazy.RTE.htmlContent 를 사용하여 빈 페이지의 html 을 저장하겠습니다. 모든 것이 준비되면 디자인 패턴을 시작할 수 있습니다. 페이지 및 코드는 3 단계를 참조하십시오. 보세요, 우리는 이미 iframe 에 내용을 입력할 수 있습니다.
도구 모음 구성
우리는 도구막대를 조작해야 한다! 그래야만 iframe 의 내용을 제어할 수 있으며 편집기라고 부를 수 있습니다. 여기서는 너무 많은 기능을 구현하지 않고 글리프, 굵게, 기울임꼴, 밑줄, 왼쪽, 가운데, 오른쪽, 하이퍼링크, 그림만 선택합니다. Mozilla Midas 사양은 플랫폼 간 좋은 참조입니다. 네, 네 번째 단계를 보세요. 우리 도구 모음이 나왔는데 못생겼지만. 동시에, 나는 CSS 를 사용하여 iframe 의 폭을 약간 조정했다.
도구막대에 항목 추가
네, 도구 모음이 나왔어요. 편집기가' 사람 대 개' 로 보여요. 만약 당신이 매우 흥분한다면, 그것은 안 될 것입니다 ... 예상대로. 그런 다음 편집기 내용이 도구 모음에 응답할 수 있도록 일부 이벤트를 도구 모음에 바인딩합니다. 이 단계에서는 execCommand 를 다른 레이어로 밀봉합니다. 앞서 언급했듯이 UIFlag 를 위에 놓고 항상 false 로 만들 수 있습니다. 음, 코드가있는 곳마다 진실이 있습니다. 5 단계를 참조하십시오. IE 를 사용 중인 경우 먼저 일시적으로 다른 브라우저로 전환하십시오. 이봐, 도구 모음이 유효해!
IE 문제 해결
음, 만약 당신이 내 충고를 듣지 않아, 당신은 또한 IE 를 사용 하 여, 당신은 아무것도 하지만, 글꼴과 크기를 사용할 수 없습니다 찾을 수 있습니다. 왜요 관찰한다면, 다른 브라우저가 텍스트를 선택한 후 도구 모음의 항목을 클릭해도 선택된 텍스트가 여전히 선택된 것을 발견할 수 있습니까? IE, 도구 모음을 클릭하면 선택한 텍스트가 즉시 선택 상태를 잃게 되므로 실패합니다. 따라서 도구 모음 텍스트를 클릭하여 선택한 상태로 유지하면 IE 문제를 해결할 수 있습니다.
마이크로소프트는 HTML 태그에 이상한 속성을 주어서 선택할 수 없다. On 으로 설정하면 클릭한 요소로 이동하지 않으므로 텍스트 선택 상태를 유지할 수 있습니다.
6 단계를 참조하십시오. 이것은 또한 IE 두통 문제를 해결하는 열쇠입니다. 나는 일찍이 많은 마음을 썼다.