수색…
통사론
- bool 지원 = document.execCommand (commandName, showDefaultUI, valueArgument)
매개 변수
| commandId | 값 |
|---|---|
| ‧ 인라인 서식 지정 명령 | |
| backColor | 색상 값 문자열 |
| 대담한 | |
| createLink | URL 문자열 |
| fontName | 글꼴 패밀리 이름 |
| fontSize | "1", "2", "3", "4", "5", "6", "7" |
| foreColor | 색상 값 문자열 |
| 파업 | |
| 위에 쓴 | |
| 풀리다 | |
| 블록 서식 지정 명령 | |
| 지우다 | |
| formatBlock | "hd", "h1", "h2", "h3", "h4", "h5", "h6", "p", "pre" |
| forwardDelete | |
| insertHorizontalRule | |
| insertHTML | HTML 문자열 |
| insertImage | URL 문자열 |
| insertLineBreak | |
| insertOrderedList | |
| insertParagraph | |
| insertText | 텍스트 문자열 |
| insertUnorderedList | |
| justifyCenter | |
| justifyFull | |
| justifyLeft | |
| justifyRight | |
| 부주의 한 | |
| Ï 클립 보드 명령 | |
| 부 | 현재 선택된 문자열 |
| 절단 | 현재 선택된 문자열 |
| 풀 | |
| Ï 기타 명령 | |
| defaultParagraphSeparator | |
| 다시 하다 | |
| selectAll | |
| styleWithCSS | |
| 끄르다 | |
| CSS 사용 |
서식 지정
사용자에 서식을 추가 할 수 contenteditable (등, 기울임에 대한 대담에서 Ctrl-I에 대한 Ctrl 키-B)를 포맷하거나으로부터 이미지, 링크, 또는 마크 업을 드래그 앤 드롭하여 같은 일반적인 키보드 단축키와 같은 브라우저의 기능을 사용하여 문서 또는 요소 클립 보드.
또한 개발자는 JavaScript를 사용하여 현재 선택 영역 (강조 표시된 텍스트)에 서식을 적용 할 수 있습니다.
document.execCommand('bold', false, null); // toggles bold formatting
document.execCommand('italic', false, null); // toggles italic formatting
document.execCommand('underline', false, null); // toggles underline
contenteditable의 변경 듣기
대부분의 양식 요소 (예 : change , keydown , keyup , keypress )에서 작동하는 이벤트는 contenteditable 작동하지 않습니다.
대신의 변경을들을 수 contenteditable 과 내용을 input 이벤트입니다. 가정 contenteditableHtmlElement 하는 JS DOM 오브젝트 인 contenteditable :
contenteditableHtmlElement.addEventListener("input", function() {
console.log("contenteditable element changed");
});
시작하기
HTML 속성 contenteditable 은 HTML 요소를 사용자가 편집 할 수있는 영역으로 변환하는 간단한 방법을 제공합니다
<div contenteditable>You can <b>edit</b> me!</div>
네이티브 서식있는 텍스트 편집
JavaScript 및 execCommand W3C 를 사용하면 현재 포커스가있는 contenteditable 요소 (특히 캐럿 위치 또는 선택 영역)에 더 많은 편집 기능을 추가로 전달할 수 있습니다.
execCommand 함수 메소드는 3 개의 인수를받습니다.
document.execCommand(commandId, showUI, value)
-
commandIdString. 사용 가능한 ** commandId ** s 목록에서
(참조 : 매개 변수 → commandId ) -
showUIBoolean (구현되지 않음,false사용) -
valueString 명령에 명령 관련 문자열 값 이 필요한 경우, 그렇지 않으면""입니다.
(참조 : 매개 변수 → 값 )
"bold" 명령 과 "formatBlock" 사용하는 예제 ( 값 이 필요한 위치) :
document.execCommand("bold", false, ""); // Make selected text bold
document.execCommand("formatBlock", false, "H2"); // Make selected text Block-level <h2>
빠른 시작 예 :
<button data-edit="bold"><b>B</b></button>
<button data-edit="italic"><i>I</i></button>
<button data-edit="formatBlock:p">P</button>
<button data-edit="formatBlock:H1">H1</button>
<button data-edit="insertUnorderedList">UL</button>
<button data-edit="justifyLeft">⇤</button>
<button data-edit="justifyRight">⇥</button>
<button data-edit="removeFormat">×</button>
<div contenteditable><p>Edit me!</p></div>
<script>
[].forEach.call(document.querySelectorAll("[data-edit]"), function(btn) {
btn.addEventListener("click", edit, false);
});
function edit(event) {
event.preventDefault();
var cmd_val = this.dataset.edit.split(":");
document.execCommand(cmd_val[0], false, cmd_val[1]);
}
<script>
jsFiddle 데모
기본 서식있는 텍스트 편집기 예제 (최신 브라우저)
마지막 생각들
오랜 시간 동안 (IE6) 존재하는 경우에도 execCommand 구현 및 동작은 브라우저마다 다르며 숙련 된 JavaScript 개발자에게는 "완벽한 기능을 갖춘 브라우저 간 호환 WYSIWYG 편집기"를 만드는 것이 어렵습니다.
아직 완전히 표준화되지는 않았지만 Chrome, Firefox, Edge 와 같은 최신 브라우저에서 꽤 괜찮은 결과를 기대할 수 있습니다. 다른 브라우저 및 HTMLTable 편집 등과 같은 더 많은 기능을 더 잘 지원해야하는 경우 이미 존재 하고 강력한 서식있는 텍스트 편집기를 찾아야합니다.
execCommand ( "copy")를 사용하여 textarea에서 클립 보드로 복사
예:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<textarea id="content"></textarea>
<input type="button" id="copyID" value="Copy" />
<script type="text/javascript">
var button = document.getElementById("copyID"),
input = document.getElementById("content");
button.addEventListener("click", function(event) {
event.preventDefault();
input.select();
document.execCommand("copy");
});
</script>
</body>
</html>
document.execCommand("copy") 현재 선택을 클립 보드에 복사합니다.