개발자 도구 · HTML WYSIWYG 편집기
WYSIWYG 편집기가 서식을 HTML로 바꾸는 방법: contenteditable 설명
· 작동 원리
HTML 내용 편집 가능 개발자 워크플로
모든 요소를 편집 가능하게 만드는 contenteditable 속성, 사용자가 입력하고 형식을 지정할 때 브라우저가 DOM을 변경하는 방법, 해당 DOM이 복사한 HTML이 되는 방법을 설명합니다.
굵게 눌렀습니다. <strong>은 어디에서 왔나요? — 버튼을 클릭하는 것과 마크업을 보는 것 사이의 간격으로 열립니다.
굵게 표시된 도구 모음 버튼은 붓처럼 느껴지지만 브라우저는 결과를 문서 트리에 표시해야 합니다. 선택한 문구는 편집 명령 및 엔진에 따라 <b> 또는 <strong> 요소가 될 수 있습니다. 개발자의 임무는 브라우저별 변형을 모든 태그나 위험한 속성을 허용하지 않고도 다른 페이지가 읽을 수 있는 HTML로 바꾸는 것입니다. 화면에 보이는 것은 독립적인 서식 레이어가 있는 워드 프로세싱 파일이 아니라 편집 가능한 DOM입니다.
contenteditable: 페이지를 편집 가능하게 만드는 속성 — 편집 호스트, 캐럿 배치 및 브라우저가 편집 동작을 소유하는 방법을 설명합니다.
contenteditable="true"는 요소를 편집 호스트로 만듭니다. 브라우저는 아래에 있는 DOM 트리를 사용하여 내부에서 캐럿 이동, 선택, 삽입 및 삭제를 관리합니다. ToolAcre의 편집 화면은 이 브라우저 기능을 사용하고 시각적 모드와 소스 모드를 모두 노출합니다. 콘텐츠는 서식 있는 텍스트 서버에 제출되지 않고 페이지에 유지됩니다. 붙여넣은 HTML에는 선택되지 않은 신뢰할 수 있는 문서에 입력하면 안 되는 요소와 속성이 포함될 수 있으므로 붙여넣기 이벤트는 별도의 주의를 받습니다.
모든 키 입력은 DOM 변형입니다. 텍스트 노드의 성장, 요소의 래핑 및 분할, 텍스트가 변경되지 않은 것처럼 보이는 경우에도 트리가 변경되는 이유를 설명합니다.
입력하면 텍스트 노드가 생성되거나 확장됩니다. Enter를 누르면 블록이 분할될 수 있습니다. 선택 항목을 굵게 표시하면 범위가 래핑됩니다. 두 번 클릭한 후의 정확한 DOM은 개발자가 상상한 <strong> 문자열과 일치한다고 보장되지 않습니다. 브라우저는 다른 요소와 중첩을 선택합니다. ToolAcre는 현재 포맷을 위해 document.execCommand을 사용합니다. 해당 API는 더 이상 사용되지 않지만 여기에서는 모든 편집 작업에 대해 균일하게 구현된 드롭인 대체가 없으므로 편집기는 해당 출력을 표준 마크업이 아닌 정규화할 신뢰할 수 없는 입력으로 처리합니다.
라이브 DOM에서 HTML 문자열까지 - 편집된 트리를 복사할 수 있는 마크업으로 직렬화하는 방법을 설명합니다.
HTML을 복사하기 위해 편집기는 편집 화면의 innerHTML을 읽고 결과 문자열을 요소/속성 허용 목록을 통해 전달합니다. b와 같은 태그는 의미론적으로 강력하게 정규화됩니다. 허용되는 URL 구성표에 대해 허용되는 링크가 검사되고, 이벤트 핸들러 및 관련 없는 속성은 제거됩니다. 소스 모드는 또한 텍스트를 시각적 표면에 다시 넣기 전에 동일한 필터를 통해 텍스트를 전달합니다. 이는 임의 사용자의 적대적인 콘텐츠에 대한 범용 서버측 HTML 새니타이저가 아닌 편집기별 정리 경로입니다.
실제 사례: 굵은 문구가 포함된 두 단락 메모 — 입력, 선택 및 굵게 표시를 통해 DOM을 따른 다음 결과 마크업을 표시합니다.
“프로젝트 업데이트”와 “초안 준비”라는 두 개의 단락을 입력한 다음 두 번째 단락에서 “초안”을 선택하고 굵게 누릅니다. 브라우저는 <b>Draft</b>을 라이브 DOM에 삽입할 수 있습니다. 소스 모드로 전환하면 정규화 후 단락 내에서 <strong>Draft</strong>을 방출할 수 있는 ToolAcre의 새니타이저를 통해 전달됩니다. 일회용 문서에 붙여넣은 <img onerror="..."> 페이로드를 사용해 보세요. 출력 허용 목록에는 이미지나 이벤트 처리기 속성이 포함되지 않습니다. 이 예에서는 클릭에 하나의 범용 HTML 표현이 있다고 가정하는 대신 결과 마크업을 검사하는 이유를 보여줍니다.
동일한 작업이 다른 브라우저에서 다른 마크업을 제공하는 이유 - 브라우저별 편집 동작 및 편집자가 출력을 정규화하는 이유를 다룹니다.
브라우저마다 편집 명령, 줄 바꿈 및 선택 경계를 다르게 구현합니다. 표시되는 동일한 단락이라도 서로 다른 중첩 범위 또는 블록 요소를 사용하여 직렬화할 수 있습니다. 정규화 단계에서는 일부 차이가 줄어들지만 WYSIWYG 표면을 표준이 보장되는 직렬 변환기로 만들지는 않습니다. ToolAcre는 시각적 결과와 함께 소스를 표시하므로 이상한 중첩을 수정할 수 있습니다. 해당 미리보기는 스크립트 실행을 허용하지 않는 샌드박스 속성이 있는 iframe에서 실행되어 해당 미리보기에 도달하는 안전하지 않은 조각의 영향을 제한합니다.
여기서 다루지 않는 내용 - 공동 편집, 실행 취소 스택 및 전체 편집기 프레임워크는 범위를 벗어납니다.
이 페이지는 공동 편집, 완전한 실행 취소 기록, 세련된 이메일 클라이언트 또는 전체 편집기 프레임워크를 약속하지 않습니다. Contenteditable은 자체적으로 타사 CMS가 허용하는 마크업을 결정할 수 없으며 문자열 기반 허용 목록은 신뢰할 수 없는 사용자가 콘텐츠를 제출할 수 있는 서버 측 HTML5 파서 새니타이저를 대체하지 않습니다. 샌드박스 미리보기는 출력 정리와는 별도의 방어 수단입니다. 모든 대상에서 임의의 JavaScript 또는 적대적인 URL을 안전하게 만들지도 않습니다.
요점: 편집기는 볼 수 있는 DOM입니다. 메커니즘과 ToolAcre의 HTML WYSIWYG 편집기가 브라우저를 떠나지 않고도 서식이 생성하는 마크업을 노출하는 방법을 요약합니다.
편집기는 보고 검사할 수 있는 DOM입니다. ToolAcre의 HTML WYSIWYG 편집기는 브라우저에서 로컬로 생성되는 필터링된 HTML과 시각적 서식 지정 작업을 직접 비교할 수 있는 방법을 제공합니다. 일회용 메모를 굵게 입력하고 소스 모드로 전환하여 대상이 실제로 지원하는 요소만 유지하세요.