Интеграция «Dante» Редактор среднего стиля YSIWYG в форму Rails

Question

Я пытаюсь интегрировать текстовый редактор WTAIWYG «Dante» в проект Rails. У меня он установлен и отображается на экране. Смотрите скриншот: https://i.imgur.com/lLnEc7n.png

Однако в моем приложении Rails у меня есть пользователи, у которых есть истории. Я бы хотел использовать этот редактор, чтобы пользователи могли создавать эти истории. Мне нужно связать редактор и форму вместе в принципе, но я не знаю, как это сделать, поскольку я никогда раньше не делал ничего подобного. Может, кто-нибудь возражал бы, чтобы я дал мне несколько советов?

Документация для редактора здесь: 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, чтобы связать содержание редактора в области контента, которое

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

ПРИМЕЧАНИЕ: Это только сохранить текстовое содержимое не изображение