使用Ajax加载TinyMCE文本区域

时间:2013-08-02 03:37:02

标签: ruby-on-rails ajax tinymce

修改 在做了Kiran Kumara之后添加的建议 <div id="static_id></div> 到“index.html.erb”的末尾并更改“edit.js.erb”以包含以下内容:

jQuery("div#static-id").html("<%=escape_javascript(render 'form')%>");

按下“编辑”链接确实呈现了TinyMCE编辑器。但是,还会加载“常规”text_area,其中static-id div放置在页面底部的索引中,并且只能从该text_area进行编辑。如何启用它以便只显示TinyMCE编辑器并进行实际编辑?


我正在开发一个非常简单的计划程序应用程序,并且正在尝试使用Ajax将编辑表单加载到索引页面中。该项目中唯一的模型是模型“日”。我跟着this rails cast但是我无法使用Ajax加载表单。我使用TinyMCE作为编辑表单中的文本区域,并使用tinymce-rails gem在我的项目中实现TinyMCE。我继续将“304 Not Modified”作为GET请求的状态。当明确转到对象的编辑路径时,我可以加载TinyMCE文本区域。

我一直在寻找解决方案的时间,但我要么不明白如何实施它们,要么它们已经过时了。从我读过的内容来看,我认为这可能与索引页面可能会调用多个TinyMCE编辑器这一事实有关。有人可以解释为什么这不起作用?谢谢! :)

以下是我项目的相关代码示例:

index.html.erb

我在索引中显示了多个日期,这些日期在视图中显示为列表。这些是“日”模型的各种实例,每个实例都包含待办事项列表。我希望能够编辑从索引页面中选择的列表。

<h1>Tasks</h1>

<ul class="tasks">
    <% @date_range.each do |day| %>
        <li class="<%= time_tense(day.date) %>">
            <%= render "display_tasks", day: day %>
        </li>
    <% end -%>
</ul>

_display_tasks.html.erb

<h2 id="daily_list_<%= day.id %>">
    <%= format_date(day.date) %>
</h2>

<% if day.tasks.blank? %>
    <p>No tasks specified</p>
<% else %>
    <%= raw day.tasks %>
<% end %>

<%= link_to "Edit", edit_day_path(day), id: "#{day.id}", remote: true %>

<%= tinymce %>

edit.html.erb

<h2 class="<%= time_tense(@day.date) %>" id="list_<%= @day.id %>">
    <%= format_date(@day.date) %>
</h2>
<%= render "form", day: @day %>

edit.js.erb

$("#edit_daily_list_<%= @day.id %>").hide().after('<%= j render(partial: "form") %>');

_form.html.erb

<%= form_for (@day, remote: true) do |f| %>
    <% if @day.errors.any? %>
      <div class="error_messages">
        <h2><%= pluralize(@day.errors.count, "error") %> prohibited this task from being saved:</h2>
        <ul>
            <% @day.errors.full_messages.each do |msg| %>
              <li><%= msg %></li>
            <% end %>
        </ul>
      </div>
    <% end %>

    <%= f.text_area :tasks, id: @day.id, class: "tinymce" %>

    <div class="actions">
        <p><%= f.submit "Update" %></p>
    </div>
<% end -%>

<%= tinymce %>

days_controller.erb

class DaysController < ApplicationController

    def index
        today = Day.find_by_date(Date.today)
        @date_range = date_range(today)
    end

    def show
        @day = Day.find(params[:id])
    end

    def edit
        @day = Day.find(params[:id])
    end

    def update
        @day = Day.find(params[:id])
        if @day.update_attributes(params[:day])
            redirect_to day_path(@day)
        else
            redirect_to edit_day_path(@day)
        end
    end

    private
        def date_range(days=7, today)
            future_dates = []
            past_dates = []

            (1..days).to_a.each do |day|
                future_dates.push Day.find_by_date(today.date.advance days:  day)
                past_dates.unshift Day.find_by_date(today.date.advance days: -day)
            end

            [future_dates.reverse, today, past_dates.reverse].flatten
        end
end

0 个答案:

没有答案