- 浏览: 162625 次
- 性别:
- 来自: 华东
文章分类
最新评论
-
chen_miao:
我是初学者,请问,我在flex设计好了带有按钮和下拉框的界面, ...
ruby+flex实现天气预报 -
barrytyh:
很多技术人员都有想法,但忘了一个根本性的问题,谁在给你MONE ...
互联网创业与软件开发 -
fireflyman:
囧......
关于并发和并行 -
fireflyman:
你老再次出现了
谈谈互联网新产品如何起步 -
qhh394141930:
写得很详细,受教了。谢谢!
从瀑布模型、极限编程到敏捷开发
在线编辑器是web应用中最常见的东西了,关于它的作用和意义我不想多说什么了。对于编辑器的使用,之前就是随便找个简单的HTML编辑器甚至是textarea来应付,也没花多少时间来整这个东西,但事情开始逐渐变得麻烦起来,因为我们的客户(可能就是你的老板)的要求越来越高:能不能加上点丰富的表情?能不能使编辑器再多支持几种格式排版?或许有一天客户看到了搜狐的编辑器,回来说能不能让我们的编辑器也增加本地图片上传?最好再要加个附件功能,并且也要从本地上传 …………,这一切让我以前做的小编辑器显得无地自容,也忒简陋了吧。于是我很自然地想到了rails里面最常用的FCK编辑器,的确,它基本可以满足我的所有需要,可是仍有3点让我感到不大舒服的地方:
1 尽管FCk的配置使用已经很方便了,但仍然有不少需要汉化和定制的地方。
2 这个东西显的有稍稍有点大,为了性能,我还期望让它再小一点。
3 这是个不是理由的理由:用户感到单调了,为什么我们的系统里面的编辑器都是一个模样,我们需要点新口味。
我首先的想法就是改改FCk,旧米做新饭,可是我发现修改FCK不是件容易的事,并且把FCK修改成另外一种风格和结构更难,后来转念一想,反正里外都是改,我何不找另外一款编辑器做做文章,之前在51js混的时候听说新浪的编辑器做的不错,于是load下来看看,豁豁豁……,这不就是word吗?太酷了,我有了马上就使用它的冲动,但是打开源码一看是个asp版本的,并且转为utf8后,注释也成了乱码,好在它的js代码可读性还算比较好,于是我开始着手做两件事,1是裁掉一些功能 2是把它转为rails版本的。经过一段时间的修改和维护这个东东算是稳定下来了,使用和效果如下:
将editor文件夹放在public下,在需要用编辑器的的form中写:
注意这里的id不要写成content,貌似是由于命名冲突的原因 <input type="hidden" id="content1" name="content" value=""></input> 注意这里要把上面的隐藏域的id穿给编辑器的iframe <iframe id="myEditor" src="/editor/editor.htm?id=content1" frameborder="0" scrolling="no" width="550" height="220"></iframe> 再附上一段js校验编辑器内容不为空的代码 var content = myEditor.getHTML().replace(/<.*?>/g,"").split(" ").join("").split(" ").join(""); if(content.length==0){ alert('公告内容不能为空!'); return false; }
效果还不错吧,下面还有2件重要的事情要做:上传图片和上传附件,之所以说这个是rails版的,也就是这两个功能和rails有点干系。先简分析下上传本地图片吧,原理是这样的,点击上传图片后弹出一个新窗口,叫你输入你的本地图片,这个窗口对应的页面是editor\editor目录下的img.htm文件,打开看看可以看到有个向服务器提交图片的form,并且action指向服务器保存编辑器图片的那个action,用户提交本地图片后,服务器将图片保存,并把该图片的保存地址返还回去,编辑器接收到该图片地址后,插进编辑器的主窗口,这样图片基本就在编辑中显现了,当然你可以在img.htm写上校验逻辑,我已经加上了图片类型判别的js校验。整个流程就是这样,上传本地附件和图片的流程基本一样,上传附件窗口对应的文件是attach.htm文件,只不过服务器保存用户提交的附件后,返还的是下载该附件的地址,我也已经在attach.htm加上zip和rar的校验。注意我已经将上述的东西做好了,无需修改任何东西!当然你可以再去修改成你自己喜好的风格。
接下来就开始写服务器处理上传图片的附件的逻辑了,注意由于我在上传图片和上传附件的form中把action的地址分别指向的是:/front/editors/upload_editor_image和/front/editors/upload_editor_attach,所以如果你不想修改任何东西的话,那么请保证后台的控制器一定要是front/editors,action分别是upload_editor_image和upload_editor_attach。代码附上:
class Front::EditorsController < ApplicationController skip_before_filter :verify_authenticity_token # 上传图片 def upload_editor_image file = params[:imgfile] filename = params[:imgfile].original_filename.split('.').reverse filename = Time.now.strftime("%Y%m%d%H%M%S") + rand(10000).to_s + "." + filename[0] File.open("#{File.expand_path(RAILS_ROOT)}/public/upload/editor_image/#{filename}", "wb") do |f| f.write(file.read) end render :text => "<script>window.parent.LoadIMG('/upload/editor_image/#{filename}')</script>" rescue render :text => "<script>window.parent.alert('您上传的图片无效或者损坏!');window.parent.divProcessing.style.display='none'; </script>" end # 上传附件 def upload_editor_attach file = params[:attach] filename = params[:attach].original_filename.split('.').reverse filename = Time.now.strftime("%Y%m%d%H%M%S") + rand(10000).to_s + "." + filename[0] File.open("#{File.expand_path(RAILS_ROOT)}/public/upload/editor_attach/#{filename}", "wb") do |f| f.write(file.read) end render :text => "<script>window.parent.LoadAttach('/upload/editor_attach/#{filename}')</script>" rescue render :text => "<script>window.parent.alert('您上传的附件无效或者损坏!');window.parent.divProcessing.style.display='none'; </script>" end def download_attach send_file params[:path] rescue render :text => "对不起,改附件已经损坏,无法下载!" end end
效果如下:
下面是改编辑器的压缩包,直接解压即可。
评论
支持!
总体上看,还是非常不错的。
2,文章排版功能会导致ff3长时间不反应,在对应的方法里也有一些乱码。
oChild[i].innerHTML = oChild[i].innerHTML.replace(/(^[ |��|��]*)|([ |��|��]*$)/g, "");
是由于编码方式造成的,是我当时转格式时弄乱的,就干脆别管它或者直接删除,因为都是无关紧要的,主要是一些被我裁掉的功能。
说真的,在ff3下我还真没仔细侧,说真的,js跨平台这种东西真的不好说,多少有点问题,我一般的处理是在ie ff下基本够用就可以了,说远的吧,你像sohu的编辑器在ff下是报一堆错误,近的吧,你像JE的编辑器在各个平台下也有些小小的问题,但不影响正常使用就足够了。
2,文章排版功能会导致ff3长时间不反应,在对应的方法里也有一些乱码。
oChild[i].innerHTML = oChild[i].innerHTML.replace(/(^[ |��|��]*)|([ |��|��]*$)/g, "");
<div class='quote_div'>不知道提交后出错再次返回编辑器所在页时内容是否还能保留</div>
<p><br/>在提交前就应该用js检查,再次返回时数据没了哦,可以考虑用自动保存</p>
<div class='quote_title'>Raecoo 写道</div>
<div class='quote_div'><br/>这样的调用方式和163的那个编辑器一个样 <br/>如果修改版本能够定制Button就更好了,毕竟多数情况下用不了这么多功能 <br/></div>
<p><br/><br/>要是每个客户都像你那么想就好了,不才早些时候就改过个网易版的,再次分享: </p>
<pre name='code' class='ruby'><input type="hidden" id="topic_content" name="content"/>
<iframe src="/HtmlEditor/editor.html?id=topic_content" frameborder="0" scrolling="no" width="100%" height="220"></iframe></pre>
<p> 效果:</p>
<p><img src='http://liuqiang.iteye.com/upload/picture/pic/17678/3ee0c2c8-baeb-3926-847b-6bea5838bd61.jpg ' height='214' alt='' width='760'/><br/><br/></p>
<p> </p>
liuqiang 真是功德无量!
今天看了好几篇你的文章,很不错!!
这样的调用方式和163的那个编辑器一个样
如果修改版本能够定制Button就更好了,毕竟多数情况下用不了这么多功能
oForm has no properties
[Break on this error] else oForm.addEventListener('submit',AttachSubmit,false);
是不是要配置什么东西。
还有下载的文件里有svn信息,还是去掉的比较好。
效果不错,等有时间做成java版的。
svn可能没完全清掉,一会彻底清一遍!
不知道你有没有将iframe放在form里面,因为你编辑器会根据你传入的input节点的父节点找form的id,如果这个form不存在将会报错。
如果你用IE的话,将会看到一个警告框,提示请将iframe放在form里面。
oForm has no properties
[Break on this error] else oForm.addEventListener('submit',AttachSubmit,false);
是不是要配置什么东西。
还有下载的文件里有svn信息,还是去掉的比较好。
效果不错,等有时间做成java版的。
注意在编辑文章的时候这样写:
<input type="hidden" id="xxxx name="content" value="<%=h @xxx.content %>"/>
也就是用h方法将内容里面的html先过滤下
发表评论
-
创建你自己的rails generator
2010-01-27 15:01 1222在多个rails项目中,有时需要共享一些公用的componen ... -
rspec实践一(从零开始)
2009-12-25 12:52 1381关于利用rspec的文章感 ... -
javascript-image-cropper-ui with rails
2009-07-31 23:18 1502在rails上传头像的过程中,一般后端会采用rma ... -
简简单单在rails中做定时任务
2009-07-27 19:58 3393在平时的开发过程中,经常会遇到一些定时任务的需求 ... -
用restful_authentication和role_requirement搭建验证授权系统
2008-09-30 21:20 1563转自 http://fanix.iteye.com/blog/ ... -
Rails中html_escape和sanitize
2008-09-26 13:33 2562转自:http://blackanger.blog.51cto ... -
Rails简洁的模板系统Malline
2008-09-14 15:25 1410前段时间听说ra ... -
在rails中优雅的进行模型校验
2008-09-07 20:53 2193在用rails进行开发时,最常见的操作的是前台提交 ... -
win+apache+mongrel下部署ROR
2008-09-01 20:16 1141gem install mongrel #选择最 ... -
Ruby中使用Memecached
2008-09-01 20:03 1303sudo apt-get install memcached ... -
在rails中使用memcached
2008-09-01 20:00 1130libeven memcached的使用需要li ... -
在Ruby中设计Callback机制
2008-08-31 21:11 1944阅读Paperclip源码,发现里面有一个不错的callbac ... -
我怎么就觉得rails适合做大型应用
2008-08-25 13:24 3520之前读了不少 ... -
像操作ActiveRecord一样操作XML
2008-08-10 18:05 1272在开发RESTful应用或者实现多个应用系统交互时 ... -
ImageMagick/Rmagick 安装的那些事儿
2008-08-05 12:54 1174windows平台×××××××××××××××××××××× ... -
让google来为rails画图表
2008-07-26 17:05 1371去年年底的时候,所做的一个rails项目涉及到图表 ... -
10分钟给一个rails遗留系统添加标签功能
2008-07-19 10:18 994早些时候做过了一个rails系统,当时没有涉及到标签的功 ... -
让rails处理图片再简单一点
2008-07-14 18:25 3064先来看看rails处理图片的过程吧,用户上传图片, ... -
让rails处理图片再简单一点
2008-07-07 12:50 1113先来看看rails处理图片的过程吧,用户上传图片, ... -
利用rails轻松建立个性化主页门户
2008-07-04 12:10 1124简单来说,个性化主页就是结合了各种小模块和网络信息 ...
相关推荐
超经典word风格的rails在线编辑器,注意在编辑文章的时候这样写: <input type="hidden" id="xxxx name="content" value="<%=h @xxx.content %>"/> 也就是用h方法将内容里面的html先过滤下
`GoOnRails`是专门为Rails开发者设计的一个生成器,它允许在Rails应用中集成Go代码,创建Go API服务。这个工具简化了在Rails项目中使用Go进行后端处理的流程,使开发者可以利用Go的性能优势处理高并发请求,同时保留...
Ruby on Rails(简称Rails)是一种基于Ruby语言的开源Web应用程序框架,它遵循MVC(Model-View-Controller)架构模式,旨在简化Web开发过程并提高效率。在这个“ruby on rails在线考试系统”中,我们可以探讨以下几...
- 推荐几款流行的编辑器及其使用教程。 - **Linux命令行学习资源**: - 提供在线教程或书籍链接。 #### 四、Ruby on Rails安装最佳实践 - **安装步骤**: - 环境准备: 确保操作系统支持,并安装必要的软件包。 ...
书中介绍了Ruby on Rails安装的最佳实践,以及如何通过Git、编辑器和Linux命令行等前置技能的学习,为后续的Rails开发打下基础。Git作为版本控制系统,对于团队协作开发项目尤为重要,学习它的使用方法能够帮助...
介绍rails框架,版本是rails2点几的,不过思路差不多,具体区别可以去看官网
Aptana是一款强大的集成开发环境(IDE),尤其适用于Rails项目的开发,它提供了丰富的特性来提升开发效率。本教程将详细介绍如何使用Aptana与Rails结合,创建一个功能完备的Web应用程序。 首先,我们需要安装Aptana...
11. **Rails Generators**:Rails的生成器可以帮助快速创建新的控制器、模型、迁移等,大大提高了开发效率。 12. **Migrations**:Rails的迁移机制允许开发者通过Ruby代码来管理数据库结构的变化,使得数据库版本...
标题 "Rails" 指的是 Ruby on Rails,一个开源的Web应用程序框架,它基于Ruby编程语言,遵循MVC(模型-视图-控制器)架构模式。Rails由David Heinemeier Hansson在2004年创建,其设计理念是强调代码的简洁性、DRY...
从给定的文件信息来看,我们正在探讨的是一本关于Ruby on Rails的书籍,书名为《Simply Rails2》,作者是Patrick Lenz。本书旨在为初学者提供深入理解Ruby on Rails框架的指南,从基础概念到高级主题均有涵盖,是...
rails_apps_composer, 一个 gem,为 Rails 启动应用程序创建 Rails 应用程序模板 Rails 应用编辑器 Rails 应用程序编辑器 gem 安装一个 命令行 工具来从"食谱"的Collection 组装 Rails 应用程序。"你可以使用 rails_...
这个“Rails项目源代码”是一个使用Rails构建的图片分享网站的完整源代码,它揭示了如何利用Rails的强大功能来创建一个允许用户上传、分享和浏览图片的应用。 1. **Rails框架基础**: Rails的核心理念是DRY(Don't...
Cucumber是一款行为驱动开发(BDD)工具,它允许开发者、测试人员和非技术人员通过一种名为Gherkin的自然语言语法来定义软件的功能。Gherkin语句通常称为特性文件,它们描述了用户与系统交互的场景,而Cucumber则将...
此外,还有 Scaffolding 机制,可以自动生成基本的 CRUD(创建、读取、更新、删除)操作的控制器和视图。 在这个版本中,Rails 进一步提升了开发效率和代码质量,为开发者提供了强大而优雅的工具。虽然现在已经有...
5. **Rails的生成器(Generators)** Rails提供了一系列的命令行工具,如`generate`命令,可以快速创建模型、控制器、迁移等。例如,`rails generate model Book title:string author:string`将创建一个`Book`模型...
作者们通过分享自己的经验和见解,为Rails程序员提供了一本既有实际操作指导又有理论深入分析的参考书。 Ruby on Rails是一种流行的开源Web应用框架,用Ruby语言编写,遵循MVC架构模式。Rails的目的是让开发过程尽...
接着,使用Rails的生成器创建控制器、模型和视图,如`rails generate controller`或`rails generate model`。然后,配置数据库连接,编写数据库迁移(migrations)以定义数据表结构,执行`rake db:migrate`来应用...