`
doabit
  • 浏览: 52947 次
  • 性别: Icon_minigender_1
  • 来自: 江苏
社区版块
存档分类
最新评论

Kindeditor rails3 插件 支持上传图片和mongoid

阅读更多
    一直比较喜欢Kindeditor,不过上传图片我一直没看他的代码,前二天看到http://dnnta.iteye.com/blog/746577 这个帖子,弱于明白kindeditor 图片上传的json了,就做了个简单的plugin,功能比较简单,主要是方便自己使用。支持active_record 和 mongoid..
   
   插件地址:kindeditor-rails3

要求:rails3 ,paperclip(如果使用mongoid,请注意修改paperlcip以支持mongoid,,具体可睦:Mongoid 文件上传CarrierWave 和paperclip)

1.安装:
   以plugin形式
  
     rails plugin install git://github.com/doabit/kindeditor.git
   

  
   以gem形式
   
sudo gem install kindeditor


2.  修改Gemfile 添加,
   
     gem 'kindeditor'
     gem 'paperclip'   
     


3.运行 generator ,安装所压根的文件.
   
rails g kindeditor:install

  
4.使用,如果使用active_record,要先执行
  rake db:migrate


5.在layouts 中添加
 
<%=kindeditor_javacript_include_tag%>


6. 给textarea 添加ID “ kindeditor”

7.支持mongoid,

8. 插件会添加以下文件
  app/controllers/kindeditor_controller.rb
   app/models/kindeditor_image.rb
   public/javascripts/kindeditor/*


9.如要修改kindeditor参数, 可修改
  
public/javascripts/kindeditor/kindeditor_config.js


  
使用例子:(已经安装kindeditor..paperclip)
1/创建 CRUD for Post
  
rails generate scaffold post title:string body:text

  
2.Run Migrations

  
 rake db:migrate


  3.修改 application.html.erb

    
 <%=kindeditor_javacript_include_tag%>


  4.修改 views/posts/_form.html.erb

   
 <%= f.text_area :body,:id => "kindeditor" %>


---------------------------

  继续打票房:
  转载注明:javaeye--doabit..
1
0
分享到:
评论
2 楼 awen0702 2011-04-05  
最近刚刚接触rails3,前两天一直在看ckeditor,可惜不太会用,不得已只好换个富文本编辑器了,kindeditor_rails3这个插件几乎不用什么配置就可以用了,挺方便
1 楼 southwolf 2010-11-30  
kindeditor_javacript_include_tag

……我说怎么死活不好用呢……我习惯性地就写成 javascript了……

相关推荐

    kindeditor文本编辑插件

    除了核心功能外,KindEditor还支持各种插件扩展,例如文件上传、拼写检查、Markdown转换等,这些插件能够进一步增强编辑器的功能。 7. **安装与使用**: 使用KindEditor通常需要将其解压到服务器的适当位置,然后...

    kindeditor添加网络视频插件

    通过集成KindEditor,网站管理员可以让访客轻松地编辑和格式化文本,添加图片,甚至插入网络视频,极大地提升了用户在网页上的交互性。 在"kindeditor添加网络视频插件"的主题中,我们要讨论如何为KindEditor扩展...

    ruby rails_kindeditor(编译器)插件

    2. **图片和文件上传**:`rails_kindeditor` 支持图片和文件的上传功能。你需要配置一个专门用于存储这些上传文件的目录,并在服务器端处理文件上传的逻辑,确保安全性。 3. **安全考虑**:由于富文本编辑器允许...

    kindeditor--自定义添加网络视频插件,修改批量图片上传方式flash为h5

    这涉及到理解KindEditor的API和插件机制。你需要创建一个新的JavaScript文件,定义插件的基本结构,包括初始化、按钮点击事件处理、视频URL的输入验证以及视频代码的生成。例如,你可以创建一个名为`videoEmbed.js`...

    优化kindeditor,修改flash批量上传图片方式为H5上传

    首先,我们需要理解H5上传图片的核心技术是`File API`,它允许浏览器读取、写入和操作本地文件,而无需服务器的介入。在KindEditor中,我们可以通过监听`change`事件来获取用户选择的文件,然后利用`FileReader`对象...

    kindeditor富文本,多图上传,去除flash插件,解决无法展示选择图片按钮问题,以及添加上传后结果展示

    KindEditor是一款广泛应用于网页编辑的开源富文本编辑器,它提供了丰富的文本格式化选项和功能,如...以上就是关于KindEditor富文本编辑器实现多图上传、去除Flash插件、修复选择图片按钮及展示上传结果的详细解释。

    kindeditor--4.1.12 解决flash批量上传图片按钮不显示与支持video视频

    在4.1.12版本中,可能有针对Flash上传图片和视频处理的新插件或者对现有插件进行了更新,以支持新功能。 `kindeditor.js` 是编辑器的核心脚本文件,包含了编辑器的主要逻辑和功能实现。在这个版本中,可能对这个...

    优化kindeditor,修改flash批量上传图片方式为H5上传,添加第三方视频代码功能,添加手机尺寸预览,粘

    当用户从网页或截图工具中复制图片时,编辑器会自动检测并上传这些图片到服务器,然后插入到内容中,避免了手动下载和上传的繁琐步骤。这利用了HTML5的Clipboard API来读取剪贴板数据,配合File API进行上传。 5. *...

    kindeditor-4.1.11多图上传按钮无法出现且无法点击flash无法上传

    4. **返回JSON响应**:KindEditor期待上传脚本返回JSON格式的数据,包括文件的URL和其他相关信息。例如,成功上传后,返回一个包含文件URL的对象:`{"error":0,"message":"上传成功","url":...

    kindeditor编辑器,可上传多图片,文件上传等功能

    KindEditor内置了图片和文件上传插件,用户可以直接在编辑器内上传图片或文件,无需离开当前页面。上传过程通常包括选择文件、预览、上传和返回编辑器,这些步骤都是自动化的。上传后的资源可以被嵌入到编辑内容中...

    基于jQuery改造KindEditor的表情插件

    这个插件通常包含一系列的图片资源和对应的代码,用于在编辑器内显示和插入这些表情。 在“基于jquery修改kindeditor的表情插件”这个任务中,我们首先需要做的是解压名为“emoticons.rar”的压缩包。这个压缩包里...

    kindEditor+图片批量上传

    "KindEditor图片批量上传工具"是一款专为网页设计者和内容创作者打造的高效图片上传解决方案。这款工具允许用户在Web界面一次性上传多张图片,极大地提升了工作效率,特别是对于那些需要频繁处理文字和图像,比如...

    kindEditor批量传图配置

    本文将详细介绍如何正确配置kindEditor实现多图上传功能,并着重讲解容易出错的地方——主要是路径配置以及确保系统给予控件上传图片的权限。 #### 二、环境准备 在开始配置之前,请确保已经安装并正确引入了以下...

    kindeditor上传视频、图片功能实现

    在“kindeditor上传视频、图片功能实现”中,我们将探讨如何利用KindEditor与Java后端配合,实现在网页上进行图片和视频的上传功能。 1. **KindEditor的图片上传功能**: KindEditor内建了图片上传的功能,用户...

    KindEditor-4.1.9批量上传图片完整示例(可以上传到image目录下的子目录中,可返回上一级目录,并实现了按名称、大小、类型排序的功能)

    这是本人写的一个基于KindEditor-4.1.9的Java项目,采用Struts2框架,实现了KindEditor单张图片上传、批量图片上传,可以上传到image目录下的子目录中,可返回上一级目录,并实现了按名称、大小、类型排序的功能。...

    kindeditor(带压缩图片功能)

    然而,原始的KindEditor可能并不直接支持图片上传后的压缩,这可能导致用户上传大尺寸图片时,服务器存储空间消耗过大,网页加载速度变慢等问题。 描述中提到的“带压缩图片功能”,意味着这个版本的KindEditor已经...

    kindeditor图片上传携带token字段

    本文将详细讲解如何在KindEditor中实现图片上传时携带token字段,以确保数据的安全性和完整性。 首先,理解“token”在Web开发中的作用至关重要。Token通常用于验证客户端请求的合法性,防止跨站请求伪造(Cross-...

    kindeditor多图上传H5版

    在H5版的KindEditor中,图片上传功能将基于HTML5的File API和FormData对象来实现,这使得用户无需Flash插件也能进行文件上传。 3. **File API**:这是HTML5引入的一套接口,允许JavaScript操作本地文件,包括读取、...

    kindEditor4.1版修改上传图片宽高(图片自适应)

    3. **修改`insertimage`方法**:对于首次上传的图片,`clickFn`函数中的`width`和`height`可能为空,此时需要修改`insertimage`方法来实现同样的功能。`insertimage`方法定义在`kindEditor.js`文件中,关键代码如下...

Global site tag (gtag.js) - Google Analytics