将tinymce集成到rails +主干中答案

【问题标题】：integrate tinymce into rails + backbone将tinymce集成到rails +主干中
【发布时间】：2013-03-05 08:30:32
【问题描述】：

我使用tinymce 已经有一段时间了。感谢http://github.com/spohlenz/tinymce-rails 但现在我必须在基于 backbone-on-rails
的应用程序中包含 tinymce 我已按照 rails 应用程序的所有说明进行操作。
尝试在 application.js 中的主干文件之前和之后包含 tinymce
我的主干模板

<textarea class="tinymce" id="article_body" rows='40' cols='120' >
  <%= @article.get('body') %>  
</textarea>

但 tinymce 控件无法初始化。
你能帮帮我吗？

更新 1
我尝试在模板中初始化 tinymce & this:
在edit.jst.eco

<textarea class="tinymce" id="article_body<%= @article.get('id') %>" rows='40' cols='120' >
  <%= @article.get('body') %>
</textarea>  
<% tinyMCE.execCommand "mceAddControl", true, "article_body"+@article.get('id')%>

控制 ver textera 仅在手动刷新 (f5) 后出现

更新 2
我尝试将 execCommand 方法添加到我有兴趣在其中显示 tinymce 的视图的渲染方法中：

class Notes.Views.ArticleEdit  
  render: ->  
    $(@el).html(@template(article: @model))  
    tinyMCE.execCommand "mceAddControl", false, "article_body"+@model.get('id')  
    this

与更新 1 相比没有变化
更新 3
渲染后尝试绑定tinymce。使用了 2 种方法：
1)

class Notes.Views.ArticleEdit  
  render: ->  
    $(@el).html(@template(article: @model))  
    setTimeout (->
      tinyMCE.execCommand "mceAddControl", true, "article_body" + @model.get("id")
    ), 100

没有变化。仅在显示刷新 tinymce 后
2)http://fahad19.tumblr.com/post/28158699664/afterrender-callback-in-backbone-js-views

  class Notes.Views.ArticleEdit extends Backbone.View  
  initialize: ()->  
    _.bindAll this,  "render", "afterRender"  
    _this = this  
    @render = _.wrap(@render, (render) ->  
      render()  
      _this.afterRender()  
      _this  
    )  
    @model.on('change',@render,this)  
    @model.on('destroy',@remove,this)  
  afterRender: ->  
    console.log tinyMCE  
    tinyMCE.execCommand "mceAddControl", true, "article_body" + @model.get("id")

虽然我得到了一个控制台输出（正确的 tinymce 对象），但我没有得到 tinymce :(

更新 4
这是github 上的项目

更新 5
我弄错了 - 项目仅在路由器中渲染后才出现在 DOM 中。所以我必须编辑 Notes.Routers.Articles#edit 操作

【问题讨论】：

试图这样做...更新1和2...没有成功

标签： ruby-on-rails backbone.js ruby-on-rails-3.2 tinymce

【解决方案1】：

要解决我的问题，我必须像这样编辑路由器操作：

edit: (id)->  
    @model = @collection.get(id)  
    view = new Notes.Views.ArticleEdit(model: @model)  
    $('#container').html(view.render().el)  
    el_id = "article_body" + @model.get("id")  
    if (tinyMCE.getInstanceById(el_id)) {   
      tinyMCE.execCommand 'mceFocus', false, el_id  
      tinyMCE.execCommand "mceRemoveControl", false, el_id  
    }  
    tinyMCE.execCommand "mceAddControl", false, el_id  
    tinyMCE.triggerSave()*emphasized text

【讨论】：