3

我正在使用tinymce 创建一个丰富的Textarea，并且我正在使用backbone.js。

问题是，当我从同一站点上的先前 URL 移动到路由器中的那个“页面”时，它就不起作用了。

如果我使用指向该路由的直接链接刷新页面，它工作正常。我真的不明白会出什么问题。

这是视图：

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;
    },
});

模板：

  <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>
4

3 回答 3

2

TinyMCE 显然不喜欢在分离的节点上工作。完全没有。

此设置重现了您的困境：

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

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

和随附的小提琴http://jsfiddle.net/nikoshr/pCdSy/

一个简单的解决方法是为您的视图提供一个附加节点。例如，假设#render在 DOM 中：

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

v.render();

和更新的小提琴http://jsfiddle.net/nikoshr/pCdSy/2/

另一种解决方案是将您的视图临时添加el到 DOM，应用 TinyMCE，然后将其分离。

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/进行演示

警告：这看起来真的很像 hack，可能会产生意想不到的结果。

于 2013-08-01T08:19:06.253 回答
0

我通过创建一个 Iframe 视图并为文本区域带来小的 html 代码解决了这个问题。

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;
    }
});

模板只是：

<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>

textArea.html 是：

<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>
于 2013-08-02T10:08:00.510 回答
0

渲染（Backbone.View.render）时，el 还没有插入到 dom 中。此外，不可能捕捉到视图的 el 将插入 dom 的时刻。但可以肯定的是，在当前浏览器进程结束时，el 会被插入到 DOM 中。然后 tinyMCE 将是“可初始化的”。只需使用 "setTimeout" 等待 1 毫秒：

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);

jsfiddle：

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

于 2015-08-26T17:59:18.630 回答