온라인 WYSIWYG HTML editor_javascript 기술의 구현 원칙에 대한 간략한 분석

요즘 웹사이트 개발은 점점 사용자 경험을 촉진하고 사용자에게 편의를 제공하는 도구가 점점 더 많아지고 있으며 온라인 HTML 콘텐츠 편집기는 "오래된" 편집기 중 하나로 간주되어야 합니다. 간단한 기능을 사용하면 텍스트 색상, 글꼴 크기 등과 같은 텍스트 스타일 제어를 사용자에게 제공할 수 있고, 복잡한 기능을 사용하면 Word와 유사한 강력한 기능도 제공할 수 있습니다. 현재 오픈소스 편집기는 많지만 실제로 사용하기 쉬운 편집기는 많지 않기 때문에 개선 작업이 항상 진행 중입니다.

현재 인터넷에 있는 대부분의 편집기는 매우 강력한 기능을 가지고 있지만, 상대적으로 사용 중에도 많은 구성이 필요합니다. 당연히 코드가 "부풀어오르게" 됩니다. 그렇게 강력한 편집기가 필요하지 않다면 코드가 복잡하지 않기 때문에 직접 구현할 수 있습니다. 다음은 참고용으로만 사용된 약간의 개인적인 경험입니다(ExtJS HTMLEditor를 예로 들어 설명).

1. 초기화. 페이지 로드가 완료되면 페이지에 IFrame을 추가합니다(선택 사항). 여기서 주의할 점은 페이지의 상태를 확인하려면 페이지가 완전히 로드될 때까지 기다렸다가 특정 요소를 찾을 수 없는 오류를 방지하기 위해 진행해야 한다는 점입니다.

2. 편집 기능을 엽니다. IFrame을 편집 가능하게 만듭니다(아래 코드는 ExtJS의 HTMLEditor에서 가져온 것입니다).

코드 복사 코드는 다음과 같습니다.

// iframe의 창 개체 가져오기
getWin : 함수(){
           Ext.isIE 반환 ? this.iframe.contentWindow : window.frames[this.iframe.name];
},

//iframe의 문서 객체 가져오기
getDoc: 함수(){
           return Ext.isIE ? this.getWin().document: (this.iframe.contentDocument || this.getWin().document);
},

//문서 개체를 열고 FireFox와 호환되도록 초기화 내용을 작성합니다
doc = this.getDoc();
doc.open();
doc.write('');
//문서 개체 편집 모드 열기
doc.designMode = "on";
doc.close();

이렇게 하면 이 간단한 편집기에 콘텐츠를 작성할 수 있습니다.

3. 편집기의 내용을 가져오세요. 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

//편집기의 본문 개체 가져오기
var body = doc.body || doc.documentElement;
//편집기 내용 가져오기
var 콘텐츠 = body.innerHTML;
//특수문자 교체 등 콘텐츠 처리
//일부 코드

//콘텐츠 반환
콘텐츠 반환;

4. 스타일 설정을 추가합니다. 위의 편집기는 기본 기능을 구현하지만 실제로는 너무 간단합니다. 몇 가지 간단한 스타일 구현을 추가해야 합니다. 문서의 execCommand 메소드는 이러한 아이디어를 가능하게 합니다.

코드 복사 코드는 다음과 같습니다.

//균일한 실행 명령 방법
함수 execCmd(cmd, 값){
//doc 객체를 얻으려면 위 코드를 참고하세요
//execCommand 메소드를 호출하여 명령을 실행합니다
doc.execCommand(cmd, false, value === 정의되지 않음 ? null : value);
};

//선택한 글꼴을 굵게 변경, Ctrl-B
execCmd('bold');
//밑줄, Ctrl-U
execCmd('밑줄');
//이탤릭체로 변경, Ctrl-I
execCmd('italic');
//텍스트 색상 설정
execCmd('forecolor', Ext.isSafari || Ext.isIE ? '#' color : color);
//커서 위치에 내용 삽입
함수 insertAtCursor(text){
//win 객체를 얻으려면 위의 코드를 참조하세요
if(Ext.isIE){
      win.focus();
var r = doc.selection.createRange();
If(r){
         r.collapse(true);
          r.pasteHTML(text);                        }else if(Ext.isGecko || Ext.isOpera){
      win.focus();
​​ execCmd('InsertHTML', text);
}else if(Ext.isSafari){
​​ execCmd('InsertText', text);
}
}

5. 한 단계 더 나아가세요. 이제 스타일을 변경할 수 있습니다. 편집기에 도구 모음이 있으면(필수적임) 도구 모음의 버튼이 커서 위치의 스타일에 따라 자동으로 강조 표시되거나 정상적으로 표시되기를 원합니다. document의 queryCommandState() 메서드를 사용하면 이러한 아이디어를 실현할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

//doc 객체를 얻으려면 반대쪽을 참조하세요
//커서의 굵은 글씨 여부
var isBold = doc.queryCommandState('bold');
if(isBold){
//굵게 버튼 스타일 변경
}
//물론 위의 코드는 병합될 수 있습니다. 이것은 단지 힌트일 뿐입니다

//밑줄
doc.queryCommandState('underline');
//기울임꼴
doc.queryCommandState('italic');

이 글에서는 에디터 구현에 대한 간단한 아이디어만 제공하고, 일부 코드는 직접 사용할 수도 있습니다. 자신만의 편집기를 구현하고 싶은 친구들은 간단하고 명확하며 확장이 가능한 ExtJS의 HTMLEditor 코드를 참조하는 것이 좋습니다.

마지막 알림: 브라우저 호환성 문제에 주의를 기울이고 호환성 테스트가 끝날 때까지 기다리지 마십시오. 이렇게 많은 양의 JavaScript 코드의 경우 조정이 더 어렵습니다.