kindeditor插件使用

技术分享 Finley Fu 2018-09-22 26评论 10833
kindeditor是一个富文本插件,几乎包括了所有的富文本功能,并且可自行选择功能。

一、kindeditor安装

  • 普通使用

        下载编辑器kindeditor最新版本,下载页面 http://www.kindsoft.net/down.php

        解压文件,然后将所有文件上传到工程目录下,具体目录视不同框架而定

        在html页面引入以下js文件,路径需要修改为自己的路径,保证文件能正常加载

<script charset="utf-8" src="/editor/kindeditor.js"></script>
<script charset="utf-8" src="/editor/lang/zh-CN.js"></script>
        在页面需要的部分加入textarea控件,注意:id需要唯一
<textarea id="editor_id" name="content" style="width:700px;height:300px;">
  这里写入内容
</textarea>
          最后需要增加以下js代码,用于初始化控件
//简单模式初始化
var editor;
var options = {};
KindEditor.ready(function(K) {
   editor = K.create('#editor_id', options);
});

        注意:

                第一个参数为css选择器,一次只能初始化一个textarea元素。

                options为编辑器的配置项,具体参数请参考 编辑器初始化参数

  • rails安装

        安装过程非常简单,首先在Gemfile

gem 'rails_kindeditor'
bundle install
        然后执行命令生成相关文件
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_tag :content,"这里是默认内容" %>
        然后编辑器就可以使用,如图:

          

二、填坑

  • 获取文本框内容

        当表单提交时会发现,提交的数据并没有获取到文本框中的内容,这是因为输入数据时并不能实时使textarea获取到文本内容,那么我们就需要在提交表单时手动赋值

var editor = KindEditor.instances[0];
editor.sync();
        注意,此处KindEditor.instances获取到的是一个文本框数组,根据自己需要取值

  • 生产环境使用

        rails生产环境都会使用production配置启动,首先需要编译资源文件

RAILS_ENV=production rake assets:precompile
        但是当编译完之后,会发现KindEditor的样式文件并没有获取到,这是因为KindEditor需要单独编译

rails kindeditor:assets
        这时public/assets下就出现了KindEditor需要的资源文件,KindEditor也可以正常使用