将"Dante“YSIWYG媒体样式编辑器集成到Rails窗体中

Question

我正在尝试将"Dante“所见即所得文本编辑器集成到我的Rails项目中。我已经安装了它并在屏幕上显示。查看屏幕截图：https://i.imgur.com/lLnEc7n.png

然而，在我的Rails应用程序中，我有have_many故事的用户。我想使用这个编辑器来允许用户创建这些故事。我基本上需要将编辑器和窗体连接在一起，但我不知道如何去做，因为我以前从来没有做过这样的事情。有没有人介意给我一些建议？

编辑器的文档在这里：https://github.com/michelson/Dante

当前页面：

<%= simple_form_for @story do |f| %>
  <%= f.input :title %>
  <%= f.input :subtitle %>
  <%= f.input :content, :id => "editor" %>
  <%= f.button :submit %>
<% end %>
<hr>
<div id="editor">
<h1 id="dante-editor">Click Me Once. Your Title Goes Here.</h1>

<h2>Tell us about your favorite backpacking adventure. This might also be a great place to add a picture.</h2>

<p>Simply replace and highlight any text here to add text. Press "Enter" to add more text or add images. Click on the image to add a caption. It's easy once you get the hang of it, just play around with it for a minute.</p>
</div>
<hr>

<script type="text/javascript">
  editor = new Dante.Editor(
    {
      el: "#editor",
      upload_url: "/images.json", //it expect an url string in response like /your/server/image.jpg or http://app.com/images/image.jpg
      store_url: "/save" //post to save

    }
  );
  editor.start()
</script>

Answer 1

<%= simple_form_for @story do |f| %>
<%= f.input :title %>
<%= f.input :subtitle %>
<%= f.input :content, :id => "editor" %>
<%= f.button :submit %>
<% end %>

将div放入表单中，并将其隐藏字段，如下所示

<%= simple_form_for @story do |f| %>
<%= f.hidden_field :title %>
<%= f.hidden_field :subtitle %>
<%= f.hidden_field :content, html: { id: "content"} %> // Use 'id' in your content field and match it in your editor div. Use data field data-field-id="content"

<div id="#editor" data-field-id="content">
   <%= @story.cotent.try (:html_safe) %> 
   // @story is your instance variable and .content is db column from      story  
</div> 
<%= f.button :submit %>

然后使用jquery将编辑器内容绑定到content字段中，

$(document).ready(function(){
    $("#editor").bind("input properchange", function(){
    $("#story_" + $(this).attr("data-field-id")).val($(this).html())
    });
});

注意:它只保存文本内容，而不保存图像