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

Firefox8.0以上で推薦となっていましたが・・・

ブログのブラウザ対応表はFirefox8.0以上で推薦となっていましたが、
outerHTMLがFirefox11.0からなことに気づいた。

タグ直接編集機能はouterHTMLで実装しているため、
たぶんエラーになります。
Firefox11.0未満の人は最新版にアップできると思いますので、
クロスブラウザ処理は入れずにこのままにします。
Firefox8.0以上からは新型ブログエディターにはなるはずです。

エディター微調整

Firefox用の新しいブログエディターはちょくちょく修正入れてます。


上部ボタンでのタグ挿入はソースモード時でもエラーにはならなかったが、不可にしてメッセージ出すようにした。
width、height、margin、padding等の単位付き数値入力項目で単位なし数値入れた場合に自動で[px]にするようにした。
ボタンでCSS自動設定できる項目以外にもtitle属性で説明つけるようにした。
<img>の設定にaltを追加した。


ってなところです。

現状できる面の改良はこんなもんかな思うんですが、
コンテキストメニューはいずれ他のブラウザも実装すると思いますんで、
新しいブラウザが出たら確認して必要ならすぐに修正します。

あとは、色選択ツールのスライダーが独自実装になってますが、
<input type="range">つかえばもっと良くなると思うんですが、
<input type="range">はまだFirefoxに実装されてない・・・
Firefoxが実装したら旧バージョン切り捨ててでも実装したいと思います。

エディター修正第二弾

Firefox用の新しいブログエディターを再度大幅修正しました。


<変更点その1>
<span><div>適用時に設定画面が出ずにタグ適用となっていましたが、
<span><div>は何も設定しないと見た目変わりませんので、わかりにくいと思うので設定画面出すようにしました。

PCなら右クリックからの修正前提でもわかれば問題ないと思いますが、
右クリック前提だとタッチパネルとかだと不便すぎたんじゃないかと思いますが、その辺も改善したと思います。
まあ、タッチパネルでは編集しにくいと思いますけど。


<変更点その2>
今までは上部メニューに無いタグの挿入はHTML直接入力以外ではできませんでしたが、
右クリックメニューから他にもいくつかのタグを入れられるようにしました。

右クリックから挿入できるようになったのは、既存の、
<b><i><s><u><ul><ol><span><div><a><img><table>
に加え、
<hr><em><q><strong><sub><sup><blockquote><h1><h2><h3><h4><h5><h6><p><pre>
です。

エディタ上の選択範囲の有無で挿入できるタグが変わってきます。


<変更点その3>
今まではインラインタグとブロックタグで処理を分けて、インラインタグ内にはタグを内包できませんでしたが、
処理を共通化してインラインタグ内にタグを内包することもできるようになりました。

<a>タグの設定画面から「文字列」の項目が消えましたので、
範囲指定かタグ適用後に変更する必要があります。
今までは<a>内には<img>以外のタグは内包できませんでしたが(<img>の内包も不完全でしたが)、入れられます。


<変更点その4>
タグの設定画面の処理を共通化して、設定項目を増やしました。
<table>だけ特殊すぎるので共通化していません。
<span><div><a><img><td>
の設定項目が増えています。


<変更点その5>
色選択ツールのポップアップ処理を他のポップアップ処理と共通化しました。
元の仕様だと、ポップアップ中に後ろの領域がクリックできてしまっていましたが、クリックできなくなりました。
ドラッグでの移動もできるようになっています。


<変更点その6>
今までは上部のタグ挿入ボタンをクリックした際、
選択範囲の問題で挿入できない場合でもエラー表示はしませんでしたが、
挿入できない場合はメッセージが出ます。
<a><img><table>
は今まではセレクション又はキャレットがエディタ内にあれば挿入出来ましたが、
セレクション範囲の有無で判別するようにしました。



機能は旧エディタよりかなり増えてますが、
処理の共通化と、IE8を考慮しなくて良くなったので、
コード量は3割以上(30kB以上)削減されています。
シンプルになってメンテナンスもしやすくなった。