Getting tinymce-rails to play nice in Rails 4 and Turbolinks

I am using the plugin on a project and I kept having problems loading the editor on for the second time. The problems materialized in two different ways.

  1. On first page view the editor worked as intended, on second page viewed the editor did not show at all
  2. After trying to fix #1, on first page view the editor worked as intended, on second page viewed the editor showed up but all text disappeared and I was unable to type any new text

So I narrowed down the problem to two issues

  1. Because of turbolinks the first textarea is still loaded in tinymce. To fix this I found a topic (sorry but forgot the source) that suggested deleting the editor when a new request was received. They suggested doing this on the app/assets/javascripts/application.js
    $(document).on('page:receive',function(){
    		tinymce.remove();
    	});

    And happily this made the editor appear on every request!

  2. After fix #1, reloading the editor failed on second requests causing the text to disappear! What I think is happening is execution of the <%= tinymce %> script was happening before tynimce.remove(). The fix to this problem was to simply remove all instances of <%= tinymce %> and adding the following code to the app/assets/javascripts/application.js
    $(document).ready(function(){
    		tinyMCE.init({
    		selector: "textarea.tinymce"
    		});
    	});

So to summarize, we need to use both pieces of code in tandem to get the desired behavior. So our app/assets/javascripts/application.js will have the next code added to it:

$(document).ready(function(){
	tinymce.remove();
	tinyMCE.init({
	selector: "textarea.tinymce"
	});
});

2 Comments


  1. Hi!, thanks for pointing in the right direction; however it didn’t work for me exactly as you described. I needed to separate remove and init in two events, because if in the same event (document.ready), it worked once every two calls. So the way to go for me was:

    $(document).on(‘page:receive’,function(){
    tinymce.remove();
    });
    $(document).on(‘ready page:load’, (function(){
    tinyMCE.init({
    selector: “textarea.tinymce”
    });
    });

    Using: Rails 4.2.0 and tinymce-rails updated to TinyMCE 4.2.7

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *