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

Question

There is a pretty bootstrap editor - Bootstrap WYSIWYG , which i want to use in my blog based on RoR 4.0. The problem is that Bootstrap WYSIWYG does not work with anything except DIV tag (as far as i know from a bit searching).

This code works fine:

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

And this one doesnt:

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

So, the question is - how to connect this two things together?

Answer 1

have you tried putting a hidden field, working with the div and when the editor have changes update the hidden field value? Hope this helps

Answer 2

In order to integrate Bootstrap-WYSIWYG in a Ruby on Rails app you should do the following:

(most of the times - you have more than one editor in a rails form, in this example I will show how to do it without errors)

I will use the editor in the admin namespace, therefore I have created a folder editor inside my views: "admin/shared/editor" to keep everything tide and content oriented.

Firstly, for every attribute of a model I would like to use the Bootstrap WYSIWYG editor I will render a partial with the field that has integrated the editor, so you might have smth like this:

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

were you pass as a local parameter the form and the attribute of the model you would like to apply the editor (in this case => summary ). Note also that you should add a class to the submit button of the form: .form_with_editor , that will be used later for the button click listener.

Now inside 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}"

This editor works with a div and not with a textarea, therefore, we will be using a div with class .wysiwyg and a dynamic id which in this case evaluates to: #editor_area_for_summary

The class: .wysiwyg is used in order to select all the divs with this class when we initialize the editor in our doc ready function.

The toolbar partial contains all the markup for the custom toolbar of the editor, you can customize it as you wish and use it in all your fields.

In order to copy the contents of the div to the form input and post them to the server, you have to use a hidden input field :

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

Note: it also gets a dynamic id(which evaluates to: "hidden_summary") and a name -> :summary

Now in order to make all these to work together we need some javascript on your doc ready function:

/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);
    });


});

On the first part we apply the function wysiwyg() of the editor in every div that has this class.

On the second part we have an on click handler of the form button we get the html content of the div and we set it as the value of our hidden input field.

And on the last part we do the opposite, we get the value of the hidden field and place it on the editors div when the document is ready, with this one we display content on the editor that is already stored in the database.

---

I hope this one helps :)