사이트 방문자가 편집 할 수있는 웹 페이지 콘텐츠 만들기

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

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

Contenteditable 속성 지원

대부분의 최신 데스크톱 브라우저는이 특성을 지원합니다. 여기에는 다음이 포함됩니다.

• Chrome 4.0 이상
• Internet Explorer 6 이상
• Firefox 3.5 이상
• Safari 3.1 이상
• Opera 10.1 이상
• Microsoft Edge

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

Contenteditable 사용 방법

편집 가능한 HTML 요소에 속성을 추가하기 만하면됩니다. 세 가지 값이 있습니다.참된, 그릇된 과 상속하다. 상속 요소가 부모의 값을 취한다는 것을 의미하는 기본값입니다. 마찬가지로 새로 편집 할 수있는 콘텐츠의 하위 요소는 값을 변경하지 않는 한 수정할 수 있습니다. 그릇된. 예를 들어, DIV 요소 편집 가능, 사용 :

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

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

1. HTML 편집기에서 페이지를 엽니 다.
2. 글 머리 기호가있는 정렬되지 않은 목록 만들기 나의 과제:
   2. 어떤 과업
   4. 또 다른 과제
5. 더하기contenteditable 속성을
   요소:
   이제 편집 할 수있는 할 일 목록이 있지만 브라우저를 닫거나 페이지를 벗어나면 목록이 사라집니다. 해결책 : 간단한 스크립트를 추가하여 작업을 localStorage에 저장합니다.
8. jQuery에 대한 링크를 문서의 이 예는 Google CDN을 사용하지만 직접 호스트하거나 다른 CDN을 사용할 수 있습니다.
11. 페이지 하단의 태그를 추가하고 스크립트를 추가하십시오. 이것이 jQuery의 시작입니다. document.ready 함수를 호출하고 문서가 완전히로드 된 후 브라우저에이 스크립트를로드하도록 지시합니다.

내부 document.ready 함수를 사용하여 스크립트를 추가하여 작업을 localStorage에로드하고 이전에 저장 한 작업을 가져옵니다. $ (document.ready (function () {

1. $ ( "# myTasks") blur (function () {// 커서가 #myTasks 요소를 벗어날 때
4. localStorage.setItem ( 'myTasksData', this.innerHTML); // localStorage에 저장합니다.
7. });
10. if (localStorage.getItem ( 'myTasksData')) {// localStorage에 내용이있는 경우
13. $ ( "# myTasks") .html (localStorage.getItem ( 'myTasksData')); // 페이지에 내용 넣기
16. }
17. });

전체 페이지의 HTML은 다음과 같습니다.

나의 과제

목록에 항목을 입력하십시오. 브라우저가 자동으로 저장하므로 브라우저를 다시 열면 여전히 여기에 있습니다.

• 어떤 과업
• 또 다른 과제