내용 부호 ​​속성으로 인라인 텍스트 편집기를 만듭니다

인라인 텍스트 편집기를 구축하는 것은 사소한 일이 아닙니다. 프로세스는 대상 요소를 편집 가능하게하여 잠재적 인

예외를 처리함으로써 시작됩니다. 편집자 만들기 이 편집기를 구축하려면 HTML 요소의 내용을 동적으로 수정해야합니다. 기본 HTML 구조는 다음과 같습니다 SyntaxError 편집 가능한 각 요소는 고유 한 ID가 필요합니다. 또한 간단한 도구 모음을 추가하겠습니다 : 이제 기능을 추가합시다. 텍스트 입력을 보여주기 위해 클릭 이벤트를 H1 버튼에 첨부하겠습니다. 이를 테스트하려면 간단한 웹 서버 (예 : )를 사용하십시오. 프로젝트 디렉토리에서 실행; 서버가 시작하여 HTML 파일에 대한 링크를 제공합니다. 전체 페이지 편집 에

사용

는 개별 요소를 편집하는 데 이상적입니다. 페이지의 거의 모든 컨텐츠를 수정하려면

속성을 ​​사용하십시오. 이것은 전체 문서에 영향을 미칩니다. 로 활성화하고 .

로 비활성화하십시오 이것은 설계 및 컨텐츠 생성을 분리 할 때 특히 유용합니다. 디자이너는 레이아웃 및 자리 표시 자 텍스트를 제공하는 반면 콘텐츠 제작자는 실제 콘텐츠를 채 웁니다. 실험하려면 브라우저의 개발자 콘솔을 열고

Edit Document<br><br><br>
<div id="editor">
  <h1 id="title">A Nice Heading.</h1>
  <p>Last Edited By - Monty Shokeen</p>
  <p id="content">Some content that needs correction.</p>
</div><br><br>

를 입력하고 Enter를 누릅니다. 전체 페이지가 편집 가능해야합니다.

결론

<div id="toolbar">
  H1
  H2
</div><br><br>

속성은 기사 수정 또는 사용자 댓글을 수정하는 것과 같이 빠른 편집을 단순화합니다. 처음에 IE 5.5에서 소개 된이 제품은 이제 광범위한 브라우저 지원 (오페라 미니 제외)을 갖춘 Whatwg 표준입니다. JavaScript는 웹 개발의 초석입니다. 학습 곡선이 있지만 수많은 프레임 워크와 라이브러리를 사용할 수 있습니다. 추가 자원을 위해 Envato의 시장을 탐색하십시오 이 튜토리얼은 기본 인라인 편집기를 보여주고 풍부한 형식의 형식 버튼을 추가하는 의 기본 사항을 다루었습니다.

이 게시물은 웹 개발자, 기술 작가, 프리랜서 및 오픈 소스 기고자 인 Jacob Jackson의 업데이트가 포함됩니다.

위 내용은 내용 부호 ​​속성으로 인라인 텍스트 편집기를 만듭니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!