« 03月15日の予定 | メイン | 旧バージョンへのダウングレード »

2010年03月19日

[技術] Tiny_mceの設定

【覚え書き】Tiny_mceの設定ではまったので、メモ。

■やりたかったこと
1. pluginのemorionsを使って、スマイリーの絵文字を表示させる
2. Google Mapsを埋め込むためにiframeタグをTiny_mceエディタにコピペする

■問題点
1. Tiny_mceを利用する管理画面のドメインと作成コンテンツの公開ドメインが異なるが、デフォルトのままでは、絵文字画像へのリンクパスがドメインが管理画面での相対パスで登録されるため、公開ドメインでリンク切れとなり、肝心の絵文字が表示されない。

2. Tiny_mceはデフォルトの設定で、入力されたHTMLの内容を整形してくれる。その際に、iframeタグなどは削除されてしまう

■最初にした対処
1. relatvie_urls: falseに設定して、'/js/tiny_mce/plugins/emotions/img/smiley-cool.gif'と管理画面で絶対パスのまま、登録されるようにして、公開ドメインにも、シンボリックリンンクで、'/js/tiny_mce'のパスを切っておく方法を採用

2. cleanup:falseを設定して、Tiny_mceが勝手にHTMLを整形しないようにした

■発生した問題
1. 設定通りに動作せず、src='http://kanri.domain/js/tiny_mce/plugins/emotions/img/smiley-cool.gif'となってしまい、_mce_srcという属性に"/js/tiny_mce/plugins/emotions/img/smiley-cool.gif"がセットされる

2.iframeタグが削除されず、Google Mapsは公開ドメインで表示される

■わかったこと
URLの調整は、HTML整形と同じところで処理されているようで、cleanup:falseすると、URLの調整は行われず、relative_urls, remove_script_host, document_base_urlなどの設定をいくら変更しても、意味がなかった。したがって、Google Mapsのiframeタグを正しく登録するためにcleanup:falseをしたために、絵文字画像へのURL調整が無効になってしまっていた。

■最終的な対応
1. cleanup: falseはやめて、替わりにextended_valid_elementsを使う。これは、HTML整形の対象からはずす、タグと属性を指定する設定。以下のように設定した。

extended_valid_elements : "a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style],iframe[src|width|height|frameborder|scrolling|marginheight|marginwidth|style]"

投稿者 nekobara : 2010年03月19日 17:27


コメント