Integration of WYSIWYG editor to best-in-place textarea

Question

I\'m using best_in_place gem to editing client\'s info in-place.

My question is, how can I integrate a WYSIWYG Editor for editing this content as HTML? I\'m currently us

Answer 1

I've been playing with this myself, and it was not obvious to say the least.

This is how I eventually got it working:

You need to call wysihtml5() on the textarea element, bound to 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 inner_class option on 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'm using display_as: :info_html, since I have that field on the model to store processed html, but you can use display_with: lambda { |v| v.html_safe } if that is not your case.

And now it comes the tricky part: the current version (3.0.3) of best_in_place does not play nice with wysihtml5 since the textarea got blurred to be substituted by the contenteditable iframe, what in turn made the editable operation to be cancelled. I needed to roll a few modifications to the gem on my own that I hope that got merged (you can see the full discussion here), but in the meanwhile you can use my fork. If you do that, then you need to provide your view helper this extra option: skip_blur: true.