개발자 도구 · HTML WYSIWYG 편집기
execCommand가 더 이상 사용되지 않는 이유와 브라우저 편집기가 대신 사용하는 것
· 작동 방식
HTML 내용 편집 가능 개발자 워크플로
document.execCommand의 상승과 하락, 출력이 일관되지 않은 이유, 그리고 대신 Selection, Range 및 beforeinput을 기반으로 최신 편집기를 구축하는 방법을 다룹니다.
안전하지 않은 한 줄 굵은 버튼 — execCommand('bold') 및 사용 중단 경고로 열립니다.
굵은 버튼은 한 번의 호출이 될 수 있습니다. 편집 화면에 초점을 맞춘 다음 `document.execCommand`에게 현재 선택 항목에 `bold`을 적용하도록 요청하세요. ToolAcre는 브라우저가 contenteditable 요소 내에서 캐럿과 선택된 범위를 소유하기 때문에 여전히 해당 경로를 사용합니다. 간결한 호출은 편리하지만 결과 트리를 예측할 수 없게 만드는 것은 아닙니다.
코드는 거절을 일반적인 가능성으로 간주합니다. 해당 명령 래퍼는 예외를 포착하고 브라우저가 작업을 거부했음을 알리고 작성자를 소스 모드로 안내합니다. 이러한 대체 조치는 한 번의 도구 모음 클릭이 항상 하나의 특정 요소를 생성하거나 모든 엔진에서 동일하게 작동한다고 약속하는 것보다 더 정직합니다.
execCommand가 수행한 작업 및 출처 — 초기 Internet Explorer의 기원과 모든 브라우저에서 채택되는 내용을 설명합니다.
동일한 래퍼는 굵게, 기울임꼴, 정렬되지 않은 목록과 정렬된 목록, 서식 제거, 실행 취소, 다시 실행, 블록 서식 지정, 링크 및 링크 해제를 구동합니다. 이는 도구 모음에 실제로 존재하는 명령입니다. 이 문서에서는 구현 시 결코 노출되지 않는 정렬, 색상, 글꼴, 표, 이미지 또는 기타 친숙한 서식 있는 텍스트 기능으로 목록을 확장하지 않습니다.
모든 명령은 실시간 편집 가능한 DOM에 대해 실행됩니다. 그 후 패널은 현재 innerHTML에서 소스, 미리보기, 단어 수 및 제거 보고서를 새로 고칩니다. 따라서 저장된 결과는 명령 로그가 아닙니다. 이는 요청된 작업을 수행하거나 거부한 후 브라우저가 남겨둔 구조를 필터링하여 직렬화한 것입니다.
명령 API가 더 이상 사용되지 않는 이유: 브라우저는 다양한 DOM 모양을 생성할 수 있습니다.
API는 편집자 작성자에게 각 변형에 대한 정확한 구조적 계약을 제공하지 않기 때문에 지원 중단이 중요합니다. ToolAcre 제한 사항은 특히 중첩 목록과 관련하여 엔진 간에 동작이 다르다는 점을 명시적으로 경고합니다. 표시되는 목록은 중첩 또는 래퍼 선택 사항이 다른 브라우저에서 생성된 마크업과 다르지만 허용될 수 있습니다.
모든 브라우저, 버전 또는 명령에 특정 호환성 결과가 있다는 주장을 지원하는 저장소 소스는 없습니다. 안전 설명은 더 좁습니다. 이 구현은 더 이상 사용되지 않는 API를 호출하고 거부를 포착하며 탈출구로 직접 소스 편집을 제공합니다. 행렬을 추정하는 대신 사용하려는 브라우저와 작업을 테스트하십시오.
선택 및 범위는 관련 대안이지만 이 도구는 이를 구현하지 않습니다.
선택 및 범위는 선택된 DOM 경계를 설명하고 명시적인 트리 조작을 지원할 수 있지만 ToolAcre는 이를 사용하여 대체 형식화 엔진을 구현하지 않습니다. 해당 API의 이름을 현재 코드 경로인 것처럼 명명하면 제품 설명이 잘못됩니다. 여기서 브라우저 명령은 mutator로 유지되고 sanitizer는 출력 경계로 유지됩니다.
사용자 정의 모델은 마크, 블록, 트랜잭션 및 선택 매핑을 소유할 수 있지만 이는 테스트가 다른 제품 아키텍처입니다. 이 경량 편집기는 의도적으로 그러한 기계에 대한 주장을 피합니다. 검토 가능한 계약은 시각적 작업이 브라우저 종속 DOM을 생성할 수 있는 반면 소스 모드는 실제로 복사되거나 다운로드될 필터링된 마크업을 표시한다는 것입니다.
beforeinput은 이 편집기의 형식 지정 경로의 일부가 아닙니다.
또한 구현은 편집 의도를 사용자 정의 트랜잭션으로 변환하기 위해 `beforeinput`을 가로채지 않습니다. 입력 이벤트는 브라우저가 표면을 변경한 후에만 새로 고침을 트리거합니다. 붙여넣기와 놓기는 예외입니다. 이러한 이벤트는 방지되고 클립보드 또는 전송 페이로드는 필터링되며 결과 HTML 또는 일반 텍스트만 삽입됩니다.
이러한 구별은 광범위한 아키텍처 주장을 방해합니다. ToolAcre는 붙여넣기 게이트를 소유하지만 모든 키 입력 변형을 소유하지는 않습니다. 일반적인 입력, 삭제, Enter 동작 및 도구 모음 명령은 브라우저 편집 작업으로 유지됩니다. 새니타이저는 직렬화된 출력을 검토합니다. 편집기를 이전의 입력 중심 프레임워크로 바꾸거나 모든 중간 DOM 돌연변이를 정규화하지 않습니다.
작업 예: 이 편집기가 실제로 생성하는 레거시 명령 출력을 검사합니다.
구체적인 확인을 위해 짧은 문장 2개를 입력하고 구문 1개를 선택한 후 굵게 누르세요. HTML 소스로 전환하고 해당 문구 주변의 요소를 검사하십시오. ToolAcre는 삭제 중에 레거시 `b`을 `strong`에 매핑하므로 필터링된 결과는 실시간 편집 명령이 처음에 레거시 태그를 선택한 경우에도 의미가 있을 수 있습니다.
목록으로 반복한 다음 실행 취소하세요. 도구 모음은 `insertUnorderedList` 및 `undo`을 보냅니다. 별도의 신청 내역을 유지하지 않습니다. 브라우저가 거부하면 상태 영역에 그렇게 표시됩니다. 중첩이 이상해 보이는 경우 소스 모드가 지원되는 수정 경로입니다. 버튼 라벨이 아닌 관찰된 출력이 증거입니다.
여기서 다루지 않는 내용: 여기서는 대체 편집기 아키텍처가 구현되지 않습니다.
이 문서에서는 최신 대체 명령 시스템, 협업 트랜잭션, 결정론적 크로스 브라우저 트리 또는 사용자 정의 실행 취소 스택에 대한 지원을 주장하지 않습니다. 또한 소스는 단축키 레지스트리가 아닌 도구 모음 동작을 정의하므로 키보드 단축키에 대한 동작을 추론하지 않습니다. 지원되지 않는 기능은 묵시적인 기능이 아닌 생략된 상태로 남아 있습니다.
보안은 명령 선택과 별개입니다. 허용 목록은 내보낸 마크업을 필터링하고 미리보기는 스크립트 없이 샌드박스 처리되지만, 새니타이저에서는 일반적인 적대적 입력 XSS 필터로서의 사용을 명시적으로 거부합니다. 신뢰할 수 없는 게시 콘텐츠를 허용하는 서버에는 여전히 적절한 서버측 HTML5 파서 새니타이저와 대상별 정책이 필요합니다.
요약: 명령이 아닌 DOM을 소유합니다. — 마이그레이션 경로를 요약하고 결과 마크업이 WYSIWYG-to-HTML 도구에서 검사하는 방식을 요약합니다.
검사할 수 있는 결과를 소유하세요. 이 편집기에서 명령은 브라우저에 콘텐츠 편집 가능한 트리를 변경하도록 요청한 다음 허용 목록이 해당 트리의 직렬화를 지원되는 하위 집합으로 다시 작성합니다. 소스 모드는 브라우저 편집 동작이 불편하거나 일관성이 없을 때 핸드오프를 노출하고 실용적인 복구 표면을 제공합니다.
실제 작업과 동일한 브라우저에서 일회용 샘플을 사용하세요. 제공된 명령만 실행하고, 링크와 중첩을 검사하고, 의존하기 전에 실행 취소를 테스트하고, 읽은 후에만 필터링된 HTML을 복사하세요. 해당 워크플로는 ToolAcre가 이미 기본 편집 API를 대체한 것처럼 가장하지 않고 지원 중단을 존중합니다.