contenteditable 【 ありのごとくあつまりて 】

その部分の <p> が margin:0 で余計な装飾もない場合

<div contenteditable="true">
実際には、この中に入れた 文字や画像 が編集可能になります。
※この記事では設定していないので、過去記事 などでお試しください。
</div>

その部分の <p> が margin:0 などではない場合

↑ 上の書き方のままだと、「Enter」キーなどを押した 改行時 に 前後に余白（※） が空いてしまいます。 この状態の場合、一行改行 を反映させるためには ユーザーが「Shift」＋「Enter」キー を押す必要があります。 それでは面倒なので・・・ ↓

<div contenteditable="true">
<div>
参考 : 編集可能な Div で行間を 1 行にする方法
http://msdn.microsoft.com/ja-jp/library/bb250508(VS.85).aspx
この書き方のように <div> </div> を入れておくと、IE でも <p>のスタイルに左右されることなく、「一行改行」 がそのまま行えます。
簡単ですが、頻繁に使うなら ↓ 下の方法 がお勧め。
</div>
</div>

/* 直接編集用（IE対策） */
.htmlbox p { margin:0; padding:0; }

<div class="htmlbox" contenteditable="true">
スタイルシートで予め、この範囲内の <p> を設定しておけばOK！
</div>

勝手に「リンク風」 にされてしまうのは．．．

気になるけど、特に問題にもならない程度？？ どうにかしたい場合は、<pre> http://arinogotokuatumarite.blog19.fc2.com/ </pre> とか書いておけば、一時的に回避出来るみたいです。[ 実際の使用例 2 ]

<pre class="htmlbox" contenteditable="true">
	/* ----------------------------------
	Template by ありのごとくあつまりて (paruparu)
	http://arinogotokuatumarite.blog19.fc2.com/
	------------------------------------- */
このような場合は、何故か 「リンク風」 にはなりにくいらしい。 不思議？？
※この記事では設定していないので、実際の使用例（2） などでお試しください。
</pre>

2.　Firefox × contenteditable="true"

クリックで画像を拡大します

• Firefox では、ページ内のどこかで contenteditable="true" を使うと、その範囲以外の部分 で 「右クリック」 をした場合の挙動がちょっとおかしくなる。 （対応策不明）
• IE とは異なり、<a href=" ">リンク</a> がハイパーリンクとして 一応 機能する。 コンテキストメニュー （ショートカットメニュー） などからならリンク先を開くことができるが、クリックでは無反応。
• 実際の 過去記事 はこちら。

Firefox でページ内を右クリックした時の挙動がおかしい！！

これが、この記事を含む 「ブログ記事」 では危険な気がして使えない 一番の理由。 対応策はあるのかな？？ ちなみに他のサイトでも検証済みです。

Firefox だと、見た目通りにコピー出来ないこともある！！

範囲選択 → コピー したものを、貼り付けると．．． 余計なものが加わってしまうことがある。 &nbsp; や &quot; を多様した場合などに発生しやすいようですが、大丈夫な場合もあったり．．．法則は不明です。 （半角スペース） や " をそのまま使えば解消されることも多いので、確認は必須です。

3.　Opera × contenteditable="true"

• IE と同様、編集可能な範囲 の改行時に <p> が挿入される。
  <div> </div> を入れるという 「IEで有効な裏技?」 も使えるが、微妙にカーソル （キャレット） の位置がずれる。（対応策あり）
• <a href=" ">リンク</a> 部分は、リンクとしては機能しない。

その部分の <p> が margin:0 などではない場合

/* 直接編集用（IE, Opera対策） */
.htmlbox p { margin:0; padding:0; }

<div class="htmlbox" contenteditable="true">
スタイルシートで予め、この範囲内の <p> を設定しておけばOK！
</div>

4.　Google Chrome × contenteditable="true"

• かなり優秀！ 一番シンプルな書き方でも問題なし。
• IE とは異なり、（Firefoxと同様） <a href=" ">リンク</a> がハイパーリンクとして 一応 機能する。 コンテキストメニュー （ショートカットメニュー） などからならリンク先を開くことができるが、クリックでは無反応。

5.　W3C での 構文エラー

気になると言えば、気になる。。。 スクリプト（document.write） を使えば、取り敢えず回避可能ですが、何となく無駄な感じも。

当面の．．． contenteditable="true" の使い方 （一案）

1. ブログなどとは切り離して 「直接編集専用ページで」 使う。
2. リンクは張らない。 アドレスを直接書いておく方が親切。
3. ソースは以下のように書く。

あくまで自分用。 CSSハック部分は結構重要。理由は ↓記事を参照してください。
[ 参考 ： IE7をインストールしてみた - サラリーマン白書 ]

ちなみに、「デフォルトに戻す」 機能には、onclick="window.location.reload(true);" などではなく onclick="history.go(0)" を使っています。 カーソルの位置を維持できる点が気に入っているのですが、Operaのデフォルト状態など、キャッシュを優先している状態では、onclick="history.go(0)" だと内容が元に戻りません。。。

1. 文字や画像の 直接編集ができるエリア を作る方法
（Web制作者編）

<div> や <p> などの ブロック要素 に contenteditable="true" を入れればOK!　
例えば↓ 下のように記述します。

[ 関連記事 ： contenteditable （直接編集） の傾向と対策 ]

↑ 上のソースのまま使うと javascript が無効 （スクリプトOFF） の環境でも問題なく機能します．．．が、 W3C の構文チェック （The W3C Markup Validation Service） では contenteditable はエラーと指摘されます。 スクリプト（document.write） を使えば、この問題は回避できますが．．．何となく無駄な気も。。。

2. 文字や画像の 直接編集ができるページ を作る方法
（Web閲覧者編）

と一行で入れて Enter （エンターキー） を押せばOKです。
元のページに戻したい時には 更新 （リロード） をしてください。

追記 ： 2009/07/31
FC2ブログの共有プラグインに、この 直接編集モードにする が登録されました！ FC2ブログユーザーの方はよかったらどうぞ。