prototype.jsでWYSIWIGエディタ Safari1対応

prototype.jsでクロスブラウザなWYSIWIGエディタ ですがクロスブラウザと言っておきながら、Safari1に対応してなかったので、なんとか対応させました。（このページはIEで見るとエラーが表示されます。）

コードを整える


方法はいたって簡単でした。

Surfin’ Safari - Blog Archive ? WebKit Fixes in Safari 2.0.2 / Mac OS X 10.4.3
http://webkit.org/blog/?p=32

Fixed designMode to allow editing in an <iframe> when the src attribute is "" or about:blank.

ここに書かれてるとおり、iframeのsrcにhtmlファイルを指定してやればオK。
ただ、カラーパレットの色選択がうまくいかないみたいで、不完全。
しかも、正規表現がちゃんとサポートされておらず↓。

blog.8-p.info : Safari is evil
http://blog.8-p.info/articles/2006/04/30/safari-is-evil

正規表現を書き換えて対応しました。

しかし、src属性を指定すると今度はIEでエラーが出て動かなくなりますorz
アタマいたくなってきた。なんとなくSafari1がLDRでサポートされてないのもわかる。
どうしても、Safari1に対応したいときに使うということで、ひとつ。


各ブラウザの吐くHTMLコード

ついでなので各ブラウザごとのプレーンなHTMLの比較。

ブラウザ上の表示

簡単な使い方
強調できます
下線を引けます
色をつけることもできます
装飾を解除できます(Safariは未対応)
コードを整える のチェックを外すとブラウザ本来のhtmlコードになります。

InternetExplorer

簡単な使い方<BR> <STRONG>強調できます</STRONG><BR> <U>下線を引けます</U><BR> 装飾を解除できます(Safariは未対応)<BR> コードを整えるのチェックを外すとブラウザ本来のhtmlコードになります。

Firefox

簡単な使い方<br><strong>強調できます</strong><br><u>下線を引けます</u>< br><font color="#0066ff">色をつけることもできます</font><br>装飾を解除できます(Safariは未対応)<br>コードを整えるのチェックを外すとブラウザ本来のhtmlコードになります。

Opera

簡単な使い方<BR> <STRONG>強調できます</STRONG><BR> <U>下線を引けます</U><BR> <FONT color="#0066ff">色をつけることもできます</FONT><BR> 装飾を解除できます(Safariは未対応)<BR> コードを整えるのチェックを外すとブラウザ本来のhtmlコードになります。<BR><BR>

Safari

<DIV>簡単な使い方</DIV><DIV>< SPAN class="Apple-style-span" style="font-weight: bold;">強調できます</SPAN></DIV>< DIV><SPAN class="Apple-style-span" style="text-decoration: underline;">下線を引けます</SPAN></DIV><DIV><SPAN class="Apple-style-span" style="color:#0066ff">色をつけることもできます</SPAN>< /DIV><DIV>装飾を解除できます(Safariは未対応)</DIV> <DIV>コードを整えるのチェックを外すとブラウザ本来のhtmlコードになります。</DIV>

ちょw
この個性っぷりはスゴイ。
こんなとこで他のブラウザと差別化をはかってどーすんのだと(＾＾;


というわけでSafari対応のWebアプリが少ないのは、普及率以外の要素があるのではないかと思った次第。


他にも、いろいろ↓。

Safari の JavaScript の不備: Days on the Moon
http://nanto.asablo.jp/blog/2006/01/13/209495


追記：最初のコードだとうまく表示がされてなかったので、修正しました。
けれど微妙に表示がズレてしまうようですorxz