다른 사람의 웹사이트 편집: contenteditable 및 designMode

처음 devtools를 열고 웹사이트의 콘텐츠를 변경했을 때 실제로 해킹을 당했다고 생각했습니다. "오 마이 갓, 내가 어떤 종류의 미친 힘을 잠금 해제 했나요?"

브라우저를 다시 로드하면 사라지는 로컬 변경 사항이라는 사실을 거의 알지 못했습니다. 그래도 우리가 그렇게 할 수 있다고 생각하는 것은 멋진 일입니다.

제가 강조하고 싶었던 일종의 관련 API가 실제로 몇 개 있기 때문에 오늘 그것을 가져왔습니다.

내용 편집 가능

contenteditable는 "true" 값이 할당될 때 프런트 엔드에서 요소의 콘텐츠를 수정할 수 있도록 허용하는 HTML 속성입니다.
contenteditable는 원하는 모든 HTML 요소에 추가할 수 있고 사용자가 해당 요소의 콘텐츠를 수정할 수 있기 때문에 좋습니다.

이제 첫 번째 생각이 웹 사이트를 위한 저렴한 비주얼 편집기인 경우 불행하게도 contenteditable is not really a great solution . 업계에서 이것이 올바른 접근 방식이 아니라는 데 동의한 많은 함정이 있습니다.

("Why ContentEditable is Terrible "참조)

그럼에도 불구하고 공유하고 싶었던 꽤 재미있고 흥미로운 속성입니다. 그리고 contenteditable이 제가 공유하고 싶은 다음 항목에 대한 좋은 소개이기 때문에 이 문제를 제기합니다.

디자인 모드

document라는 designMode 객체에 대한 API가 있으며 "on" 또는 "off"로 설정할 수 있습니다. 이것designMode의 멋진 점은 전체 문서에서 해당contenteditable 상태를 활성화할 수 있다는 것입니다.

따라서 내 웹사이트로 이동하여 devtools를 열고 document.designMode를 "on"로 설정한 다음 devtools를 닫으면 이제 웹사이트의 모든 항목을 편집할 수 있습니다.

document.designMode = "on"

즉, 몇 번의 클릭과 키 입력만으로 다음과 같이 설정할 수 있습니다.



이것으로:



어떻게에 대한? 내 웹 사이트를 훼손했습니다.

이 두 가지 브라우저 기능에 대해 들어본 적이 없더라도 매우 드물기 때문에 놀라지 않습니다. 그 이유는 그들에게 아주 좋은 사용 사례가 많지 않기 때문입니다.
designMode를 켜거나 끌 수 있는 브라우저 확장 프로그램을 만들 수 있습니다. 그런 다음 사용자가 웹 페이지를 쉽게 수정하여 팀원에게 피드백을 제공하거나 스크린샷으로 캡처하거나 Slack 또는 GitHub로 보낼 수 있습니다. 잘 모르겠지만 거기에 무언가가 있다고 확신하지만 대부분의 사람들에게 자주 유용하지는 않을 것입니다.

… New York Times의 풍자적인 기사 제목을 만드는 것을 좋아하는 저와 같은 사람이 아닌 한.



법적인 이유로 명시적으로 말씀드리자면, 저는 이러한 기능을 사용하여 웹사이트를 수정하거나 잘못된 정보를 퍼뜨리는 것을 권장하거나 권장하지 않습니다. 그것은 끔찍한 일입니다.

그럼에도 불구하고 이것들은 내가 공유하고 싶다고 생각한 멋지고 흥미로운 API입니다.



읽어주셔서 정말 감사합니다. 이 기사가 마음에 드셨다면 . 나를 지원하는 가장 좋은 방법 중 하나입니다. sign up for my newsletter 또는 새 기사가 게시되는 시기를 알고 싶은 경우에도 할 수 있습니다.


austingil.com에 원래 게시되었습니다.