Backbone.js fails to load Tinymce script only when moving through the router

Question

I am using tinymce to create a rich Textarea, and I am using backbone.js.

The problem is that when i move to that "page" in my router from a previous URL that is on the same site, it just doesn't work.

If i refresh the page with the direct link to that route it works fine. I really don't understand what can go wrong.

Here is the view:

var template = function (name) {
    var source = $('#' + name + '-template').html();
    return Handlebars.compile(source);
}; 
  BT.Common.FormTextArea = Backbone.View.extend({
    template : template('form-input-textarea'),
    tagName: 'div',
    className: "control-group",
    initialize: function(){
    },
    render: function(){
        console.debug("Render FormTextArea");
        var html = this.template(this.model.toJSON());
        this.$el.html(html);    
        tinymce.init({selector:'textarea'});
        return this;
    },
});

The template:

  <script type="text/x-handlebars-template" id="form-input-textarea-template">
      <label class="control-label" for="message">{{lable}}</label>
      <div class="controls">
        <textarea name="msgpost" id="msgpost" cols="50" rows="10">
            {{text}}  
        </textarea>
      </div>
</script>

No errors. i actually tried to keep a record of the Instance and use it again. Didn't work as well. I solved it by using an Iframe. i will write am answer soon — Gleeb
– Gleeb, Commented Aug 1, 2013 at 0:02

nikoshr · Accepted Answer · 2013-08-01 08:31:05Z

2

TinyMCE apparently doesn't like to work on detached nodes. At all.

This setup reproduces your predicament:

var v = new BT.Common.FormTextArea({
    model: new Backbone.Model({text: 'init'})
});

v.render().$el.appendTo('body');

and an accompanying Fiddle http://jsfiddle.net/nikoshr/pCdSy/

A simple workaround would be to provide your view an attached node. For example, assuming #render is in the DOM:

var v = new BT.Common.FormTextArea({
    model: new Backbone.Model({text: 'init'}),
    el: '#render'
});

v.render();

and an updated Fiddle http://jsfiddle.net/nikoshr/pCdSy/2/

Another solution would be to temporarily add your view el to the DOM, apply TinyMCE and then detach it.

var BT.Common.FormTextArea = Backbone.View.extend({
    template : template('form-input-textarea'),
    tagName: 'div',
    className: "control-group",

    initialize: function(){
    },

    render: function(){
        console.debug("Render FormTextArea");

        var html = this.template(this.model.toJSON());
        this.$el.html(html);    

        $('body').append(this.$el);   
        tinymce.init({selector: 'textarea'});
        this.$el.detach();

        return this;
    }
});

http://jsfiddle.net/nikoshr/pCdSy/4/ for a demo

Warning : this really looks like a hack and might produce unexpected results.

edited Aug 1, 2013 at 8:31

answered Aug 1, 2013 at 8:19

nikoshr

33.4k34 gold badges94 silver badges112 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Gleeb Over a year ago

I have actually did not try your solution. It might be good. i am not accepting my answer, will see what the audience say :)

Gleeb · Accepted Answer · 2013-08-02 10:08:00Z

I Solved it by creating an Iframe view and bringing small html code for the text area.

BT.Common.IframeTextArea = Backbone.View.extend({
    tagName: "div",
    className: "row",
    template : template('form-input-textarea'),
    render: function(){
        var html = this.template();
        this.$el.html(html);
        return this;
    }
});

and the template is just:

<script type="text/x-handlebars-template" id="form-input-textarea-template">
    <div class="span12">
      <iframe src="resources/textArea.html" style="width:100%;height:600px;border:0;padding:0"></iframe>
    </div>
</script>

and the textArea.html is:

<script src="js-frameworks/tinymce/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({
selector: "textarea",
plugins: [
    "advlist autolink lists link image charmap print preview anchor",
    "searchreplace visualblocks code fullscreen",
    "insertdatetime media table contextmenu paste"
],
toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright
     alignjustify | bullist numlist outdent indent | link image"});
  </script>
  <textarea name="content" style="width:100%"></textarea>

SimDion · Accepted Answer · 2015-08-26 17:59:18Z

When rendering (Backbone.View.render), the el isn't inserted in the dom yet. Also, it is impossible to catch the moment when the view's el will be inserted in the dom. But a thing that is sure, is that at the end of the current browser's process, the el will be inserted in the DOM. Then tinyMCE will be "initializable". Simply wait 1 millisecond using "setTimeout" :

var FormTextArea = Backbone.View.extend({
    template : _.template('<%=value%>'),
    tagName: 'textarea',
    className: "control-group",
    render: function(){ 
        this.$el.html(this.template(this.model.toJSON()));
        setTimeout(_.bind(this.initMCE, this), 1);
        return this;
    },
    initMCE: function(){
        tinymce.init({selector: 'textarea'});
    }
});

var v = new FormTextArea({
    model: new Backbone.Model({value: '<h2>Heading 2</h2><p>A paragraph here</p>'})
});

$('body').append(v.render().el);

The jsfiddle :

http://jsfiddle.net/pCdSy/10/

Collectives™ on Stack Overflow

Backbone.js fails to load Tinymce script only when moving through the router

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related