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

| コメント(3)

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

コメント(3)

Days on the Moonへのリンクの最後にスペースが入っているようでリンク踏んだだけでは該当ページに飛べませんでした。

こういったことは素人なんですが、どうやって使うんでしょう?

> 通りすがり さん

ありがとうございます。
修正しました。

> とくめいさん

最初の記事にサンプルのファイルをZip形式で置いてます。
http://a-h.parfe.jp/einfach/archives/crosseditor_sample.zip

こちらを参考にしてみてください。

コメントする

このブログ記事について

このページは、AUSGANG SOFTが2007年1月 9日 16:40に書いたブログ記事です。

ひとつ前のブログ記事は「油脂猿本いただきました」です。

次のブログ記事は「Greasemonkeyでサーチエンジン」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

ウェブページ