Posted at

tinymce-railsのバージョンを4.5系にアップデートしたらTinymceが動かなくなって嵌った件

More than 1 year has passed since last update.

tinymce-railsのバージョンを4.1.6から4.5.6にアップデートしたら、

本番環境でのみUncaught TypeError: Cannot read property 'settings' of undefinedというエラーが出て、かなり嵌ったので備忘録として顛末を残しておく。


tinymceのIssueを見つける

エラー名でググったら、以下のTinymceのイシューが出てきた。

upgrading to 4.4.1 causing error "Cannot read property 'settings' of undefined" #3091

https://github.com/tinymce/tinymce/issues/3091

中の人のコメントによると、これはTinymceの不具合ではなくtinymce.jsとtheme.jsのバージョンの片方が古かったり、新しかったりすると発生する問題らしい。

Make sure that tinymce.min.js and tinymce.js and theme.min.js and theme.js is all updated. If you run an older version of tinymce core with a newer version of theme.js this error will occur. This is not a bug in tinymce but a deployment issue where you haven't uploaded/updated all the files. If you still think this is some form of bug please reproduce it on fiddle.tinymce.com since it uses the latest tinymce core and theme.


tinymce-railsのコードを読む

tinymce-railsの4.5.6のソースコードを読んでみると、どうやらtinymce.jsは4.5.6にアップデートされているがtheme.jsは4.5.4のままになっている。これが原因ぽい。

https://github.com/spohlenz/tinymce-rails/tree/master/vendor/assets/javascripts/tinymce


tinymce-railsのリポジトリをフォークして修正する

まず、tinymceのリポジトリから4.5.6のバージョンのzipコードをダウンロードします。

https://github.com/tinymce/tinymce/releases/tag/4.5.6

これをgruntでビルドしてtinymce-railsのtheme.jsを置き換えました。

置き換えたのはこちらのファイルです。

vendor/assets/javascripts/tinymce/themes/modern


フォークしたリポジトリをGemfileで読み込む

gem "tinymce-rails", github: "hogehoge/tinymce-rails"

これでbundle updateしたら直るはず...!


でもなぜかうまくいかない

なぜか...


開発者ツールで読み込んでいるJSの中身を確認する

Chromeの開発者ツールの[Sources]で該当のJSファイルを見ると、開発環境・ステージング環境のJSとは本番環境は明らかに違うことが判明。どうやら古いJSを読み込んでいそう


CDNのキャッシュが怪しい

本番環境ではステージング環境とは違い、CDNのSaasを利用していた。初期状態では1時間キャッシュを保存するようになっている。

本来ファイルの内容が変わればRailsのSprocketsがダイジェストを変えてくれて、キャッシュが無効になるはずなのだが、ここが怪しすぎるという展開に


CDNのキャッシュを削除する

CDNサービスの管理画面からキャッシュを削除して確認したら、ついに解決!!

古いJS側がキャッシュされており、それが読まれていたのが原因ぽい。


tinymceの不具合?

今回の不具合の原因はtheme.jsとtinymce.jsのバージョンがtinymce-rails側で差異があったこと。そして自身でtinymce-railsのtheme.jsを書き換えても、古いtheme.jsがキャッシュに残ってしまっていたことが問題だった。

中身のコードまでまだ終えていないが、tinymce-railsのバージョンを上げる時は今後もCDNのキャッシュには注意したほうが良さそう。。