Question

我已按照此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
});

Answer 1

为了保存您的数据，您应该在<div>而不是模型Micropost的_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知识的人实际上可以帮助解释这个。

Answer 2

如果您正在查看对编辑器的更改，您可以订阅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));
});

使用medium-editor-rails保存数据

2 个答案: