원리와 실습
편집
리치 텍스트 편집기, 다기능 텍스트 편집기(MTE라고도 함)는 Microsoft Word와 유사한 편집 기능을 제공하며 사용하기 쉽습니다. HTML을 작성할 수 없고 다양한 텍스트 형식을 지정해야 하는 사용자에게 인기가 있습니다. 그 적용도 점점 더 널리 퍼지고 있습니다. 처음에는 IE 브라우저만 지원했고 다른 브라우저도 뒤따랐습니다. 풍부한 기능 측면에서 IE는 여전히 강력합니다. 통일된 표준은 없지만 가장 기본적인 기능에 대해서는 각 브라우저에서 제공하는 API가 기본적으로 동일하므로 크로스 브라우저 리치 텍스트 편집기 작성이 가능합니다.
많은 개발자의 눈에는 서식 있는 텍스트 편집기를 작성하는 것이 신비롭고 복잡한 문제입니다. 신비롭지는 않지만 복잡합니다. 그러나 그 기본 원리는 복잡하지 않으며, 시작하는 것도 어렵지 않습니다. 오늘 우리의 주제는 기본 원리를 설명하고 간단한 서식 있는 텍스트 편집기를 만드는 과정을 단계별로 보여주는 것입니다. D2에서 공유한 내용입니다. 무대에서의 연설이 그다지 효과적이지 않아서 관심 있는 독자들에게 도움이 되길 바라면서 적어봤습니다.
기본 원리
수정
이 원리는 정말 간단합니다! 서식 있는 텍스트 편집을 지원하는 브라우저의 경우 실제로 문서의 designMode 속성을 on으로 설정한 다음 document.execCommand('commandName'[, UIFlag[, value]])를 실행할 수 있습니다. commandName 및 값은 MSDN 및 MDC에서 찾을 수 있습니다. 예를 들어 글꼴을 굵게 표시하려면 document.execCommand('bold', false)를 실행합니다. 아주 간단하죠? 그러나 일반적으로 명령은 텍스트를 선택한 후에 실행되고 선택한 텍스트의 서식이 지정된다는 점은 주목할 가치가 있습니다. 각 브라우저에는 선택되지 않은 텍스트에 대해 이 명령을 실행하기 위한 다양한 처리 방법이 있습니다. 예를 들어 IE는 커서에 있는 레이블의 내용을 형식화할 수 있지만 다른 브라우저는 어떤 처리도 수행하지 않습니다. 자세히 설명하세요. 동시에 UIFlag 매개변수를 true로 설정하면 명령에 의해 트리거된 모든 사용자 인터페이스가 표시됩니다(있는 경우). 오늘 튜토리얼에서는 모두 false이며 값은 특정 commandName에서만 사용할 수 있습니다. , 구체적으로 위에 제공된 두 링크를 참조하세요.
현재 문서에 영향을 주지 않기 위해 일반적인 접근 방식은 페이지에 iframe 요소를 삽입한 다음 iframe(iframe.contentWindow.document를 통해 얻음)에서 문서를 작동하는 것입니다.
아주 간단하죠? 다음에 하나 만들어 보겠습니다.
간단한 편집
편집
이 예제에서는 YUI를 사용합니다. 익숙하지 않아도 상관없습니다. 여기서는 DOM만 사용합니다. 이벤트의 몇 가지 기본적인 크로스 플랫폼 방법.
스캐폴딩
unobtrusive는 오랫동안 언급되지 않았다는 점을 강조하고 싶습니다. 즉, JavaScript가 비활성화된 경우에도 우리 편집기는 textarea 요소의 향상된 기능입니다. 사용자는 텍스트 영역을 통해 콘텐츠를 편집할 수도 있습니다.
이 예에는 텍스트 영역이 하나만 있습니다. 도구 모음의 각 항목을 유지하기 위해 인스턴스 변수를 사용합니다.
인스턴스 초기화는 render라는 메서드에 배치됩니다. 이 단계의 페이지와 코드는 1단계를 참조하세요.
iframe 생성 및 텍스트 영역 교체
앞서 말했듯이 프레임워크를 설정하고 iframe을 생성하면 편집기의 모든 작업이 iframe의 문서 내에서 수행됩니다. 그리고 텍스트 영역을 숨깁니다. 2단계에서 볼 수 있듯이 이미 iframe이 있지만 아무 것도 입력할 수 없습니다. 이는 designMode를 활성화하지 않은 것입니다.
designMode 켜기
이 단계에는 많은 것들이 포함되며 핵심이기도 합니다. iframe의 문서를 가져오고 외부 Blank.html을 사용하는 대신 프로그래밍 방식으로 빈 페이지를 iframe에 쓰는 방법을 만들겠습니다. YAHOO.realazy.RTE.htmlContent 클래스 속성을 사용하여 빈 페이지의 HTML을 저장합니다. . 모든 것이 준비되면 디자인 모드를 켤 수 있습니다. 페이지 및 코드 세부정보는 3단계를 참조하세요. 보세요, 우리는 이미 iframe에 내용을 입력할 수 있습니다.
툴바 만들기
작동에 필요한 툴바! 이 방법으로만 iframe의 콘텐츠를 제어하고 편집기라고 부를 수 있습니다. 여기서는 너무 많은 기능을 구현하지 않고 글꼴, 굵게, 기울임꼴, 밑줄, 왼쪽, 가운데, 오른쪽, 하이퍼링크 및 그림을 예로 선택하면 됩니다. 크로스 플랫폼의 경우 Mozilla Midas 사양이 좋은 참고 자료입니다. 좋아요, 4단계를 보세요. 보기 흉하기는 하지만 도구 모음이 나옵니다. 또한 CSS를 사용하여 iframe의 너비를 일부 조정했습니다.
툴바에 조건 추가
글쎄, 툴바는 사라졌고 편집기는 "사람처럼" 보이지만 효과는 없습니다... 예상대로입니다. . 그런 다음 편집기 콘텐츠가 도구 모음에 응답할 수 있도록 일부 이벤트를 도구 모음에 바인딩합니다. 이 단계에서는 execCommand를 다시 봉인합니다. 앞서 언급했듯이 UIFlag를 항상 false로 설정합니다. 코드가 있는 곳에 진실이 있습니다. 5단계를 참조하세요. IE를 사용하고 계시다면 먼저 일시적으로 다른 브라우저로 전환해 주시기 바랍니다. 도구 모음이 작동하고 있습니다!
IE 문제 해결
글쎄, 내 조언을 듣지 않고 계속 IE를 사용한다면 글꼴과 글꼴 크기 외에는 다른 것을 사용할 수 없다는 것을 알게 될 것입니다. 왜? 다른 브라우저에서 텍스트를 선택한 다음 도구 모음에서 항목을 클릭한 후에도 선택한 텍스트가 여전히 선택되어 있는 것을 본 적이 있습니까? IE의 경우 도구 모음을 클릭하면 선택한 텍스트가 즉시 선택 상태를 잃어 실패합니다. 따라서 클릭한 도구 모음 텍스트가 선택된 상태로 유지되도록 할 수 있다면 IE의 문제는 해결될 것입니다.
Microsoft는 HTML 태그에 선택할 수 없는 매우 이상한 속성을 제공합니다. On으로 설정되어 있으면 클릭한 요소로 전송되지 않으므로 텍스트가 선택됩니다.
6단계를 참조하세요. 이는 IE 문제를 해결하는 열쇠이기도 합니다. 나는 이것에 대해 생각하는 데 많은 시간을 보냈습니다.