* 仕様書

[REFS[
- [10] [CITE@en-US-x-hixie[HTML Standard]] ([TIME[2017-02-20 18:15:56 +09:00]]) <https://html.spec.whatwg.org/#best-practices-for-in-page-editors>
]REFS]

* 意味

[6] [[編集ホスト]]は、[[編集可能文脈]]です。

* 作成

[5] 
[FIG(short list)[
- [CODE(HTMLa)@en[contenteditable]]
- [CODE(DOMa)@en[designMode]]
]FIG]

[11] [[著者]]は、[[editing host]] やこれを使って作成された[[要素]]において、
[CODE(CSS)@en[[[white-space]]: [[pre-wrap]]]] を設定する[RUBYB[べき]@en[[[encouraged]]]]です。
[SRC[>>10]]

;; [12] これは、 [CODE(CSS)@en[[[white-space]]: [[normal][white-space: normal]]]]
の場合に、[[利用者]]が複数個連続して[[空白]]を入力すると
[CODE[U+0020]] と [CODE[U+00A0]] が自動的に併用されて、 [CODE[U+00A0]]
のために[[行折り返し]]が不自然な表示となるためです。 [SRC[>>10]]

* 挙動

[2] [KBD[Enter]] を押すと、[[段落]]が改められます。

[3] [CODE(HTMLe)@en[div]] [[要素]]内であれば、または特に[[要素]]内になければ、
新たな [CODE(HTMLe)@en[div]] [[要素]]が挿入されます。

[4] 末尾で新しい[[段落]]が挿入されると、新しい[[段落]]の中身は
[CODE(HTMLe)@en[br]] [[要素]]1つだけとなります。

** 問題

[23] [[要素]]の境界を[[利用者]]がうまく扱う方法がありません。境界で入力したときにどちらに入るかは
[[Webブラウザー]]次第で、[[利用者]]が指定する手段がありません。

[26] [[コピペ]]や [[DnD]] でも境界のどちら側になるかは[[Webブラウザー]]次第です。
例えば [CODE(HTMLe)@en[a]] [[要素]]内に [CODE(HTMLe)@en[img]] [[要素]]だけがあるとき、
両者をまとめて他の位置に移動させる良い方法がありません。

[24] [[コピペ]]で中途半端に [[CSS]] の指定が [CODE(HTMLa)@en[style]] [[属性]]に保存されることがあります。
どういう条件で何が保存されるのかは摩訶不思議です。

[14] [[コピペ]]で[[要素]]や [[CSS]] を保存せずに貼り付けさせることができません。 
([CODE[onpaste]] 時に貼り付けデータを得て自力で操作すればできないことはありませんが...)

[25] [[画像]]のサイズ変更の [[UI]] は [[IE]] や [[Firefox]] が実装していますが、
[[Chrome]] や [[Safari]] が実装していません。

* 選択子

[13] [CODE[:read-write]] と[[一致]]することがあります。

* 歴史

** 前史

[28] [CITE[WorldWideWeb]] には編集モードがありました。

[8] [[Web]] の流行が始まった90年代中頃、 [[Netscape Navigator Gold]] や
[[Microsoft FrontPage]]、[[ホームページビルダー]]といった [[WYSIWYG]]
型の [[HTMLエディター]]が登場しました。

しかしこの世代の製品は [[Webブラウザー]]とは別の独立した[[ソフトウェア]]として
[[HTML]] の編集機能を提供していました。 [[Netscape Navigator Gold]]
のように [[Webブラウザー]]と統合された製品も、 (内部的にどうなっていたのかは知りませんが、)
表示と編集は別々の機能で、表示中の文書を直接編集したり、編集機能を表示中の文書内に埋め込んだりすることはまだできませんでした。

[9] [[Microsoft Office]] は、独自の処理モデルを持った [[Web]] とは異なるソフトウェア群でしたが、
この時期に [[Web]] から色々な機能を取り入れました。 [[HTML]] の読み書きに加えて、
[[Web]] 風の [[URL]] を指定した[[ハイパーリンク]]のような機能も追加されていました。
[[ActiveX Document]] によって [[Internet Explorer]] の[[窓]]内に
[[Microsoft Office]] の文書を表示することもできました。こうした一連の機能群で
[[Microsoft]] が提示した世界観は、ある意味で後の時代の [CODE[contenteditable]]
のある [[Web]] を先取りしたものでした。 (現在の [[Google Docs]]
はそれが完全に [[Web]] 上に移ったものと理解できましょう。)

[31] [CITE@EN-US[Web Workshop - DHTML Editing Component]], [[Microsoft Corporation]], [TIME[2024-08-17T06:41:10.000Z]], [TIME[2000-12-02T04:32:42.375Z]] <https://web.archive.org/web/20001202042500/http://msdn.microsoft.com/workshop/Author/dhtml/edit/ref/cncpt.asp>


** IE

[27] 
[CITE[Creating Editable Web Pages in Internet Explorer 5.5]], [[Microsoft Corporation]], [TIME[2024-08-17T06:17:07.000Z]], [TIME[2000-11-21T20:03:33.649Z]] <https://web.archive.org/web/20001121195900/http://www.msdn.microsoft.com/workshop/browser/createwp.asp>

[29] 
[CITE@EN-US[Using MSHTML Editing]], [[InetSDK]], [TIME[2024-08-17T06:18:49.000Z]], [TIME[2000-12-02T05:39:15.395Z]] <https://web.archive.org/web/20001202053300/http://www.msdn.microsoft.com/workshop/browser/editing/mshtmleditor.asp>


[30] 
[CITE[The MSHTML Editing Platform in Microsoft Internet Explorer 5.5]], [[Microsoft Corporation]], [TIME[2024-08-17T06:19:17.000Z]], [TIME[2000-11-17T13:27:42.268Z]] <https://web.archive.org/web/20001117132100/http://msdn.microsoft.com/workshop/browser/mshtmleditplatf.asp>


** 

[7] [CODE[contenteditable]] と [CODE[designMode]] も参照。

[1] [CITE@en[Web Applications 1.0 r5728 clarify the focusablity of editing hosts]]
( ([TIME[2010-12-31 12:50:00 +09:00]] 版))
<http://html5.org/tools/web-apps-tracker?from=5727&to=5728>

[15] [[GitHub]] の[[エディター]]は、開発者にとっては使いやすいのでしょうが、
[[利用者]]にとってはすべての人が満足するものとはなっていません。
[[Webブラウザー]]の標準の挙動と異なることが、[[利用者体験]]を明確に悪化させています。

[KEY[BackSpace]] で削除される範囲が謎です。ただ前の1文字を削除するのではなく、
複数の行?や段落?がまとめて削除されることがあったりします。
[TIME[2017-03-20T08:29:02.800Z]]

[[スクロール]]の挙動が [[Webブラウザー]]の動作と違っていて使いにくい。


[16] [CITE@en[Make content editable elements clearable]]
([[shs96c]]著, [TIME[2017-08-09 23:58:27 +09:00]])
<https://github.com/w3c/webdriver/commit/e5a5e929cb99d98fcebe65da9103248aa560bcff>

[17] [CITE@en[Refine the inputmode attribute, and expose it on contenteditable]]
([[dtapuska]]著, [TIME[2017-12-15 03:35:19 +09:00]])
<https://github.com/whatwg/html/commit/d430f275f4e253956a5965c8b90885d3ac4e90c1>

[18] [CITE@en[Move inputmode to not be dependent on forms · Issue #1897 · whatwg/html]]
([TIME[2017-12-17 22:40:58 +09:00]])
<https://github.com/whatwg/html/issues/1897>

[19] [CITE@en[Remove inputmode · Issue #3077 · whatwg/html]]
([TIME[2017-12-17 22:44:25 +09:00]])
<https://github.com/whatwg/html/issues/3077>

[20] [CITE@en[Refine the inputmode attribute, exposing it on contenteditable. by dtapuska · Pull Request #3260 · whatwg/html]]
([TIME[2017-12-17 22:53:23 +09:00]])
<https://github.com/whatwg/html/pull/3260>

[21] [CITE@en[Add the autocapitalize attribute]]
([[rlanday]]著, [TIME[2017-12-16 08:17:00 +09:00]])
<https://github.com/whatwg/html/commit/f1f0af83e320f14a59dc4e552ee82aab7908f00c>

[22] [CITE@en[Add the enterkeyhint="" attribute]]
([[dtapuska]]著, [TIME[2018-09-13 05:53:59 +09:00]])
<https://github.com/whatwg/html/commit/a5422d984d9b7b8a4e0ad7a0ad237b07f190cc93>