javascript - 将所见即所得编辑器集成到最佳文本区域

Question

我正在使用 best_in_place gem 就地编辑客户的信息。

我的问题是，如何集成一个 WYSIWYG 编辑器来将此内容编辑为 HTML？我目前正在使用这个编辑器:https://github.com/Nerian/bootstrap-wysihtml5-rails/

我不擅长 javascript 和 cofeescript，所以我可能做错了什么。

我的代码在 View 中:

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

和clients.js.cofee

$(document).ready ->

# Activating Best In Place
jQuery(".best_in_place").best_in_place()

# Loading editor
$(".wysihtml5").each (i, elem) ->
$(elem).wysihtml5()

有人知道该怎么办吗？

谢谢

Answer 1

像这样尝试，inner_class: "wysihtml5" 如果存在则激活 WisiHTML5 编辑器，按钮“保存”和“取消”必须存在(默认事件处理程序禁用以正确工作)

在 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 }
  %>

在 CoffeeScript 文件中:

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])

在 show.json.jbuilder 中:

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