[HTML] contenteditable =“true”가 더티 HTML을 생성하는 이유
모든 것이 역사에 달려 있습니다. 이 contenteditable속성은 원래 Microsoft 고유의 것입니다. HTML5가 존재하기 전에 IE5.5에 추가되었습니다. 유용함이 입증되었지만 사양이 없었기 때문에 각 공급 업체는이를 리버스 엔지니어링하고 [1] 약간의 비틀어 추가했습니다 (사양이 없을 때 발생하는 경향이 있음). 각 공급 업체가 다른 방식으로 구현하고 인기있는 웹 사이트 [ 2] 이러한 차이점을 해결하기 위해 사용했지만 각 공급 업체가 해당 사이트를 손상시키지 않고 공통된 동작을 표준화하는 것은 어려웠습니다. 그래서 우리는 우리가 가진 것에 갇히게되었습니다.
예를 들어 Opera는 Enter 키를 누를 때 <p> 요소로 선호한다고 말한 방식으로 추가 한 반면 Safari / WebKit은 <div> s를 사용하고 Firefox는 <br/> s를 사용합니다.
- 일부 리버스 엔지니어링 노트 오페라의 앤 반 Kesteren의에서
- 제가 Opera에서 일했을 때 Writely (현재 Google Docs로 이름이 변경됨)가 대표적인 예였습니다.
contenteditable="true"속성은 단지 사용자가 요소 콘텐츠 편집을 정의하고있다. 사용자 인터페이스는 브라우저에 따라 다릅니다. 이것은 실제로 많이 다른 Enter 처리에도 적용됩니다. 일부 브라우저는 br요소를 생성 div하고 일부는 p요소를 생성하고 일부는 요소를 생성 합니다.
여기서 "의미 적 마크 업"에 대한 질문은 의미가 없습니다. 브라우저는 입력에 의해 사용자가 의미하는 바를 알 수있는 방법이 없기 때문에 "의미 적 마크 업"이라는 슬로건이 일반적으로 사용되는 느슨한 의미, 즉 structure 에서도 의미에 해당하는 마크 업을 선택할 수 없습니다 . 예를 들어, 일부 텍스트, 그것을 bolds 및 프레스 사용자 유형을 입력 할 경우, 그는 잘 제목을 할 의미 -하지만 브라우저는 정말 알 수 없다 (아직도 덜 그것은 말하자면, 수, 여부를 추측 할 수 h2또는 h3).
Enter 문제를 처리하는 방법에는 두 가지가 있습니다. onkeypress요소에 대한 이벤트 핸들러를 가지고 Enter를 원하는대로 처리 할 수 있습니다. 하지만 복사 및 붙여 넣기 작업에는 영향을주지 않습니다. 여러 줄 텍스트가 삽입되면 브라우저는 줄 바꿈을 다르게 처리합니다.
다른 방법은 사용자가 입력 한 콘텐츠 처리의 다양성을 처리하는 것입니다. 거기에서 원하는 방식으로 일을 표준화 할 수 있습니다. 하지만 사용자는 자신의 콘텐츠가 브라우저에 표시되는 방식에서 잘못된 인상을받을 수 있습니다.
출처
https://stackoverflow.com/questions/22089800