HTML5 Contenteditable 속성 프런트 엔드에서 웹 콘텐츠 편집
새로운 기능 중 하나 HTML5 나를 끌어 들인 것이 네이티브 프론트 엔드 편집자입니다. 이 기능은 일반적으로 콘텐츠 관리 시스템에 적용되어 브라우저에서 직접 콘텐츠를 편집하며 일반적으로 JavaScript 및 AJAX로 완벽하게 작성됩니다. HTML5를 사용하면 프로세스를 조금 더 쉽게 사용할 수 있습니다. contenteditable 속성.
그것이하는 일
요소에 적용되면이 속성을 사용하여 편집하다 내용을 아래 예제에서 보겠습니다.
쿠키 머핀 크로입니다. Faworki 덴마크어 비스킷입니다. Jujubes 분말 쿠키 케이크 비스킷 할바 할바. 비스킷 gummies 젤리 비스킷.
달콤한 롤 티라미수 초콜릿 바 설탕 매화 캐러멜 tootsie 롤 캐러멜. 초콜릿 케이크 wypas 솜 사탕 아이싱. Applicake 참깨는 감초 과자 크로 카라멜 맛있는 진저 브레드 비스킷을 스냅합니다. 도너츠 토피 사탕 수수.
이 예에서는 contenteditable 속성을 설정하고 참된 그래서 내용은 편집 가능하게된다. 이 속성에 대해 추가 할 수있는 두 개의 다른 값이 있습니다.
그릇된반대의 경우 : 내용을 편집 할 수 없습니다.상속하다; 콘텐츠가 수정 될 때 콘텐츠를 직접 부모 편집 가능하다..
- 데모보기
위의 데모를 확인한 경우 브라우저에서 바로 컨텐츠를 편집 할 수 있습니다. 그러나이 요소는 변경 사항 저장을 다루지 않으므로 변경 한 후에 페이지를 새로 고치면 내용이 되돌아갑니다.
변경 사항을 저장하는 방법
변경 사항 저장은 데이터를 저장할 위치에 따라 달라집니다. 일반적으로 데이터베이스에 저장됩니다. 그러나 데이터베이스 액세스가 없으므로이 자습서에서는 변경 사항을 저장하는 방법을 보여줍니다. localStorage. 그렇게하기 위해 jQuery를 사용하여 코드를 더 간단하게 만들 것이다. 웹 응용 프로그램 용 로컬 저장소의 과거, 현재 및 미래에 대한 추가 참고 자료를 살펴볼 것을 권장합니다..
우선, 단추 우리의 콘텐츠 옆.
달콤한 롤 티라미수 초콜릿 바 설탕 매화 캐러멜 tootsie 롤 캐러멜. 초콜릿 케이크 wypas 솜 사탕 아이싱. Applicake 참깨는 감초 과자 크로 카라멜 맛있는 진저 브레드 비스킷을 스냅합니다. 도너츠 토피 사탕 수수.
여기서 아이디어는 버튼을 클릭하면 변경 사항을 저장한다는 것입니다. 이제 스크립트를 통해이 이벤트를 설정해 보겠습니다.
var theContent = $ ( '# content2'); on ( 'click', function () var editedContent = theContent.html (); localStorage.newContent = editedContent;);
이 코드는 콘텐츠에서 마지막으로 변경된 내용을 포함하는 localStorage에 새 키를 만듭니다. Firebug 또는 개발자 도구를 사용하여 데이터가 성공적으로 저장되었는지 여부를 확인할 수 있지만 버튼을 누르십시오. Firefox 사용자의 경우 DOM 패널에서 localStorage를 검색하십시오. Chrome과 Safari에서 '리소스'탭 아래에서 볼 수 있습니다..
그런 다음이 데이터를 검색하여 다음과 같이 콘텐츠를 업데이트 할 수 있습니다.
if (localStorage.getItem ( 'newContent')) theContent.html (localStorage.getItem ( 'newContent'));
위의 코드는 항목을 식별합니다. newContent 이 경우 localStorage에서 값을 가져 와서 선택한 요소에 값을 전달합니다. # content2. 이 시점에서 페이지를 새로 고침 할 때 우리가 만든 변경 사항을 계속 볼 수 있습니다..
- 데모보기
- 소스 다운로드
최종 생각
예전에 우리가 시연했던 것처럼 프런트 엔드 편집기 기능을 추가하는 데 몇 시간 또는 심지어 수주가 소요될 수 있습니다. 현재이 속성을 사용하는 데는 단 1 초 밖에 걸리지 않습니다., contenteditable.
caniuse.com에 따르면,이 속성은 이미 IE7 +에서 (놀랍게도) Firefox (12), Chrome 20, Safari 5.1, Opera 12와 같은 다른 브라우저에서도 지원됩니다. 즉,이 요소는 평화롭게 사용할 수 있습니다. 구형 브라우저에서 fallbacsk를 설정하지 않고도 마음을 바꿀 수 있습니다..
