TinyMCE で画像挿入して保存したものを、もう一度編集すると画像が表示されない！
MODx というCMSにてサイト構築しています。
このブログは WordPress です。
コーポレートサイト用にこのCMSで構築しています。
ブログ機能はあまりいらないので、
Wordpress ではなく、同じく無償で活用できる
MODx を使用しています。
TinyMCE で画像挿入して保存したものを、
もう一度編集すると画像が表示されない！
という現象が発生したのでいろいろ調べました。
この現象の発生方法と解決方法は次の通りです。
リソースを投入する時、
MODxではコンテンツをリソースと言いますが、
多くのCMSでそうであるように、
MODxでも編集エディタを選べます。
MODxでは、
コンテンツのHTMLを自力で編集するエディタと、
TinyMCE を選択出来ます。
いつもはあまり使用しないのですが、
TinyMCE を使用してリソース（コンテンツ）を編集していました。
そのコンテンツには画像を挿入する必要があったのですが、
TinyMCE では便利で、画像を簡単に挿入することが出来ます。
多くのCMSでも同じ様に、ツールバー上の画像挿入の
アイコンがあり、それをクリックすると、
このように画像に関する情報を入力する画面が開きます。
挿入したり画像を選択、alt 属性などを設定する画面が開きます。
その他詳細を設定出来ます。
必要事項を入力して、「挿入」ボタンで挿入すると、
コンテンツエリアに画像が挿入されます。
で、このリソースをいったん「保存」します。
そして、このリソースを編集画面で開くと、
挿入した画像が消えてしまいます。
具体的には見てみると、
画像のパスに誤りがあることが分かります。
解決策は３つあります。
ソースを見ると、img タグの src 属性の補間処理
が正常に動作しない事が要因のようです。
TinyMCE の Path Option が rootrelative の時に発生するようです。
この問題を回避するた為には、
以下の３つのいずれかを行うことで解決するようです。
１．TinyMCE の Path Option を rootrelative のままにして、
該当ソースをコメントアウトする。
２．TinyMCE の Path Option を fullpathurl にする。
３．TniyMCE の Path Option を docrelative のして、
テンプレートのHTMLヘッダに、<base>タグを追加する。
私の場合は、テンプレートに <base> タグを使用していたので、
３番の回避策の設定を行いました。
１番の回避策は PHP というプログラムを理解していない人、
とまでは言いませんが、プログラム経験の無い人には、
コメントアウトって何？？？という間隔だと思うので、
ハードルが高いかな？と思います。
Path Option は、
TinyMCE の設定画面（プラグイン）で行えます。
ちなみに、
１番のソースコードをコメントしなければならないのは、
mutate_content.dynamic.php の 898 – 924 近辺です。(Ver1.0.0J)
この設定が完了したら、
再度リソースの編集画面を開きます。
この状態では img タグの src 属性のパスが、
まだ誤ったパスなので、正常なものに修正します。
そのごリソースを保存すれば、回避策の対応が完了です。
TinyMCE で画像挿入して保存したものを、
もう一度編集すると画像が表示されない！
という現象が発生したのでいろいろ調べました。
この現象の発生方法と解決方法は次の通りです。
リソースを投入する時、
MODxではコンテンツをリソースと言いますが、
多くのCMSでそうであるように、
MODxでも編集エディタを選べます。
MODxでは、
コンテンツのHTMLを自力で編集するエディタと、
TinyMCE を選択出来ます。
いつもはあまり使用しないのですが、
TinyMCE を使用してリソース（コンテンツ）を編集していました。
そのコンテンツには画像を挿入する必要があったのですが、
TinyMCE では便利で、画像を簡単に挿入することが出来ます。
多くのCMSでも同じ様に、ツールバー上の画像挿入の
アイコンがあり、それをクリックすると、
このように画像に関する情報を入力する画面が開きます。
挿入したり画像を選択、alt 属性などを設定する画面が開きます。
その他詳細を設定出来ます。
必要事項を入力して、「挿入」ボタンで挿入すると、
コンテンツエリアに画像が挿入されます。
で、このリソースをいったん「保存」します。
そして、このリソースを編集画面で開くと、
挿入した画像が消えてしまいます。
具体的には見てみると、
画像のパスに誤りがあることが分かります。
解決策は３つあります。
ソースを見ると、img タグの src 属性の補間処理
が正常に動作しない事が要因のようです。
TinyMCE の Path Option が rootrelative の時に発生するようです。
この問題を回避するた為には、
以下の３つのいずれかを行うことで解決するようです。
１．TinyMCE の Path Option を rootrelative のままにして、
該当ソースをコメントアウトする。
２．TinyMCE の Path Option を fullpathurl にする。
３．TniyMCE の Path Option を docrelative のして、
テンプレートのHTMLヘッダに、<base>タグを追加する。
私の場合は、テンプレートに <base> タグを使用していたので、
３番の回避策の設定を行いました。
１番の回避策は PHP というプログラムを理解していない人、
とまでは言いませんが、プログラム経験の無い人には、
コメントアウトって何？？？という間隔だと思うので、
ハードルが高いかな？と思います。
Path Option は、
TinyMCE の設定画面（プラグイン）で行えます。
ちなみに、
１番のソースコードをコメントしなければならないのは、
mutate_content.dynamic.php の 898 – 924 近辺です。(Ver1.0.0J)
この設定が完了したら、
再度リソースの編集画面を開きます。
この状態では img タグの src 属性のパスが、
まだ誤ったパスなので、正常なものに修正します。
そのごリソースを保存すれば、回避策の対応が完了です。
タグ: TinyMCE
コメントはまだありません。