ありのごとくあつまりてFC2ブログカスタマイズ,共有テンプレート,素材リンク集,フリーソフトの紹介など。 迷子にならないブログ作りを目指し... 何か1つでも お役に立てる情報 を提供できたらいいなぁと思っています。

モード変更

この記事に含まれるタグ (Keyword) :
直接編集  contenteditable  ブラウザ  

スポンサーサイト

--/--/-- (--)  カテゴリー: スポンサー広告
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
スポンサーリンク

はてなブックマーク  Google Bookmarks Google Bookmarks Yahoo!ブックマーク Facebook Twitter
お役に立ちましたら、応援して頂けると嬉しいです(*´`*)
記事を読んで頂きありがとうございます。 FC2ブログランキング

URL http://arinogotokuatumarite.blog19.fc2.com/blog-entry-.html

--/--/-- ~ | Comment (-) tweet? | ↑ ページ先頭へ ↑ |

contenteditable (直接編集) の傾向と対策

2010/01/10 (日)  カテゴリー: ブログ雑記・その他

スクリプトを使わなくても Web上で文字や画像を直接編集させる方法 最近、この contenteditable="true" について新たな収穫(?)があったので載せておきます。

contenteditable="true" を使ったページ (実例)

1. ~ 3. のような使い方なら、結構使えるかと。 4. は 「ブログの記事」 で使ったものですが、ブログの場合 同じカテゴリー や 同じ月 etc、色々なところに影響を及ぼしてしまうので... Firefox での挙動を考えると、非推奨??

contenteditable (コンテンツの編集許可) はブラウザによってちょっと動きが異なるようなので、私の知っている範囲でメモしておくことにします。

動作確認したブラウザ は Windows Vista × IE8, IE7,(IE6),(IE5.5),Sleipnir2, Firefox3, Opera9, Google Chrome2, Windows XP × IE7, IE6 です。 Mac × Safari でも一応。(← 電気屋さんでこっそりテストしただけ。。)

1. IE × contenteditable="true" (Sleipnir も同様)

  • IE では 編集可能な範囲 の改行時に <p> が挿入される。 (対応策あり)
  • http://arinogotokuatumarite.blog19.fc2.com/ のように書いてある部分があると、勝手に「リンク風」にされてしまう。 なのに、リンクとしては機能しない。。。

その部分の <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 での不具合
クリックで画像を拡大します

  • 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. ソースは以下のように書く。
.htmlbox {
padding:10px;
white-space:nowrap;
line-height:1.6;
overflow:auto;
overflow-x:scroll;
}
html>/**/body .htmlbox {
overflow:auto;
}
.htmlbox p {
margin:0;
padding:0;
}
<div class="htmlbox" contenteditable="true">
実際には、この中に入れた 文字や画像 が編集可能になります。
</div>

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

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


キーワード検索 : 直接編集  contenteditable  ブラウザ  

スポンサーリンク

はてなブックマーク  Google Bookmarks Google Bookmarks Yahoo!ブックマーク Facebook Twitter
お役に立ちましたら、応援して頂けると嬉しいです(*´`*)
記事を読んで頂きありがとうございます。 FC2ブログランキング

URL http://arinogotokuatumarite.blog19.fc2.com/blog-entry-101.html

2010/01/10 ~ | Comment (0) tweet? | ↑ ページ先頭へ ↑ |
 @arinogotoku
  • paruparu (arinogotoku) on Twitter
    ツイートが上手く表示されない時は Twilog or 公式Twitter などから見てください。

-0 Comment

コメントを投稿する 記事: contenteditable (直接編集) の傾向と対策


お気軽にコメントをどうぞ。
ソースコード等の < と > は (実態参照に変換されるので) そのまま使ってOKです。 & は 全角 に変えて使ってください。

  任意 : 後から修正や削除ができます。
  非公開コメントとして投稿する。(管理人にのみ公開)
 

Trackback

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。