2

有一个漂亮的引导编辑器 - Bootstrap WYSIWYG，我想在基于 RoR 4.0 的博客中使用它。问题是Bootstrap WYSIWYG不适用于除 DIV 标签之外的任何东西（据我通过一些搜索知道）。

此代码工作正常：

<div id="editor" contenteditable="true">some editable content</div>

而这个没有：

<%= f.text_area :content, id: "editor", contenteditable: "true" %>
<textarea id="editor" contenteditable="true">

所以，问题是 - 如何将这两件事联系在一起？

4

2 回答 2

0

您是否尝试过放置隐藏字段，使用 div 以及当编辑器发生更改时更新隐藏字段值？希望这可以帮助

于 2013-11-15T18:54:42.517 回答
0

为了将 Bootstrap-WYSIWYG 集成到 Ruby on Rails 应用程序中，您应该执行以下操作：

（大多数时候——你有不止一个编辑器在 Rails 表单中，在这个例子中，我将展示如何做到这一点而不会出错）

我将在 admin 命名空间中使用编辑器，因此我在我的视图中创建了一个文件夹编辑器：“admin/shared/editor”以保持一切潮流和面向内容。

首先，对于我想使用Bootstrap WYSIWYG 编辑器的模型的每个属性，我将使用已集成编辑器的字段渲染一个部分，因此您可能会这样：

/admin/posts/_form.html.haml：

= form_for @post do |f|    
  = render partial: 'admin/shared/editor/field', locals: { f: f, content: "summary" }
  = f.button class: "form_with_editor"

您是否将要应用编辑器的模型的表单和属性作为本地参数传递（在本例中为 =>摘要）。另请注意，您应该向表单的提交按钮添加一个类：.form_with_editor，稍后将用于按钮单击侦听器。

现在在 admin/shared/editor/_field.html.haml 中：

.btn-toolbar.btn-editor{"data-role" => "editor-toolbar", "data-target" => "#editor_area_for_#{content}"}
  = render partial: 'admin/shared/editor/toolbar'

.wysiwyg{id: "editor_area_for_#{content}", style: "overflow:auto; height:444px;max-height:444px", data: {"for-content" => "hidden_#{content}"}}
= f.hidden_field content.to_sym, id: "hidden_#{content}"

此编辑器使用 div 而不是 textarea，因此，我们将使用具有类.wysiwyg和动态 id 的 div，在这种情况下评估为：#editor_area_for_summary

当我们在 doc ready 函数中初始化编辑器时，使用class: .wysiwyg来选择具有此类的所有 div。

工具栏部分包含编辑器自定义工具栏的所有标记，您可以根据需要对其进行自定义并在所有字段中使用它。

为了将 div 的内容复制到表单输入并将它们发布到服务器，您必须使用隐藏的输入字段：

= f.hidden_field content.to_sym, id: "hidden_#{content}"

注意：它还获得一个动态 id（其计算结果为：“hidden_​​summary”）和一个名称 -> :summary

现在，为了使所有这些能够协同工作，我们需要在您的文档就绪函数中添加一些 javascript：

/assets/javascripts/doc_ready.js：

$( document ).ready(function() {

  // EDITOR stuff
  $('.wysiwyg').wysiwyg();

  // Handling the form submission
  $('.form_with_editor').click(function(){
    $('.wysiwyg').each(function() {
      var editor_div_content = $(this).html();
      var hidden_input = $(this).attr("data-for-content");
      $("#" + hidden_input).val(editor_div_content);
    });
  });

  // Fill the editor divs with content
  $('.wysiwyg').each(function() {
      var hidden_input = $(this).attr("data-for-content");
      var editor_div_content =  $("#" + hidden_input).val();
      $(this).html(editor_div_content);
    });


});

在第一部分，我们将编辑器的函数wysiwyg()应用到每个具有此类的div中。

在第二部分，我们有一个表单按钮的单击处理程序，我们获取 div 的 html 内容，并将其设置为隐藏输入字段的值。

而在最后一部分，我们做相反的事情，当文档准备好时，我们获取隐藏字段的值并将其放置在 editors div 上，这样我们在编辑器上显示已经存储在数据库中的内容。

我希望这个有帮助:)

于 2015-10-24T20:24:40.340 回答