無料ブログ「rentafree.net」の管理人ブログ

エディタのデザインを少し変更しました

Firefox用の新しいブログエディタのデザインを少し変更しました。

エディタの入力領域が普通の1px実線だったので、
内側に薄い線を引いて2重にして若干領域が凹んで見える感じにしました。
ソースモードはtextareaなので枠をつけるとずれちゃいますが、
CSS3のbox-sizing:border-box
しました。
ついでに、今まではソースモードとプレビューモードで若干高さが違っていましたが、完全に同じになりました。

あと、
resize:vertical
にして、縦方向に拡大できるようにしました。
ソースモードの方は元々リサイズできたと思いますが、
横方向に拡大するとエディタからはみ出るので縦方向しかできないようにしました。

ブログエディターを大幅に変更しました

ブログエディターを大幅に変更しました。
ブログの記事編集ページでCtrl+F5とかでリロードしてください。

今回の変更は基本部分がFirefox(8.0以上)以外のブラウザが対応していないため、
旧バージョンを残したまま新バージョンを用意して、
対応ブラウザのみ(Firefoxのみ)新バージョンがロードされます。
ロード部分に問題がなければ、Firefox以外で不具合は出ないと思います。
Firefoxは新バージョンになるため、不具合が生じましたら報告お願いします。


<変更点その1>
ブラウザ標準のコンテキストメニュー(右クリックメニュー)をキャンセルせずに、
独自のメニューは標準のメニューに追加する感じになりました。
標準メニューの上に拡張メニューが出ると思います。
これにより、
WEBサイト側でPCのクリップボードにアクセスすることはできないので、
今までは右クリックからのコピペができませんでしたが、
標準メニューが表示されるのでそこからコピペできます。


<変更点その2>
標準のコピペ以外に独自に、
「貼り付け(テキスト)」
「貼り付け(HTML)」
を用意しました。
貼り付け(HTML)は、HTMLコードを特定位置に挿入することができます。
貼り付け(テキスト)は、ブラウザ標準の貼り付けと似たようなものですが、
ブラウザ標準の貼り付けだと、
ブラウザ上からコピーする場合、テキストではなく選択範囲のHTMLがペーストされる可能性がありますが、
貼り付け(テキスト)だと確実にテキストだけ貼り付けられるはずです。
改行は<br>変換されます。
Ctrl+C、Ctrl+X、Ctrl+V
等のキー操作は奪取しませんのでブラウザ標準動作となります。


<変更点その3>
タグの直接編集機能を用意しました。
エディタ上のタグ適用部分で右クリックから行けます。
元々は、こちらで用意した設定項目しかいじれませんでしたが、
タグ全体のHTMLコードを個別に編集できるようになりました。
代わりに、こちらで用意する設定項目を減らしてわかりやすくしました。


<変更点その4>
設定画面はエディタ領域全体に固定表示でしたが、
ポップアップ的な表示にしました。
上部ドラッグで移動できます。



注意点として、
ブラウザ標準のメニューに、
「元に戻す」
「やり直す」
「貼り付け」
がありますが、
追加で拡張する部分にも別に出ます。
ブラウザ標準動作と独自動作は若干違います。
特に、
「元に戻す」「やり直す」をブラウザに任せると履歴が破損して戻せなくなる可能性がありますので、
長時間の編集の際は気をつけてください。
Ctrl+Z(元に戻す)、Ctrl+Shift+Z(やり直す)
はブラウザから奪取するので独自処理になります。


Firefoxで日本語キー入力イベントが取得できない

Firefox3.6の時はできてた気がするんだが、
Linux+Firefox12
で、
日本語入力時にイベントが発生しないぽい。
ブログエディタのアンドゥ・リドゥが、
行単位で記憶してるんだが、複数行入力しても1行として扱われちゃう。
元に戻した状態で入力すると消滅することもあり得る。
Windows+Firefox12
だと問題ないぽい。
IMによるのかもしれん・・・