`

Kindeditor4.0 for Rails3 . 基于jquery

阅读更多

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']
分享到:
评论

相关推荐

    kindEditor4.0(包括上传功能)

    3. **进度条显示**:在上传过程中,4.0版本提供了文件上传进度条,用户可以直观地看到文件上传的状态,增加了操作的透明度。 4. **文件大小限制**:为了防止过大文件导致服务器压力,KindEditor 4.0允许开发者...

    kindeditor4.0.NET集成版(含图片和附件上传)

    kindeditor4.0.NET集成版(含图片和附件上传), 删除多余其他语言文档,修改js和ashx文件,上传文件按日期分文件夹存放。 kindeditor是一款较轻量级的国产富文本编辑器,包括300多K的表情包,和各类图片,总共只有...

    kindeditor33lc.com.rar

    KindEditor 是一款开源的Web富文本编辑器,广泛应用于网页内容编辑、论坛、博客等场景。这个名为"kindeditor33lc.com.rar"的压缩包很可能是包含了KindEditor的某个版本,具体是4.1.10版。下面将详细讨论KindEditor的...

    在Ext中集成KindEditor4.0正式版

    例如,可能需要引入`ext-all.js`、`ext-theme-neptune.css`以及KindEditor的`kindeditor.js`和`kindeditor.css`。 2. **创建编辑器组件**:在ExtJS中,可以创建一个自定义组件来封装KindEditor。这个组件应该继承自...

    kindEditor4.0

    KindEditor 4.0 变更记录: 新增: 锚点功能。 新增: 增加loadStyleMode属性,默认情况下自动加载CSS文件。 新增: 编辑器对象增加isDirty方法,判断编辑器内容是否有修改。 改善: 粘贴MS Word时自动清理Word专用...

    KindEditor 4.0

    3. **核心文件**:压缩包中的`kindeditor.js`和`kindeditor-min.js`是编辑器的核心JavaScript文件。`kindeditor.js`是完整版,包含了所有功能,而`kindeditor-min.js`是经过压缩和优化的版本,适用于生产环境,可以...

    PyPI 官网下载 | django-kindeditor-0.2.0.tar.gz

    3. **文件上传**:KindEditor支持图片、文件上传,需要处理这些上传的文件,这可能涉及到Django的文件处理和存储机制。 4. **数据安全**:在处理用户提交的富文本时,需要注意XSS攻击,Django和KindEditor都有相应的...

    【JavaScript源代码】如何在vue中使用kindeditor富文本编辑器.docx

    接下来,我们需要创建一个名为`kindeditor.vue`的Vue组件来封装KindEditor的功能。以下是一个简单的模板示例: ```html &lt;div class="kindeditor"&gt; &lt;textarea :id="id" name="content" v-model="outContent"&gt;&lt;/...

    KindEditor 4.0 开源的在线HTML编辑器

    KindEditor是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。 KindEditor 使用 JavaScript ...

    kindeditor富文本编辑器.zip

    - **js** 文件夹:存放KindEditor的主要JavaScript文件,如kindeditor.js,这是编辑器的核心库。 - **plugins** 文件夹:包含预置的插件,如image(图片上传)、link(链接管理)等。 - **themes** 文件夹:存储编辑...

    基于JS实现带表情图片可修改kindEditor编辑器特效源码.zip

    【标题】"基于JS实现带表情图片可修改kindEditor编辑器特效源码"指的是一个使用JavaScript编程语言开发的富文本编辑器项目,该编辑器具备表情图像支持和自定义功能。KindEditor是一款开源的Web富文本编辑器,适用于...

    kindeditor-4.1.11js整合

    整合了kindeditor文本编辑器中所需的js文件, 版本为4.1.11最新版 新增: 俄语语言包,感谢Valery Votintsev (http://codersclub.org/)。 改善: 语言包文件名标准化,zh_CN -&gt; zh-CN, zh_TW -&gt; zh-TW。 Bugfix: [IE6] ...

    HTML可视化文本编辑器kindeditor-4.0.4

    3. 基于插件的方式设计,所有功能都是插件,增加自定义和扩展功能非常简单。 4. 修改编辑器风格很容易,只需修改一个CSS文件。 5. 支持大部分主流浏览器,比如IE、Firefox、Safari、Chrome、Opera。

    KindEditor编辑器使用教程.docx

    `KindEditor.create`的第一个参数是CSS选择器,用于匹配`textarea`,第二个参数是一个对象,包含了编辑器的配置项。你可以根据需求调整编辑器的宽度、高度、工具栏等属性,具体配置项可以查阅官方文档。 4. **获取...

    所见即所得html编辑器KindEditor3.1.2中文免费版.zip

    3. **多语言支持**:尽管标题提到的是中文免费版,但KindEditor实际上支持多种语言,包括但不限于英文、日文、韩文等,这使得它成为国际化项目的一个理想选择。 4. **插件扩展**:为了满足不同用户的需求,...

    基于jQuery改造KindEditor的表情插件

    本教程主要关注的是如何基于jQuery对KindEditor的内置表情插件进行改造。 首先,让我们了解一下jQuery。jQuery是一个高效、简洁的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互。在KindEditor中...

    jquery + kindEditor使用

    KindEditor.ready(function(K) { editor1 = K.create('textarea[name="content"]', { cssPath: '../plugins/code/prettify.css', uploadJson: '../jsp/upload_json.jsp', fileManagerJson: '../jsp/file_...

    kindeditor4.1.11.zip

    3. **插件系统**: KindEditor拥有丰富的插件库,可以扩展编辑器的功能。例如,可以通过安装插件实现代码高亮、地图插入、视频上传等功能。开发者也可以根据需求自定义插件,以满足特定场景的需求。 4. **API接口*...

    Winform Html Editor 使用kindeditor组件实现winform Html 编辑器

    return webBrowser1.Document.InvokeScript("eval", new object[] { "KindEditor.instances['editor'].html()" }).ToString(); } private void SetEditorContent(string content) { webBrowser1.Document....

Global site tag (gtag.js) - Google Analytics