使用 medium-editor-rails 保存数据答案

【问题标题】：Saving data with medium-editor-rails使用 medium-editor-rails 保存数据
【发布时间】：2014-12-07 05:32:54
【问题描述】：

我已经在https://github.com/marjinal1st/medium-editor-rails 之后安装了 medium-editor-rails gem

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

这是显示页面中的视图 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
});

【问题讨论】：

标签： javascript ruby-on-rails medium-editor

【解决方案1】：

如果您希望监控编辑器的更改，您可以订阅 MediumEditor 公开的自定义 editableInput 事件。每当编辑器中发生更改时，它都会触发，无论是来自键入、剪切/粘贴还是更改文本格式。

另外，您可以通过调用editor.getContent(index) 或editor.serialize() 来获取编辑器的内容。 MediumEditor 支持向其中传递多个元素，因此无论您拥有多少编辑器元素，这些方法都可以正常工作。

editor.getContent(index) 接受一个index 参数，该参数指示您想要其内容的元素的索引。如果您只有一个与编辑器一起使用的元素，您可以调用editor.getContent(0)。

editor.serialize() 将为编辑器中的每个元素创建一个包含键值对的 JSON 对象。键是编辑器元素的id 属性，值是元素的修剪后的innerHTML。

将所有这些结合在一起，您可以使用上面@bean 提到的.erb 的示例代码，然后将其用于javascript：

editor.subscribe('editableInput', function (event, editorEl) {
    var $micropost = $("#micropost_" + editorEl.getAttribute('data-field-id'));
    $micropost.val(editor.getContent(0));
});

【讨论】：

【解决方案2】：

为了保存您的数据，您应该在您的模型 Micropost 的 _form.html.erb 文件中添加 <div> 而不是 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 的人其实可以帮忙解释一下。

【讨论】：