将WYSIWYG编辑器集成到最佳原位textarea
我正在使用best_in_place gem来就地编辑客户端的信息。
我的问题是，如何整合WYSIWYG编辑器以将此内容编辑为HTML？ 我目前正在使用这个编辑器： https ： //github.com/Nerian/bootstrap-wysihtml5-rails/
我不擅长javascript和cofeescript，所以我可能做错了。
我的代码在视图中：
: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()
有谁知道该怎么办？
谢谢
尝试这样， 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, ...
这可能是coffeescript的一个简单的缩进问题。 只需在标签下缩进$（document）.ready – >下面的行。
$(document).ready -> # Activating Best In Place jQuery(".best_in_place").best_in_place() # Loading editor $(".wysihtml5").each (i, elem) -> $(elem).wysihtml5()
要进一步validation，请在coffeescript框架中复制代码@ http://js2coffee.org/ ：生成的javascript应如下所示： –
$(document).ready(function() { jQuery(".best_in_place").best_in_place(); $(".wysihtml5").each(function(i, elem) {}); return $(elem).wysihtml5(); });
也就是说，应该在加载dom后调用插件。
你必须用类“wysihtml5”迭代每个元素，所以它应该是这样的。
$(function(){ jQuery(".best_in_place").best_in_place(); $.each('.wysihtml5', function(i, elem){ $(elem).wysihtml5(); }); });
并转换为咖啡与Js2Coffee它应该工作。
$ -> jQuery(".best_in_place").best_in_place() $.each ".wysihtml5", (i, elem) -> $(elem).wysihtml5()
我正在使用CK-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
我自己一直在玩这个，至少可以说是不明显的。
这就是我最终实现它的方式：
你需要在textarea元素上调用wysihtml5() ，绑定到best_in_place:activate事件。 这是我的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()
我在帮助器上使用inner_class选项添加了inner_class css类：
<%= 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 } display_with: lambda { |v| v.html_safe }如果不是你的情况。
现在它来了一个棘手的部分： best_in_place的当前版本（3.0.3）与best_in_place不能很好用，因为textarea被模糊的替换为contenteditable iframe ，这反过来使得可编辑操作被取消。 我需要自己对gem进行一些修改，我希望它能够合并（你可以在这里看到完整的讨论 ），但同时你可以使用我的fork 。 如果你这样做，那么你需要为你的视图助手提供这个额外的选项： skip_blur: true 。