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

Question

有一个很不错的引导编辑器- 自举WYSIWYG，我想在基于RoR 4.0的博客中使用它。问题是，引导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

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

(大多数情况下，在rails表单中有多个编辑器，在本例中，我将向您展示如何在没有错误的情况下完成此操作)

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

首先，对于模型的每个属性，我想使用引导WYSIWYG编辑器，我将使用集成编辑器的字段呈现一个部分，因此您可能有如下所示：

/admin/post/_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，的submit按钮中添加一个类，该类稍后将用于按钮单击侦听器。

现在在admin/shared/editor/_editor.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，而不是文本区域，因此，我们将使用带有类#editor_area_for_summary的div和一个动态id，在本例中，该id的计算值为：。

类：.wysiwyg用于在文档就绪函数中初始化编辑器时选择该类的所有div。

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

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

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

注意:它还获得一个动态id(计算值为："hidden_summary")和一个名称->：汇总

现在，为了使所有这些功能一起工作，我们需要一些javascript对您的doc函数：

/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内容，并将它设置为隐藏输入字段的值。

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

我希望这个能帮上忙:)