2

我已经按照这个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
});
4

2 回答 2

2

为了保存您的数据，您应该添加<div>in_form.html.erb而不是show.html.erb模型 Micropost 的文件。这是它的样子：

<%= 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 知识的人实际上可以帮助解释这一点。

于 2014-10-29T10:34:48.407 回答
0

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

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

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

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

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

editor.subscribe('editableInput', function (event, editorEl) {
    var $micropost = $("#micropost_" + editorEl.getAttribute('data-field-id'));
    $micropost.val(editor.getContent(0));
});
于 2017-02-10T08:06:59.813 回答