サーチ…
構文
- bool supported = document.execCommand（commandName、showDefaultUI、valueArgument）
パラメーター
| commandId | 値 |
|---|---|
| インラインフォーマットコマンド | |
| バックカラー | 色値文字列 |
| 大胆な | |
| createLink | URL文字列 |
| fontName | フォントファミリ名 |
| フォントサイズ | "1"、 "2"、 "3"、 "4"、 "5"、 "6"、 "7" |
| foreColor | 色値文字列 |
| ストライクスルー | |
| 上付き文字 | |
| リンクを解除する | |
| ブロックフォーマットコマンド | |
| 削除 | |
| formatBlock | 「h4」、「h5」、「h6」、「p」、「pre」、「h3」、「h4」、「h5」、 |
| forwardDelete | |
| insertHorizontalRule | |
| insertHTML | HTML文字列 |
| insertImage | URL文字列 |
| insertLineBreak | |
| insertOrderedList | |
| insertParagraph | |
| insertText | テキスト文字列 |
| insertUnorderedList | |
| justifyCenter | |
| justifyFull | |
| justifyLeft | |
| justifyRight | |
| アウトデント | |
| Ïクリップボードコマンド | |
| コピー | 現在選択されている文字列 |
| カット | 現在選択されている文字列 |
| ペースト | |
| Ïその他のコマンド | |
| defaultParagraphSeparator | |
| やり直す | |
| すべて選択 | |
| styleWithCSS | |
| 元に戻す | |
| CSSを使う |
書式設定
ユーザーは、書式設定のための一般的なキーボードショートカット（ 太字の 場合はCtrl-B 、 斜体の 場合はCtrl-Iなど）や画像、リンク、またはマークアップをドラッグアンドドロップするなど、ブラウザの機能を使用して、 contenteditableドキュメントまたは要素にフォーマットを追加できます。クリップボード。
さらに、開発者は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では機能しません。
代わりに、 inputイベントでコンテンツcontenteditableコンテンツの変更を聴くことができます。仮定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 **のリストから
（ パラメータ →commandIdを参照） -
showUIBoolean（実装されていませんshowUI使用しfalse）。 -
valueStringコマンドにコマンド関連のString 値が必要な場合はそれを返し、それ以外の場合は""返します 。
（参照： パラメータ →値 ）
"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開発者execCommandは「完全な機能を備え、クロスブラウザ対応の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")は現在の選択内容をクリップボードにdocument.execCommand("copy")
