From 5d1e04e054a3b0cd2e2affb6db73733186b624c0 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 3 Apr 2021 02:14:46 +0900 Subject: Web/Guide/HTML/Editable_content の更新 (#273) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 英語版の2021/02/20までの変更を反映 --- .../ja/web/guide/html/editable_content/index.html | 31 +++++++++++++--------- 1 file changed, 18 insertions(+), 13 deletions(-) (limited to 'files/ja/web') diff --git a/files/ja/web/guide/html/editable_content/index.html b/files/ja/web/guide/html/editable_content/index.html index 92fec4523f..8977e3a42a 100644 --- a/files/ja/web/guide/html/editable_content/index.html +++ b/files/ja/web/guide/html/editable_content/index.html @@ -14,9 +14,18 @@ tags: - text input translation_of: Web/Guide/HTML/Editable_content --- -

HTML では、すべての要素を{{原語併記("編集可能状態", "editable")}} にすることができます。JavaScript のいくつかのイベントハンドラーと併用することで、ウェブページを多機能でかつ高速に動作するリッチテキスト・エディターにしてしまうことも可能です。本記事では、この機能に関する情報を提供します。

+
+

警告

+

execCommand() 仕様書で警告しているように、この機能はすべてのユーザーエージェントで一貫した、または完全な実装が行われているわけではなく、それに加えて、 Document.execCommand() リファレンスページでは非推奨とされています。したがって、このページの内容の多くは、本番コードで使用するには信頼できません。

+
+ +

HTML では、すべての要素を{{原語併記("編集可能状態", "editable")}} にすることができます。JavaScript のいくつかのイベントハンドラーと併用することで、ウェブページを多機能でかつ高速に動作するリッチテキストエディターにしてしまうことも可能です。本記事では、この機能に関する情報を提供します。

-

どのような挙動を示すか

+
+

注: Firefox 63 Beta/Dev Edition では、ブラウザー間の互換性を高めるために、一部のリッチテキスト編集機能を既定で無効にしています。具体的には、 {{htmlelement("img")}}, {{htmlelement("table")}} および絶対位置指定要素のオブジェクトのサイズ変更、インラインテーブルを編集して行や列の追加や削除すること、および絶対位置指定要素の移動を可能にするグラバーです。詳しくは {{bug("1449564")}} を参照してください。

+
+ +

どのような挙動を示すか

編集可能にする個所と密接に関係する要素へ {{htmlattrxref("contenteditable")}} 属性を設定しなければなりません。

@@ -30,11 +39,11 @@ translation_of: Web/Guide/HTML/Editable_content

{{EmbedLiveSample('How_does_it_work')}}

-

コマンドを実行する

+

コマンドを実行する

-

HTML 要素の contenteditable 属性を true に設定すると、{{domxref("document.execCommand()")}} メソッドが使用可能になります。これは、編集可能な部分の内容物を操作する コマンド を実行できます。ほとんどのコマンドは文書の選択範囲に作用します (例えば、テキストに太字や斜体などのスタイルを適用する) が、新しい要素を挿入する (リンクを追加するなど) コマンドや行全体に作用する (インデント) コマンドもあります。contentEditable を使用しているときに execCommand() を呼び出すと、現在アクティブな編集可能要素に作用します。

+

HTML 要素の contenteditable 属性を true に設定すると、{{domxref("document.execCommand()")}} メソッドが使用可能になります。これは、編集可能な部分の内容物を操作する コマンド を実行できます。ほとんどのコマンドは文書の選択範囲に作用します (例えば、テキストに太字や斜体などのスタイルを適用する) が、新しい要素を挿入する (リンクを追加するなど) コマンドや行全体に作用する (インデント) コマンドもあります。contentEditable を使用しているときに execCommand() を呼び出すと、現在アクティブな編集可能要素に作用します。

-

マークアップ生成の違い

+

マークアップ生成の違い

さまざまなブラウザーで contenteditable を使用することは、ブラウザーが生成するマークアップの違いのために、長い間苦痛でした。例えば、編集可能な要素内で新しいテキストの行を作成するために Enter/Return を押下したときのようなシンプルな場合でさえ、主要なブラウザー間で扱いが異なっていました (Firefox は {{htmlelement("br")}} 要素を挿入、IE/Opera は {{htmlelement("p")}} を使用、Chrome/Safari は {{htmlelement("div")}} を使用)。

@@ -54,7 +63,7 @@ translation_of: Web/Guide/HTML/Editable_content 
document.execCommand("defaultParagraphSeparator", false, "br");
-

セキュリティ

+

セキュリティ

セキュリティ上の理由で Firefox は、JavaScript コードがクリップボード関連の機能 (コピーや貼り付けなど) を使用することをデフォルトで許可していません。about:config を使用して以下の設定を行うと、これらを有効化できます:

@@ -63,10 +72,9 @@ user_pref("capability.policy.allowclipboard.sites", "https://www.mozilla.org"); user_pref("capability.policy.allowclipboard.Clipboard.cutcopy", "allAccess"); user_pref("capability.policy.allowclipboard.Clipboard.paste", "allAccess"); -

例: シンプルであるが完成されたリッチテキストエディター

+

例: シンプルであるが完成されたリッチテキストエディター

-
-
<!doctype html>
+
<!doctype html>
 <html>
 <head>
 <title>Rich Text Editor</title>
@@ -218,11 +226,8 @@ img.intLink { border: 0; }
 </body>
 </html>
 

-
- -
注記: ページ内でエディターの作成や挿入を標準化する方法を知りたい場合は、より複雑なリッチテキストエディターの例 をご覧ください。
-

関連情報

+

関連情報