8

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

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

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

我的代码在视图中： 

<%= 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()

有谁知道该怎么做？

谢谢

4

5 回答 5

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

在咖啡脚本文件中：

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>
于 2014-06-05T12:27:04.603 回答
0

这可能是咖啡脚本的简单缩进问题。只需将 $(document).ready -> 下面的行缩进一个制表符即可。

$(document).ready ->
  # Activating Best In Place
  jQuery(".best_in_place").best_in_place()

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

要进一步验证，请将您的代码复制到咖啡脚本框架 @ http://js2coffee.org/中：生成的 javascript 应该如下所示：-

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

也就是说，插件应该在 dom 加载后调用。

于 2014-06-02T04:10:02.767 回答
0

您必须使用类“wysihtml5”遍历每个元素，所以它应该是这样的。

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

并使用Js2Coffee转换为 Coffee，它应该可以工作。

$ ->
 jQuery(".best_in_place").best_in_place()
 $.each ".wysihtml5", (i, elem) ->
   $(elem).wysihtml5()
于 2014-06-03T21:29:11.663 回答
0

我自己一直在玩这个，至少可以说并不明显。

这就是我最终让它工作的方式：

您需要调用wysihtml5()绑定到best_in_place:activate事件的 textarea 元素。这是我的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()

我在帮助程序上使用选项 添加了wysihtml5css 类：inner_class

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

请注意，我正在使用display_as: :info_html，因为我在模型上有该字段来存储已处理的 html，但display_with: lambda { |v| v.html_safe }如果不是您的情况，您可以使用。

现在它来了棘手的部分：当前版本（3.0.3）best_in_place不能很好地使用，wysihtml5因为 textarea 变得模糊以被 替换contenteditable iframe，这反过来又使可编辑操作被取消。我需要自己对 gem 进行一些修改，希望能够合并（您可以在此处查看完整的讨论），但同时您可以使用我的 fork。如果你这样做，那么你需要为你的视图助手提供这个额外的选项：skip_blur: true.

于 2015-02-23T15:57:22.080 回答
0

我正在使用 CK-Editor，我相信它在某种程度上类似于你所见即所得的编辑器案例。

这是一个示例和解决方案：关于他如何切换到这个的长篇文章：

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

文件到编辑器更新 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

于 2014-06-05T19:36:26.357 回答