javascript - 使用 medium-editor-rails 保存数据

Question

我已经按照这个 https://github.com/marjinal1st/medium-editor-rails 安装了 medium-editor-rails gem

它完美地显示编辑框，但不知道如何通过模型保存数据

这是显示页面中的 View div

<div class="editable">
  <%= @micropost.content %>
</div>

以及相应的Js

var editor = new MediumEditor('.editable', {
  anchorInputPlaceholder: 'Type a link',
  buttons: ['bold', 'italic', 'quote'],
  diffLeft: 25,
  diffTop: 10,
  firstHeader: 'h1',
  secondHeader: 'h2',
  delay: 1000,
  targetBlank: true
}); 

Answer 1

为了保存您的数据，您应该添加 <div>在 _form.html.erb而不是 show.html.erb您的模型微博文件。它可能是这样的:

<%= f.hidden_field :content, html: { id: "content" } %>
<div class="editable" data-field-id="content"><%= @micropost.content.html_safe %></div>

第一行传递数据:content当您点击表单中的保存/提交按钮时。

此外，在您的 JS 末尾添加以下函数。

$('.editable').bind('input propertychange', function() {
  $("#micropost_" + $(this).attr("data-field-id")).val($(this).html());
});

不确定这是如何工作的。我的猜测是它跟踪更改并有助于保存。了解 JS 的人实际上可以帮助解释这一点。