一直比较喜欢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..
分享到:
相关推荐
除了核心功能外,KindEditor还支持各种插件扩展,例如文件上传、拼写检查、Markdown转换等,这些插件能够进一步增强编辑器的功能。 7. **安装与使用**: 使用KindEditor通常需要将其解压到服务器的适当位置,然后...
通过集成KindEditor,网站管理员可以让访客轻松地编辑和格式化文本,添加图片,甚至插入网络视频,极大地提升了用户在网页上的交互性。 在"kindeditor添加网络视频插件"的主题中,我们要讨论如何为KindEditor扩展...
2. **图片和文件上传**:`rails_kindeditor` 支持图片和文件的上传功能。你需要配置一个专门用于存储这些上传文件的目录,并在服务器端处理文件上传的逻辑,确保安全性。 3. **安全考虑**:由于富文本编辑器允许...
这涉及到理解KindEditor的API和插件机制。你需要创建一个新的JavaScript文件,定义插件的基本结构,包括初始化、按钮点击事件处理、视频URL的输入验证以及视频代码的生成。例如,你可以创建一个名为`videoEmbed.js`...
首先,我们需要理解H5上传图片的核心技术是`File API`,它允许浏览器读取、写入和操作本地文件,而无需服务器的介入。在KindEditor中,我们可以通过监听`change`事件来获取用户选择的文件,然后利用`FileReader`对象...
KindEditor是一款广泛应用于网页编辑的开源富文本编辑器,它提供了丰富的文本格式化选项和功能,如...以上就是关于KindEditor富文本编辑器实现多图上传、去除Flash插件、修复选择图片按钮及展示上传结果的详细解释。
在4.1.12版本中,可能有针对Flash上传图片和视频处理的新插件或者对现有插件进行了更新,以支持新功能。 `kindeditor.js` 是编辑器的核心脚本文件,包含了编辑器的主要逻辑和功能实现。在这个版本中,可能对这个...
当用户从网页或截图工具中复制图片时,编辑器会自动检测并上传这些图片到服务器,然后插入到内容中,避免了手动下载和上传的繁琐步骤。这利用了HTML5的Clipboard API来读取剪贴板数据,配合File API进行上传。 5. *...
4. **返回JSON响应**:KindEditor期待上传脚本返回JSON格式的数据,包括文件的URL和其他相关信息。例如,成功上传后,返回一个包含文件URL的对象:`{"error":0,"message":"上传成功","url":...
KindEditor内置了图片和文件上传插件,用户可以直接在编辑器内上传图片或文件,无需离开当前页面。上传过程通常包括选择文件、预览、上传和返回编辑器,这些步骤都是自动化的。上传后的资源可以被嵌入到编辑内容中...
这个插件通常包含一系列的图片资源和对应的代码,用于在编辑器内显示和插入这些表情。 在“基于jquery修改kindeditor的表情插件”这个任务中,我们首先需要做的是解压名为“emoticons.rar”的压缩包。这个压缩包里...
"KindEditor图片批量上传工具"是一款专为网页设计者和内容创作者打造的高效图片上传解决方案。这款工具允许用户在Web界面一次性上传多张图片,极大地提升了工作效率,特别是对于那些需要频繁处理文字和图像,比如...
本文将详细介绍如何正确配置kindEditor实现多图上传功能,并着重讲解容易出错的地方——主要是路径配置以及确保系统给予控件上传图片的权限。 #### 二、环境准备 在开始配置之前,请确保已经安装并正确引入了以下...
在“kindeditor上传视频、图片功能实现”中,我们将探讨如何利用KindEditor与Java后端配合,实现在网页上进行图片和视频的上传功能。 1. **KindEditor的图片上传功能**: KindEditor内建了图片上传的功能,用户...
这是本人写的一个基于KindEditor-4.1.9的Java项目,采用Struts2框架,实现了KindEditor单张图片上传、批量图片上传,可以上传到image目录下的子目录中,可返回上一级目录,并实现了按名称、大小、类型排序的功能。...
然而,原始的KindEditor可能并不直接支持图片上传后的压缩,这可能导致用户上传大尺寸图片时,服务器存储空间消耗过大,网页加载速度变慢等问题。 描述中提到的“带压缩图片功能”,意味着这个版本的KindEditor已经...
本文将详细讲解如何在KindEditor中实现图片上传时携带token字段,以确保数据的安全性和完整性。 首先,理解“token”在Web开发中的作用至关重要。Token通常用于验证客户端请求的合法性,防止跨站请求伪造(Cross-...
在H5版的KindEditor中,图片上传功能将基于HTML5的File API和FormData对象来实现,这使得用户无需Flash插件也能进行文件上传。 3. **File API**:这是HTML5引入的一套接口,允许JavaScript操作本地文件,包括读取、...
3. **修改`insertimage`方法**:对于首次上传的图片,`clickFn`函数中的`width`和`height`可能为空,此时需要修改`insertimage`方法来实现同样的功能。`insertimage`方法定义在`kindEditor.js`文件中,关键代码如下...