사이트 방문자를 위해 편집 가능한 웹 페이지 콘텐츠를 설정하는 방법 배우기

Contenteditable 속성 사용

웹 사이트의 텍스트를 사용자가 편집 할 수 있도록하는 것이 예상보다 쉽습니다. HTML은이 목적을 위해 contenteditable 속성을 제공합니다.

contenteditable 속성은 HTML5 의 출시와 함께 2014 년에 처음 소개되었습니다. 브라우저가 관리하는 내용을 사이트 방문자가 브라우저에서 변경할 수 있는지 여부를 지정합니다.

Contenteditable 속성 지원

대부분의 최신 데스크톱 브라우저는이 특성을 지원합니다.

여기에는 다음이 포함됩니다.

대부분의 모바일 브라우저에서도 마찬가지입니다.

Contenteditable 사용 방법

편집 가능한 HTML 요소에 속성을 추가하기 만하면됩니다. 가능한 값은 true, false 및 inherit입니다. Inherit는 기본값이며, 요소가 상위 값을 가짐을 의미합니다. 마찬가지로 새로 편집 할 수있는 콘텐츠의 하위 요소는 값을 false로 변경하지 않는 한 편집 할 수 있습니다. 예를 들어, DIV 요소를 편집 가능하게 만들려면 다음을 사용하십시오.

Contenteditable로 편집 가능한 할 일 목록 만들기

편집 가능한 컨텐트는 로컬 스토리지와 페어링 할 때 가장 적합하므로 세션과 사이트 방문 사이에 컨텐트가 유지됩니다.

  1. HTML 편집기에서 페이지를 엽니 다.
  2. myTasks 라는 글 머리표가없는 순서가 지정되지 않은 목록을 만듭니다 .

    • 일부 작업
    • 다른 작업
  1. contenteditable 속성을
      요소에 추가합니다.
      이제 편집 할 수있는 할 일 목록이 있지만 브라우저를 닫거나 페이지를 벗어나면 목록이 사라집니다. 해결책 : 간단한 스크립트를 추가하여 작업을 localStorage에 저장합니다.
    • 문서의 에 jQuery에 대한 링크를 추가하십시오.