개발자 도구 · HTML WYSIWYG 편집기
Word 또는 Google Docs에서 웹 편집기에 붙여넣으면 어떻게 되나요?
· 작동 방식
HTML 내용 편집 가능 텍스트 정리
mso 스타일부터 래퍼 요소 및 글꼴 스택까지 서식 있는 텍스트 붙여넣기가 전달하는 내용을 설명하고 결과 마크업이 사이트에 도달하기 전에 읽는 방법을 보여줍니다.
Word에서는 괜찮아 보였습니다. 간격과 글꼴이 사이트 디자인에 맞지 않는 붙여넣은 기사로 열립니다.
워드 프로세서에서 복사한 단락은 소스에서 세련되게 보일 수 있으며 사이트와 충돌하는 글꼴, 간격 및 래퍼가 있는 상태로 도착할 수 있습니다. ToolAcre는 해당 프레젠테이션을 도매로 보존하지 않습니다. 붙여넣기 리스너는 원본 리치 마크업이 삽입되기 전에 작업을 가로채고 대신 필터링된 표현을 선택합니다.
중요한 증거는 첫 번째 시각적 인상이 원본 문서와 유사한지 여부가 아니라 소스 보기입니다. 편집기는 의도적으로 범위를 좁혔습니다. 제목, 단락, 강조, 목록, 인용문, 코드와 유사한 요소 및 링크는 살아남을 수 있지만 레이아웃 컨테이너, 클래스 이름, ID 및 인라인 스타일 속성은 출력 계약에 속하지 않습니다.
클립보드는 텍스트 이상의 것을 전달합니다. 서식 있는 텍스트 사본에는 일반 텍스트와 함께 HTML 버전이 포함되어 있음을 설명합니다.
클립보드는 한 번의 복사 작업에 대해 `text/html` 및 `text/plain`을 노출할 수 있습니다. 핸들러는 두 가지를 모두 요구합니다. HTML 페이로드가 존재하면 해당 문자열을 삭제하고 `insertHTML`를 사용하여 다시 작성된 조각을 삽입합니다. 리치 HTML이 없는 경우에만 `insertText`을 사용하여 일반 페이로드를 삽입합니다.
해당 우선 순위는 모든 응용 프로그램에 대한 보편적인 설명이 아니라 이 패널에 대해 코드로 입증되었습니다. 풍부한 페이스트가 외관을 잃어도 목록을 유지할 수 있는 이유를 설명합니다. 소스 애플리케이션은 클립보드 HTML을 작성했지만 ToolAcre의 허용 목록은 편집 가능한 화면에 허용되는 부분을 결정합니다.
이 편집기가 리치 붙여넣기에서 제거하는 것: 지원되지 않는 요소, 속성 및 주석
지원되지 않는 요소는 두 가지 방법으로 처리됩니다. 알 수 없는 일반 래퍼는 래핑되지 않아 해당 단어가 남아 있는 반면, 스크립트, 스타일, iframe, 양식, SVG, MathML 및 기타 위험하거나 편집기가 아닌 컨테이너는 해당 콘텐츠와 함께 제거됩니다. 주석과 문서 유형도 초안에 포함되지 않고 삭제됩니다.
속성은 두 번째 게이트를 향합니다. 허용되는 속성은 요소별로 이름이 지정되므로 클래스, ID, 스타일, 데이터 속성 및 모든 이벤트 핸들러가 제거됩니다. 이는 유용한 소스 스타일도 사라질 수 있지만 ToolAcre가 붙여넣기를 필터링한 후 소스별 클래스 이름과 인라인 프리젠테이션이 대상 스타일시트와 싸울 수 없음을 의미합니다.
소스별 래퍼 및 스타일이 허용 목록에서 유지되지 않는 이유
저장소는 캡처된 Word 또는 Google Docs 픽스처를 제공하지 않으므로 이 문서에서는 특정 릴리스에 대한 정확한 `mso-` 클래스, 내부 ID 또는 래퍼 시퀀스를 작성하지 않습니다. 허용 목록에 의해 입증된 결과를 기술할 수 있습니다. 클래스와 스타일은 어떤 소스 애플리케이션이 이를 제공했는지에 관계없이 제거됩니다.
소스에 구애받지 않는 규칙은 깨지기 쉬운 카탈로그보다 더 강력한 편집 지침입니다. 붙여넣은 후 제거 알림을 검사합니다. 지원되지 않는 래퍼, 금지된 속성 또는 거부된 URL과 같은 고유한 이유를 기록합니다. 보고서는 원래 모든 조각을 생성한 애플리케이션을 식별하는 척하지 않고 이 구현이 무엇을 폐기했는지 알려줍니다.
작업 예: 세 개의 단락을 붙여넣고 필터링된 마크업을 읽습니다.
세 개의 짧은 단락을 복사하여 가운데 문장을 굵게 만들고 마지막 문장을 목록으로 만듭니다. 붙여넣은 후 소스 모드로 전환합니다. Paragraph, Strong, ul 및 li 요소는 허용 목록 내에 있고 주변 div는 래핑 해제되고 스타일 속성은 사라집니다. 레거시 b 및 i 태그는 Strong 및 em으로 정규화됩니다.
이제 일회용 소스 샘플에 안전하지 않은 이벤트 속성을 추가하고 시각적 모드로 돌아갑니다. 해당 소스가 DOM이 되기 전에 속성이 제거됩니다. 이는 적대적인 제출물을 안전하게 게시하는 것이 아니라 편집 경계를 보여줍니다. 이 프로젝트는 파서 차이에 대해 명시적으로 경고하고 신뢰할 수 없는 콘텐츠에 적합한 서버 측 살균제가 필요합니다.
일반 텍스트 붙여넣기는 클립보드가 HTML 플레이버를 제공하지 않는 경우에만 사용됩니다.
일반 텍스트 삽입은 대체 기능이며 이 도구 모음에서 사용자가 선택할 수 있는 "서식 없이 붙여넣기" 명령이 아닙니다. 클립보드가 HTML을 제공하는 경우 ToolAcre는 해당 분기를 사용합니다. 브라우저 또는 운영 체제 바로 가기는 일반 붙여넣기 전용을 노출할 수 있지만 저장소는 특정 바로 가기 동작을 정의하거나 약속하지 않습니다.
텍스트만 사용할 수 있는 경우 `insertText`는 해당 문자를 캐럿에 배치하도록 브라우저에 요청합니다. 이후에 생성된 모든 단락 구조는 브라우저 편집 동작의 영향을 받습니다. 다른 애플리케이션의 줄바꿈이 자동으로 CMS에서 기대하는 구조가 된다고 가정하는 대신 소스 보기를 사용하여 의도적인 제목이나 목록을 추가하세요.
여기에 포함되지 않는 내용 — 자동 정리 규칙, CMS별 붙여넣기 필터 또는 추적된 변경 사항 유지
이 워크플로는 추적된 변경 사항, 설명, 페이지 레이아웃, 글꼴, 색상, 표 또는 이미지를 유지하지 않습니다. 허용된 이미지는 아웃바운드 요청과 오류 처리 표면을 생성하므로 이미지는 의도적으로 없습니다. 또한 편집기에는 하나의 Office 제품군에 대한 충실도를 보장하는 소스별 정리 프로필이나 스위치가 없습니다.
로컬로 붙여넣어도 최종 대상이 동일한 하위 집합을 허용한다는 것을 증명하지 못합니다. CMS는 더 많은 태그를 제거하거나 링크를 다시 작성하거나 자체 정책을 시행할 수 있습니다. 편집기 출력을 대상 문서와 비교하고, 지원되지 않는 형식을 잃어버리면 단순한 프리젠테이션이 아닌 정보가 제거될 경우 원본을 보관하십시오.
요약: 게시하기 전에 확인하세요. 검사 습관을 요약하고 ToolAcre의 HTML WYSIWYG 편집기를 사용하여 로컬에 붙여넣고 마크업이 다른 곳으로 이동하기 전에 확인할 수 있는 방법을 요약합니다.
게시하기 전에 살펴보세요: 대표적이고 민감하지 않은 조각을 붙여넣고, 제거 경고를 읽고, 소스를 검사하고, 필터링된 결과를 미리 봅니다. ToolAcre는 귀하의 사이트에 외국 프리젠테이션을 자동으로 전달하는 대신 하나의 명시적인 허용 목록을 제공합니다. 이렇게 하면 정리가 표시되지만 임의의 HTML이 안전한 것으로 인증되지는 않습니다.
필수 구조가 사라진 경우 지원되는 제목, 단락, 목록, 강조 및 링크를 사용하여 다시 구성하세요. 대상이 더 적은 것을 받아들이면 더 단순화하십시오. 올바른 아티팩트는 소스 문서와 가장 가까운 시각적 모방이 아닙니다. 의미와 대상 정책이 모두 이해되는 검토된 마크업입니다.