`

Kindeditor4.0 for Rails3 . 基于jquery

kindeditor4rails html编辑器 
阅读更多

Kindeditor4.0 for Rails3 (include 3.1 and 3.0.x)

Kindeditor for Rails3, including image and file upload using carrierwave.

Installation

Add this to your Gemfile

gem "carrierwave"
gem "rails_kindeditor"

Run “bundle” command.

bundle

Run install generator:

rails generate rails_kindeditor:install

That’s all! By default, rails_kindeditor do not save upload file information into database.

Usage

Basically include <%= include_kindeditor_if_needed %> under the <head> element of your in your layout file:

<%= include_kindeditor_if_needed %>

In your controller, use include_kindeditor method to load kindeditor:

include_kindeditor
or
include_kindeditor :only => [:new, :edit]

Assign your textarea with id in your form:

:id => "kindeditor_id"

That’s all.

Customize upload directory(optional)

When you run “rails generate rails_kindeditor:install”, installer will copy uploader files in you app/uploaders folder. Just modify “BASE_DIR” or “store_dir” in asset_uploader.rb.

Save upload file information into database(optional)

rails_kindeditor can save upload file information into database.

Just run migration generate, there are two ORM options for you: 1.active_record 2.mongoid, default is active_record.

rails generate rails_kindeditor:migration
or
rails generate rails_kindeditor:migration -o mongoid

The generator will copy model and migration to your application. When you are done, remember run rake db:migrate:

rake db:migrate

That’s all.

Configuration options

You can load kindeditor javascript only in some action if you needed:

include_kindeditor :only => [:new, :edit]
include_kindeditor :except => [:index, :show, :destroy, :create]

You can config kindeditor by kindeditor-init.js file, please read Kindeditor’s documents:

public/kindeditor/kindeditor-init.js [Rails3.1]
public/javascripts/kindeditor/kindeditor-init.js [Rails3.0.x]

License

MIT License. Copyright 2011

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_kindeditor :only => [:new, :edit]

把需要转换的textarea赋予下列id值：

:id => "kindeditor_id"

完毕！

自定义上传目录（可选）

当你运行“rails generate rails_kindeditor:install”的时候，安装器会将uploader拷贝到app/uploaders文件夹。 在asset_uploader.rb文件中修改“BASE_DIR”或者“store_dir”即可（可参考Carrierwave）。

将上传文件信息记录入数据库（可选）

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_kindeditor :only => [: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]
在本人博客中有写过rails 3 assets 文件下有三个文件的文章，在这里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']
分享到：
| jquery jConfirm
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics