contenteditable 属性

7.6 編集

7.6.1 ドキュメントの領域を編集可能にする:contenteditable コンテント属性

contenteditable 属性は、そのキーワードが空文字列、truefalse となる列挙属性です。空文字列と true キーワードは、true 状態に対応付けられます。false キーワードは、false 状態に対応付けられます。さらに 3 つ目の状態があります。それは inherit 状態といい、指定がなかったときのデフォルト(そして、不正な値が指定されたときのデフォルト)になります。

true 状態は、該当の要素が編集可能であることを意味します。inherit 状態は、親要素が編集可能なら、該当の要素が編集可能であることを意味します。false 状態は、該当の要素は編集可能でないことを意味します。

element . contentEditable [ = value ]

contenteditable 属性の状態に基づき、"true", "false", "inherit" のいずれかを返します。

値をセットして、その状態を変更することが可能です。

新しい値がこれらの値のいずれでもない場合は、SyntaxError を投げます。

element . isContentEditable

該当の要素が編集可能であれば true を、そうでなければ false を返します。

contentEditable IDL 属性は、該当のコンテンツ属性が true 状態にセットされていれば "true" を、該当のコンテンツ属性が false 状態にセットされていれば "false" を返し、いずれでもなければ "inherit" を返さなければいけません。値をセットする場合、その値が大文字と小文字を区別せずに文字列 "inherit" と一致すれば、そのコンテンツ属性は削除されなければいけません。大文字と小文字を区別せずに文字列 "true" と一致すれば、そのコンテンツ属性は "true" にセットされなければいけません。大文字と小文字を区別せずに文字列 "false" に一致すれば、そのコンテンツ属性は "false" にセットされなければいけません。そして、指定された値が、上記のいずれでもなければ、この属性のセッターは SyntaxError 例外を発出しなければいけません。

isContentEditable IDL 属性は、取得時においては、該当の要素が編集ホストまたは編集可能であれば true を返し、そうでなければ false を返さなければいけません。

7.6.2 ドキュメント全体を編集可能にする:designMode IDL 属性

ドキュメントは designMode を持ちますが、それは有効または無効のいずれかとなります。

document . designMode [ = value ]

ドキュメントが編集可能であれば "on" を、そうでなければ "off" を返します。

値をセットしてドキュメントの現在の状態を状態を変更することが可能です。これはドキュメンにフォーカスを当て、そのドキュメントの選択状態をリセットします。

Document オブジェクトの designMode IDL 属性は、"on" と "off" の2つの値を取ります。値がセットされたら、大文字と小文字は区別せずに、これらの2つの値と比較されなければいけません。セットされた値が "on" に一致すれば、designMode は有効にし、"off" に一致すれば、designMode は無効しなければいけません。いずれでもなければ無視しなければいけません。

designMode が有効なら、この IDL 属性は "on" を、無効なら "off" を返さなければいけません。

最後にセットされた状態は、ドキュメントが破棄されるか状態が変更されるまで維持されなければいけません。また、designMode の初期値は無効でなければいけません。

designMode が向こうから有効に変更されるとき、ユーザーエージェントは、同期的に、ドキュメントのアクティブな範囲の開始と終了の境界点を Document の最初にリセットし、Document のルート要素があれば、それに対して、フォーカスを当てる手順を実行しなければいけません。

7.6.3 ページ内エディタのベストプラクティス

ウェブ制作者は、編集ホスト、および、これら編集メカニズムを通して生成されたマークアップ上で、'white-space' プロパティを値 'pre-wrap' にセットすることが推奨されます。デフォルトの HTML ホワイトスペースのハンドリングは、WYSIWYG 編集に良く適しているわけではありません。'white-space' がデフォルト値のままだと、行の折り返しが正しく機能しないでしょう。

デフォルトの 'normal' 値が使われているときに発生する問題の例として、ユーザーが "yellow␣␣ball" とタイプした場合を考えてみましょう。単語の間に 2 つのスペース(ここでは "␣" で表されています)があります。'white-space' のデフォルト値 ('normal') に対して編集ルールから得られる結果は、"yellow  ball" または "yellow  ball" のいずれかになるでしょう。つまり、2 つの単語の間には、ひとつの通常のスペースに加えて、ひとつのノーブレークスペースがあります。これは必然です。なぜなら、'white-space' の 'normal' という値は、連続したスペースを折りたたむことを要求するからです。

前者の場合、"yellow" だけならその行の最後に張り付くでしょうが、"yellow⍽" は次の行に送られるでしょう(ここではノーブレークスペースを表すために "⍽" が使われています)。後者の場合、"⍽ball" が行の最初にラップされるなら、それはノーブレークスペースによって字下げ効果に見えるでしょう。

しかし、'white-space' に 'pre-wrap' がセットされると、編集ルールでは、単に単語の間に 2 つの正規のスペースが入れられるだけでしょう。そして、その 2 つの単語は行の最後で分割され、そのスペースはレンダリングできれいに取り除かれるはずです。

7.6.4 Editing API

アクティブ範囲, 編集ホスト, 編集可能の用語定義や、編集ホスト編集可能な要素のユーザーインタフェース要件、execCommand(), queryCommandEnabled(), queryCommandIndeterm(), queryCommandState(), queryCommandSupported(), queryCommandValue() メソッド、テキスト選択、選択範囲削除アルゴリズムは、HTML Editing API 仕様で定義されています。ユーザーエージェントにおける編集の操作や undo/redo といった機能は、UndoManager と DOM Transaction 仕様で定義されています。[EDITING] [UNDO]


※ 原文:http://www.w3.org/TR/2014/REC-html5-20141028/editing.html#editing-0