H5 리치 텍스트 편집기에 대한 자세한 소개

H5 전역 속성 contenteditable을 사용하여 DOM 요소와 해당 하위 요소를 편집 가능하게 만드세요

<div  contenteditable id="editor">
   </div>

스타일 코드

html,
body {
  overflow: hidden;
  width: 100%;
  height: 100%;
}* {
  margin: 0;
  padding: 0;
}
#editor {
  width: 100%;
  height: 100%;
  outline: none;
  padding-left: 15px;
}

* Chrome 49에서 테스트되었으며 유효합니다

다음 방법을 사용하면 사용자가 다음을 수행할 수 있습니다. 초기화 입력 텍스트 내용은 p 요소에 래핑됩니다

<div  contenteditable id="editor" spellcheck="false"><p><br/></p></div>

기본 규칙은 다음과 같습니다

否则将直接作为#editor元素的文本节点，即<div  contenteditable id="editor" spellcheck="false">文本内容</div>同事点击Enter将新增div元素,即<div  contenteditable id="editor" spellcheck="false">文本内容<div></div></div>

코드 보기

#editor에 사용된 모든 요소는 #editor가 빈 요소 사용자가 콘텐츠를 다시 출력하면 기본 규칙이 적용됩니다. 여기서는 이 상태가 발생하면

p 요소의 끝

위치 지정 커서 코드

function cursorToEnd(element){
    
    element.focus();var range = window.getSelection();

    range.selectAllChildren(element);
    range.collapseToEnd();
    
}

window.getSelection() IE9에서는 이미 지원합니다.

위치 지정이 완료되지 않으면 다음과 같은 상황이 발생할 수 있습니다

<div  contenteditable id="editor" spellcheck="false">
    111111
    <p><br/></p>
</div>

위 내용은 H5 리치 텍스트 편집기에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!