上記の広告は１ヶ月以上更新のないブログに表示されています。
お役に立ちましたら、応援して頂けると嬉しいです(*´`*)
記事を読んで頂きありがとうございます。
URL http://arinogotokuatumarite.blog19.fc2.com/blog-entry-.html
--/--/-- ～ |
Comment (-)
tweet? |
↑ ページ先頭へ ↑ |
スクリプトを使わなくても 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" >過去記事 などでお試しください。
その部分の <p> が margin:0 などではない場合
↑ 上の書き方のままだと、「Enter」キーなどを押した 改行時 に 前後に余白（※ ） が空いてしまいます。 この状態の場合、一行改行 を反映させるためには ユーザーが「Shift」＋「Enter」キー を押す必要があります。 それでは面倒なので・・・ ↓
<div contenteditable="true" ><div> http://msdn.microsoft.com/ja-jp/library/bb250508(VS.85).aspx IE でも <p>のスタイルに左右されることなく、「一行改行」 がそのまま行えます。</div>
/* 直接編集用（IE対策） */class="htmlbox" contenteditable="true" >
勝手に「リンク風」 にされてしまうのは．．．
気になるけど、特に問題にもならない程度？？ どうにかしたい場合は、<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 だと、見た目通りにコピー出来ないこともある！！
範囲選択 → コピー したものを、貼り付けると．．． 余計なものが加わってしまうことがある。 や " を多様した場合などに発生しやすいようですが、大丈夫な場合もあったり．．．法則は不明です。 （半角スペース） や " をそのまま使えば解消されることも多いので、確認は必須です。
3. Opera × contenteditable="true"
IE と同様、編集可能な範囲 の改行時に <p> が挿入される。
<a href=" ">リンク</a> 部分は、リンクとしては機能しない。
その部分の <p> が margin:0 などではない場合
/* 直接編集用（IE, Opera対策） */class="htmlbox" contenteditable="true" >
4. Google Chrome × contenteditable="true"
かなり優秀！ 一番シンプルな書き方でも問題なし。IE とは異なり、（Firefoxと同様） <a href=" ">リンク</a> がハイパーリンクとして 一応 機能する。 コンテキストメニュー （ショートカットメニュー） などからならリンク先を開くことができるが、クリックでは無反応。
5. W3C での 構文エラー
気になると言えば、気になる。。。 スクリプト（document.write） を使えば、取り敢えず回避可能ですが、何となく無駄な感じも。
当面の．．． contenteditable="true" の使い方 （一案）
ブログなどとは切り離して 「直接編集専用ページで」 使う。
リンクは張らない。 アドレスを直接書いておく方が親切。
ソースは以下のように書く。
.htmlbox {
<div class="htmlbox" contenteditable="true" >
あくまで自分用。 CSSハック部分は結構重要。理由は ↓記事を参照してください。IE7をインストールしてみた - サラリーマン白書 ]
ちなみに、「デフォルトに戻す」 機能には、onclick="window.location.reload(true);" などではなく onclick="history.go(0)" を使っています。 カーソルの位置を維持できる点が気に入っているのですが、Operaのデフォルト状態など、キャッシュを優先している状態では、onclick="history.go(0)" だと内容が元に戻りません。。。
スポンサーサイト
Web上 （ IE や Firefox などのブラウザ ） で 文字や画像 を 直接編集できる方法があることをご存知ですか？どんなサイトでも 文字や画像 を直接編集することもできる!! （私は つい先日、初めてこれを知りました
私のサイトでは... → 例えばこんな使い方 を採用して ソースの編集やコピー をその場で簡単にできるようにしています。 また、ページのスクリーンショットを撮る際に 邪魔なものをよけて （削除して） 撮ったり、暇つぶしに遊んだり... と色々と使っています。
対応ブラウザは IE（5.5以上）， Firefox（2.0以上）， Opera， Safari とのことです。 （Sleipnir2， IE8， IE7， IE6， IE5.5， Firefox3， Opera9， Google Chrome2 で動作確認済。）
例えば Web制作者側 がこれを設定すると．．．↓ 下の文字や画像が編集できるようになります。
スクリーンショット.jp では様々なOSやブラウザでWebページの
スクリーンショット を撮ってくれるのですが、
無料お試しとして Windows IE 7.0， Firefox 3.0， Google Chrome / Macintosh Safari 2.0 でのスクリーンショットが1回3ページまで （3時間空ければ1日何回でも） 試せます スクリーンショット.jp のお試しだけでは足りないという場合には、海外ですが、
Browsershots というサイトもあります。
追記 ： 2009/01/22
スクリーンショット.jp の 無料お試しサービス は 2008/12/22 で終了となっています。
リンク自体は反映されない （無効になる） ようですが、それ以外は切り取りも、改行も、画像の拡大も （Opera9 や Google Chrome2 での画像操作 は 切り取りや貼り付けのみ） ．．．何でもできて弄り放題です
しかも これ、ものすごく簡単な方法を使っています！
1. 文字や画像の 直接編集ができるエリア を作る方法
<div> や <p> などの ブロック要素 に contenteditable="true" を入れればOK!
<div
contenteditable="true" >
この中に入れた 文字や画像 が編集可能になります。
この書き方の場合、
IE では改行時 に <p> が挿入されてしまいます。 「一行改行」を行うためには
Shift＋Enter キー を押す必要があります。 実際に試してみてください。
</div>
<div
contenteditable="true" >
<div>
この中に入れた 文字や画像 が編集可能になります。
この書き方のように <div> </div> を入れておくと、
IE でも 「一行改行」 がそのまま行えます。 この方が便利で使いやすいですね！
参考 : 編集可能な Div で行間を 1 行にする方法
http://msdn.microsoft.com/ja-jp/library/bb250508(VS.85).aspx
でも... <p> が入るのが分かっているので、無駄な div などは入れず、
div
class="htmlbox" contenteditable="true"
とか、適当なクラス名を付け、その部分の 「見えない<p>」 に予め margin:0; などを設定しておくのがベストかも。。。
</div>
</div>
[ 関連記事 ： contenteditable （直接編集） の傾向と対策 ]
↑ 上のソースのまま使うと javascript が無効 （スクリプトOFF） の環境でも問題なく機能します．．．が、
W3C の構文チェック （The W3C Markup Validation Service ） では contenteditable はエラーと指摘されます。 スクリプト（document.write） を使えば、この問題は回避できますが．．．何となく無駄な気も。。。
2. 文字や画像の 直接編集ができるページ を作る方法
編集したいページを開いた状態で、そのページのアドレスバーに
と一行で入れて Enter （エンターキー） を押せばOKです。更新 （リロード） をしてください。
追記 ： 2009/07/31 直接編集モードにする が登録されました！ FC2ブログユーザーの方はよかったらどうぞ。
[ 関連記事 ：
contenteditable （直接編集） の傾向と対策 ]
[ 関連記事 ：
プラグインはダウンロードしなくても使えます！ ]
申し訳ありません。 お探しの記事は現在、この ユーザータグ （Keyword） を設定していない可能性があります。 右上の検索BOXで 再度用語を短めに入力していただくと記事が見つかる場合があります。
）
