`

rails3.1 jquery框架上安装kindeditor4.0

阅读更多
Kindeditor(4.x) for Rails3 中文文档

可供Rails3使用的gem, 包括了图片和附件上传功能,文件按照类型、日期进行存储。上传采用了Carrierwave。

安装

将下面代码加入Gemfile:
gem "carrierwave"
gem "rails_kindeditor"
运行“bundle”命令:
bundle
安装Kindeditor,运行下面的代码:
rails generate rails_kindeditor:install
完毕!默认情况下,rails_kindeditor在上传文件时不会把文件信息记录入数据库。

使用

在你的layout文件中的<head></head>内包含下面代码:
<%= include_kindeditor_if_needed %>
在你需要使用的controller里面,包含下面代码来控制加载javascript:
include_kindeditor
或者
include_kindeditornly => [:new, :edit]
把需要转换的textarea赋予下列id值:
:id => "kindeditor_id"
完毕!

将上传文件信息记录入数据库(可选)

rails_kindeditor 可以将上传文件信息记录入数据库,以便扩展应用.

运行下面的代码,有两项选项:1.active_record 2.mongoid,默认是active_record。
rails generate rails_kindeditor:migration
or
rails generate rails_kindeditor:migration -o mongoid
运行下面的代码:
rake db:migrate
完毕!

配置选项(可选)

你可以有选择性地加载kindeditor的javascript:
include_kindeditornly => [:new, :edit]
include_kindeditor :except => [:index, :show, :destroy, :create]
你可以通过修改kindeditor-init.js来配置kindeditor,详细配置方法可以阅读Kindeditor的文档:
public/kindeditor/kindeditor-init.js [Rails3.1]
public/javascripts/kindeditor/kindeditor-init.js [Rails3.0.x]



最后,rails3.1在app下有assets文件放有所有的js、css等。把public文件下的kindeditor文件夹剪切到assets/javascripts目录下,在layout文件中无须添加
<%= include_kindeditor_if_needed %>这句。
layout中有这句:<%=javascript_include_tag 'application'%>就可以引用到所有kindeditor文件内容


把配置文件kindeditor-init.js中的kindeditor_id改成你所须id(注意:kindeditor_id可能不能用这个id,换别的id就可以用了。)

如果一个界面有两个编辑器,kindeditor-init.js中配置,如下所写
$(document).ready(function(){
KindEditor.ready(function(K) {
K.create('#kd_content', {
width: "650",
height: "300",
allowFileManager: true,
uploadJson: '/kindeditor/upload',
                          fileManagerJson: '/kindeditor/filemanager'
});
K.create('#new_content', {
width: "600",
height: "300",
allowFileManager: true,
uploadJson: '/kindeditor/upload',
                         fileManagerJson: '/kindeditor/filemanager',

});
});
})

如果想控制html编辑器的菜单,只需添加下面这个属性('-'表示换行)
items: ['source', '|', 'undo', 'redo', '|',
        'preview', 'template', 'cut', 'copy', 'paste', 'plainpaste', 'wordpaste', '|',
        'justifyleft', 'justifycenter', 'justifyright','justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript','superscript', 'clearhtml', 'quickformat', 'selectall', 'fullscreen', '-',
'formatblock', 'fontname', 'hilitecolor', 'bold', 'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|',
'image', 'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'map', 'code', 'pagebreak', 'anchor', 'link', 'unlink',
         '|', 'about']
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics