ページ編集ブックマークレット サンプル

Paroday - 表示中のウェブページのテキストや画像をその場で編集するブックマークレット

テキストエリア版サンプルに切り替えcontentEditable版サンプルに切り替え

この文章をクリックすると右下のテキストエリアでこの文章を編集できます。基本的にリンクをクリックしてもジャンプしません。
【x】ボタンで編集を終了すると通常のページ表示に戻り、リンクも有効になります。

左のチェックボックスのチェックを外すとリアルタイムの反映を停止します。停止後は【ok】ボタンで編集内容を反映させることができます。

画像をクリックするとその画像のアドレスが表示されます。
「@w横幅,高さ」の数値を変更すると画像の大きさが変わります。アドレスを書き換えるか次の行に新しい画像のアドレスを追加することで画像が入れ替わります。

【add】ボタンをクリックするとサンプルの画像が3つ追加されます。反映されるのは一番下の画像のみです。右上の【<】【>】ボタンで差し替えることができます。

【go】ボタンは現在編集している要素がわからなくなったときに使用します。クリックするとページの最上部に現在編集中の要素が表示されます(スクロールできないときは現在表示している範囲に編集中の要素があります)。

冒頭の文章をクリックしてここまでホイールでスクロールして【go】。


このページは自由に編集できます。文章をクリックするとカーソルが表示されます。文字を入力したりデリートキーで文字を削除したりできます。基本的にリンクをクリックしてもジャンプしません。

テキストを選択していない状態で右の【LINK】ボタンにマウスカーソルを合わせると通常のページ表示に戻ります。
もう一度合わせると編集できるようになります。

改行は「Shift」を押しながら「Enter」キーを押して行います。そのまま「Enter」を押すと親要素と同じ要素で分断されます。これらの処理はブラウザによって異なります。

テキストを選択した状態でデリートキーを押せば選択部分が削除されます。
画像も選択してデリートキーを押すと削除できます。

HTMLコード部分のみを選択して【LINK】ボタンにマウスカーソルを合わせるとHTMLとして表示されます。
次のコードを選択して(<a 〜 jpg">)【LINK】ボタンにマウスカーソルを合わせるとリンクと画像が表示されます。

<a href="http://blog-imgs-53.fc2.com/p/a/r/paro2day/page-edit-sample-textarea.html">テキストリンク</a><br>
<img src="http://blog-imgs-53.fc2.com/p/a/r/paro2day/130105g.jpg">

ブックマークレットの場合はリンクのクリックで可能です。