HTML 온라인 편집기 만 들 기 어 려 운 분석

HTML 온라인 편집기
사실 여러 가지 실현 방식 이 있 는데 현재 가장 많이 사용 되 고 호환성 이 가장 좋 은 것 은 iframe 방식 이다.<iframe src="" frameborder="0"></iframe>
이 빈 iframe 만 은 안 됩 니 다.자 바스 크 립 트 로 편집 가능:iframe.contentWindow.document.designMode = "on";
iframe.contentWindow.document.contentEditable = true;다시 말 하면 HTML 온라인 편집 기 는 편집 가능 한 iframe 이다.
굵게,기울 임 꼴,밑줄 긋 기,링크 추가 등 기능 은 어떻게 실현 합 니까?
브 라 우 저 는 이러한 기능 을 실현 하 는 인터페이스 exec Command:iframe.contentWindow.document.execCommand(cmd, isDefaultShowUI, value); 을 제공 합 니 다.
이 세 개의 매개 변 수 는 다음 과 같다.

cmd:명령 텍스트 가 많 습 니 다.IE 는 여기,이곳 을 볼 수 있 고 Firefox 는 여기,이곳 을 볼 수 있 습 니 다.

isDefaultShowUI:인 터 랙 션 인터페이스 를 기본적으로 표시 할 지 여부 입 니 다.예 를 들 어 링크 를 추가 할 때 인터페이스 로 링크 를 입력 할 수 있 습 니 다.그러나 이 매개 변 수 는 호환성 문제 가 존재 합 니 다.일반적으로 false 로 설정 하여 사용 하지 않 고 인 터 랙 션 인터페이스 를 만 듭 니 다.

value:들 어 오 는 값 입 니 다.일부 명령 은 생략 할 수 있 습 니 다.

execCommand 의 문 제 는 생 성 된 코드 가 표준 에 맞지 않 을 수 있 습 니 다.예 를 들 어 IE 에서 텍스트 를 굵게 사용 하 는 것 은 strong 태그 가 아 닌 b 태그 입 니 다.
대화 식 문제
사용 자 는 항상 편집기 에 입력 할 수 없습니다.예 를 들 어 굵기,그림 삽입 등 기능 은 단 추 를 통 해 작 동 합 니 다.사용자 가 선택 한 텍스트 를 굵게 하려 고 한다 고 가정 하면 굵게 하기 단 추 를 누 르 면 선택 영역 과 초점 도 따라 갈 수 있 기 때문에 선택 영역(선택 한 텍스트)을 잃 어 버 리 면 작업 이 완료 되 지 않 습 니 다.그림 을 삽입 할 때 삽입 위치 도 잃 어 버 리 는 것 과 같다.
마지막 편집기 에 나타 난 선택 영역 을 저장 해 야 한 다 는 것 이다.편집기 에 초점 을 맞 출 때 타이머(setInterval)로 현재 선택 영역 을 가 져 오 는 방안 입 니 다.지역 구 프로 그래 밍 은 평소에 거의 사용 되 지 않 았 고 호환성 문제 도 많 았 다.주로 마이크로소프트 MSDN(TextRange ControlRange)과 모 질 라 의 MDC(Range Selection)를 참고 했다.
리 턴 문제
IE 에서 Enter 를 누 르 면 단락 을 바 꾸 고

를 생 성 하지만 Firefox 에 서 는 줄 을 바 꾸 고
를 생 성 합 니 다.이 문 제 를 해결 하려 면 키 다운 이 벤트 를 감청 해 야 합 니 다.버튼 이 리 턴 인 것 을 감지 하면'p>

'를 삽입 합 니 다.
표준 코드 가 져 오기
어떻게 편집 한 내용 을 가 져 옵 니까?이 문 제 는 간단 합 니 다.iframe 페이지 body 의 innerHTML 만 가 져 오 면 됩 니 다.var content = iframe.contentWindow.document.body.innerHTML;그러나 IE 의 innerHTML 은 매우 표준 적 이지 않 습 니 다.태그 이름 은 대문자 이 고 속성 은 따옴표 가 없 으 며 단일 태그 도 끝 이 없습니다.Firefox 에서 가 져 온 코드 라 도 약간의 흠 이 있 습 니 다.이 럴 때 는 코드 를 정규 표현 식 으로 표준화 처리 해 야 한다.
총결산
더 이상 말 하지 않 겠 습 니 다.HTML 편집 기 를 한 번 만 들 면 CKEditor 이 얼마나 강 한 지 알 수 있 을 것 입 니 다.