在Rails中使用Kindeditor富文本编辑器的那些坑...

rails里有很多富文本编辑器可用,比如百度编辑器,FCKEditor,CKEditor等等.不过其中有些不是功能太简单,就是配置其他太麻烦,要不然就是和Rails兼容性太差.

你梦想的富文本编辑器是功能齐全,配置简单,和rails兼容性好,并且在项目里使用几乎不要多余的代码,比如上传图片,视频等等不用写一行代码,自动都帮你统统搞定.

你不是在做梦,Kindeditor可以满足上面所有的要求!不过在最新的turbolinks下使用起来坑还是蛮多的,不过经过大半天的努力,终于可以比较完美的在项目中使用了.下面本猫就来造福大众,聊聊如何避开这些坑使用Kindeditor.

我的环境是rails 4.0.6 + turbolinks 5.0.1,为什么要特的提到turbolinks的版本,因为坑主要都在turbolinks里.

Kindeditor的官方github地址在下面:

https://github.com/Macrow/rails_kindeditor

安装Kindeditor很简单,只需在Gemfile里添加一行:

gem 'rails_kindeditor'

配置起来也很简单,也只需一行:

rails g rails_kindeditor:install

然后你可以按需修改config/initializers/rails_kindeditor.rb中的参数,比如上传路径,支持的上传文件后缀等等.

RailsKindeditor.setup do |config|

  # Specify the subfolders in public directory.
  # You can customize it , eg: config.upload_dir = 'this/is/my/folder'
  config.upload_dir = 'uploads'

  # Allowed file types for upload.
  config.upload_image_ext = %w[gif jpg jpeg png bmp]
  config.upload_flash_ext = %w[swf flv]
  config.upload_media_ext = %w[swf flv mp3 wav wma wmv mid avi mpg asf rm rmvb]
  config.upload_file_ext = %w[doc docx xls xlsx ppt htm html txt zip rar gz bz2]

  # Porcess upload image size
  # eg: 1600x1600 => 800x800
  #     1600x800  => 800x400
  #     400x400   => 400x400  # No Change
  # config.image_resize_to_limit = [800, 800]

  # if you have config in your rails application like this:
  # /config/enviroments/production.rb
  #   # config.action_controller.asset_host = "http://asset.example.com"
  #   # config.assets.prefix = "assets_prefx"
  # then you should:
  #
  # config.asset_url_prefix = "http://asset.example.com/assets_prefx/" if Rails.env.production?

end

在View中嵌入Kindeditor编辑器也很简单,有很多种方法和可选项,其中一种方式如下:

<%= kindeditor_tag :content,"亲,请告诉我们详细信息,如果能贴上示意图片那就更好了呢 ;)" %>

然后你就会在运行的web中看到:

好了,简单的就这么多了,下面的坑要来了 ;(

在rails中如果开启turbolinks(默认都是开启的,不知道turbollinks为何物的请自行谷歌),在某些时候(注意,是某些时候,其他时候又正常)会出现第一次打开页面Kindeditor被显式为text_area的情况,当你再次刷新页面时才会正确显式,为了确认这是由turbolinks引起的,你可以在整个项目中关闭turbolinks.打开application.js,将其中的以下一行删除:

//= require turbolinks

然后再试,你会发现页面第一次打开时可以正确显式Kindeditor控件了.

但是全局关闭turbolinks也不是太好,因为它有一个提速的功能,是一个优化项,所以一般我们并不希望turbolinks被关掉.

网上搜了下,大体都是采用某个页面关闭turbolinks的方法,有以下几种:

第一种方法:
给link_to添加一个’data-no-turbolink’ => true参数

第二种方法:
在application.html.erb的body中html元素中添加data-turbolink=”false”参数

第三种方法:
类似于前两种类型,但是在turbolinks5中参数名不一样,不是data-no-turbolinks,在stack overflow里面,可以看到各种说法,到turbolinks的官方github中也自有一套说法.

第四种方法:
写js或coffee脚本,在页面加载完毕后再手动加载Kindeditor,要根据Kindeditor控件的实际id来写代码.

你会问上面这么多方法到底用哪个???

答案是:上面四种方法在turbolinks5中没有一个管用 ;(

别问我是怎么知道的,都是一点点试出来的…遇到各种奇怪的现象,页面时而正常,时而不正常;时而运行onload,时而不运行…满满的都是泪

而且上述Kindeditor第一次无法正确加载的问题在一个项目中出现,在另一个项目中却压根没有,配置找不到神马差异,真是让人蛋疼…

那么最终解决方案到底存在么!?答案是肯定的,也很简单,你只需在app/assets/javascripts中创建一个新文件load_kindeditor.coffee,然后贴入如下内容:

# coffeescript code
  $(document).on 'turbolinks:before-cache', ->
    KindEditor.remove('.rails_kindeditor')

  $(document).on 'turbolinks:load', ->
    $('.rails_kindeditor').each ->
      KindEditor.create "##{$(this).attr('id')}", "allowFileManager": true, "uploadJson": $(this).data('upload'), "fileManagerJson": $(this).data('filemanager'), "width": '100%', "height": '300'

如果你用的是Kindeditor简单模式,你可能要换成如下内容:

# coffeescript code
  $(document).on 'turbolinks:before-cache', ->
    KindEditor.remove('.rails_kindeditor')

  $(document).on 'turbolinks:load', ->
    $('.rails_kindeditor').each ->
      KindEditor.create "##{$(this).attr('id')}", "allowFileManager": true, "uploadJson": $(this).data('upload'), "fileManagerJson": $(this).data('filemanager'), "width": '100%', "height": '300', "items":["fontname","fontsize","|","forecolor","hilitecolor","bold","italic","underline","removeformat","|","justifyleft","justifycenter","justifyright","insertorderedlist","insertunorderedlist","|","emoticons","image","link"]

请确保以上文件被app/assets/javascripts/application.js正确加载!!!

这些一切OK了 ;)

最后如果你要在实际生成环境中部署Kindeditor,你需要运行如下命令:

rails kindeditor:assets

因为Kindeditor是国人开发的控件,所以在国外论坛反而不太能搜到使用方法,这也是本猫花了这么长时间才搞定的原因!

so,good luck!!!!!