WYSIWYG Editor Integration into Best-in-Class Text Area

Question

I use the best_in_place gem to edit client information in place.

My question is, how can I integrate the WYSIWYG editor to edit this content as HTML? I am currently using this editor: https://github.com/Nerian/bootstrap-wysihtml5-rails/

I am not good at javascript and cofeescript, so I'm probably doing something wrong.

My code is:

<%= best_in_place @client, :info, :type => :textarea, :nil => "Click here to add content!", :html_attrs => { class: "wysihtml5" }, :sanitize => false %> 

And clients.js.cofee

 $(document).ready -> # Activating Best In Place jQuery(".best_in_place").best_in_place() # Loading editor $(".wysihtml5").each (i, elem) -> $(elem).wysihtml5() 

Does anyone know what to do with this?

thanks

Answer 1

Try it like this: inner_class: "wysihtml5" , if present, activate the WisiHTML5 editor, the "Save" and "Cancel" buttons must be present (the event handler is disabled by default for proper operation)

In show.html.erb:

  <%= best_in_place @client, :info, type: :textarea, nil: "Click here to add content!", inner_class: "wysihtml5", sanitize: false, ok_button: 'Save', cancel_button: 'Cancel', display_with: lambda { |v| v.html_safe } %> 

In the coffee script file:

 jQuery -> # WisiHTML5 Edit $('.best_in_place') # append .best_in_place() # init .on 'best_in_place:activate', () -> if $(this).attr('data-inner-class') == 'wysihtml5' html = $(this).attr('data-original-content') area = $('textarea', this) area.addClass('span7').unbind('blur') area.wysihtml5().data('wysihtml5').editor.on 'load', (e)-> this.setValue(html, true) # update .on 'best_in_place:success', (e, data) -> if $(this).attr('data-inner-class') == 'wysihtml5' attr = $(this).attr('data-attribute') data = jQuery.parseJSON(data) if data[attr] $(this).attr('data-original-content', data[attr]) $(this).html(data[attr]) 

In show.json.jbuilder:

 json.extract! @client, :info, ... <any other attributes> 

Answer 2

This might be a simple indentation problem for coffeescript. Just insert the lines below the $ (document) .ready -> tab.

 $(document).ready -> # Activating Best In Place jQuery(".best_in_place").best_in_place() # Loading editor $(".wysihtml5").each (i, elem) -> $(elem).wysihtml5() 

To check again, copy your code in the frame coffeescript @ http://js2coffee.org/ : the resulting javascript should look like this: -

 $(document).ready(function() { jQuery(".best_in_place").best_in_place(); $(".wysihtml5").each(function(i, elem) {}); return $(elem).wysihtml5(); }); 

That is, plugins should be called after loading dom.

Answer 3

You need to iterate over each element with the class "wysihtml5", so it should be that way.

 $(function(){ jQuery(".best_in_place").best_in_place(); $.each('.wysihtml5', function(i, elem){ $(elem).wysihtml5(); }); }); 

And converted to Coffee with Js2Coffee , it should work.

 $ -> jQuery(".best_in_place").best_in_place() $.each ".wysihtml5", (i, elem) -> $(elem).wysihtml5() 

Answer 4

I am using a CK editor that I think will be similar to your Wysiwyg editor. Somehow.

Here is an example and a solution for this: A long article on how he switches to this:

http://blog.amps211.com/this-is-me-professing-my-love-for-jquery-and-how-i-got-ckeditor-working-with-jeditable/

to update the editor http://blog.amps211.com/wp-content/uploads/2009/10/jquery.generateId.js http://blog.amps211.com/wp-content/uploads/2009/10/jquery. jeditable.ckeditor.js

Answer 5

I played with it myself, and it was not so obvious.

Here's how I ended up getting the job:

You need to call wysihtml5() on the textarea element, best_in_place:activate to the best_in_place:activate event. This is my application.js.coffee :

 $(".best_in_place").each (index, element) -> $element = $(element) $element .best_in_place() .on 'best_in_place:activate', () -> $element.find(".wysihtml5").each -> $this = $(this) $this.wysihtml5() 

I added the wysihtml5 css class using the inner_class option in the helper:

 <%= best_in_place @client, :info, type: :textarea, nil: "Click here to add content!", inner_class: 'wysihtml5' }, sanitize: false, display_as: :info_html %> 

Note that I use display_as: :info_html , since I have this field in the model to store the processed html, but you can use display_with: lambda { |v| v.html_safe } display_with: lambda { |v| v.html_safe } if this is not your case.

And now this is the hard part: the current version (3.0.3) of best_in_place does not play well with wysihtml5 , since the text space has become blurry to replace it with a contenteditable iframe , which in turn has made the editable operation be canceled. I needed to roll up some modifications to the gem, and I hope that it will be combined (you can see the full discussion here ), but in the meantime you can use my fork . If you do this, then you need to provide your view helper with this additional option: skip_blur: true .