Question

有一个漂亮的引导编辑器 - 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">

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

Answer 1

您是否尝试过使用隐藏字段，使用div并在编辑器进行更改时更新隐藏字段值？希望这有帮助

Answer 2

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

（大多数时候 - 你在轨道表格中有多个编辑器，在这个例子中我将展示如何做到没有错误）

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

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

/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"

您是否将要应用编辑器的模型的表单和属性作为本地参数传递（在本例中为=＆gt; 摘要）。另请注意，您应该在表单的提交按钮中添加一个类： .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 的div和动态ID，在这种情况下评估to： #editor_area_for_summary

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

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

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

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

注意：它还获得动态ID（评估为：“hidden_summary”）和名称 - ＆gt; ：摘要

现在为了使所有这些能够协同工作，我们需要在你的doc ready功能上使用一些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);
    });


});

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

在第二部分，我们在表单按钮上有一个 on click handler ，我们得到div的html内容，并将其设置为隐藏输入字段的值。

在最后一部分我们做相反的事情，我们得到隐藏字段的值，并在文档准备就绪时将其放在编辑器div上，我们在编辑器上显示已存储在数据库中的内容

我希望这个有用：）

如何在我的Rails应用程序中集成Bootstrap-WYSIWYG？

2 个答案:

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