- 浏览: 74361 次
- 性别:
- 来自: 地球
最近访客 更多访客>>
文章分类
最新评论
-
zhou1986lin:
[flash=200,200][b]引用[size=x-sma ...
新浪编辑器 -
vb2005xu:
晕 想不出来 为什么要实现 什么什么语言的 版本的好处
不都是 ...
新浪编辑器 -
minma_yuyang:
还不错,借鉴了。
Code style -
天机老人:
谢谢啊,这文章不错!
Sphinx -
suncanoe:
<iframe id="myEditor&qu ...
新浪编辑器
在线编辑器是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中写:
Ruby代码 复制代码
1. <span style="color: rgb(255, 0, 0);"> 注意这里的id不要写成content,貌似是由于命名冲突的原因</span>
2. <input type="hidden" id="content1" name="content" value=""></input>
3. <span style="color: rgb(255, 0, 0);">注意这里要把上面的隐藏域的id穿给编辑器的iframe</span>
4. <iframe id="myEditor" src="/editor/editor.htm?id=content1" frameborder="0" scrolling="no" width="550" height="220"></iframe>
5.
6. 再附上一段js校验编辑器内容不为空的代码
7. var content = myEditor.getHTML().replace(/<.*?>/g,"").split(" ").join("").split(" ").join("");
8. if(content.length==0){
9. alert('公告内容不能为空!');
10. return false;
11. }
注意这里的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。代码附上:
Ruby代码 复制代码
1. class Front::EditorsController < ApplicationController
2. skip_before_filter :verify_authenticity_token
3. # 上传图片
4. def upload_editor_image
5. file = params[:imgfile]
6. filename = params[:imgfile].original_filename.split('.').reverse
7. filename = Time.now.strftime("%Y%m%d%H%M%S") + rand(10000).to_s + "." + filename[0]
8. File.open("#{File.expand_path(RAILS_ROOT)}/public/upload/editor_image/#{filename}", "wb") do |f|
9. f.write(file.read)
10. end
11. render :text => "<script>window.parent.LoadIMG('/upload/editor_image/#{filename}')</script>"
12. rescue
13. render :text => "<script>window.parent.alert('您上传的图片无效或者损坏!');window.parent.divProcessing.style.display='none'; </script>"
14. end
15.
16. # 上传附件
17. def upload_editor_attach
18. file = params[:attach]
19. filename = params[:attach].original_filename.split('.').reverse
20. filename = Time.now.strftime("%Y%m%d%H%M%S") + rand(10000).to_s + "." + filename[0]
21. File.open("#{File.expand_path(RAILS_ROOT)}/public/upload/editor_attach/#{filename}", "wb") do |f|
22. f.write(file.read)
23. end
24. render :text => "<script>window.parent.LoadAttach('/upload/editor_attach/#{filename}')</script>"
25. rescue
26. render :text => "<script>window.parent.alert('您上传的附件无效或者损坏!');window.parent.divProcessing.style.display='none'; </script>"
27. end
28.
29. def download_attach
30. send_file params[:path]
31. rescue
32. render :text => "对不起,改附件已经损坏,无法下载!"
33. end
34. end
http://www.iteye.com/topics/download/dbb6e76b-a210-35ce-b056-28f9ea0f0d2d
* editor.rar (345.2 KB)
* 描述: 这里是压缩包!
* 下载次数: 1538
* HtmlEditor.rar (17.5 KB) http://www.iteye.com/topics/download/7dc976bb-d288-3a7b-9c93-76464e22eb8e
* 描述: 文件附上,都别装了,大家都来showshow吧!
* 下载次数: 387
1 尽管FCk的配置使用已经很方便了,但仍然有不少需要汉化和定制的地方。
2 这个东西显的有稍稍有点大,为了性能,我还期望让它再小一点。
3 这是个不是理由的理由:用户感到单调了,为什么我们的系统里面的编辑器都是一个模样,我们需要点新口味。
我首先的想法就是改改FCk,旧米做新饭,可是我发现修改FCK不是件容易的事,并且把FCK修改成另外一种风格和结构更难,后来转念一想,反正里外都是改,我何不找另外一款编辑器做做文章,之前在51js混的时候听说新浪的编辑器做的不错,于是load下来看看,豁豁豁……,这不就是word吗?太酷了,我有了马上就使用它的冲动,但是打开源码一看是个asp版本的,并且转为utf8后,注释也成了乱码,好在它的js代码可读性还算比较好,于是我开始着手做两件事,1是裁掉一些功能 2是把它转为rails版本的。经过一段时间的修改和维护这个东东算是稳定下来了,使用和效果如下:
将editor文件夹放在public下,在需要用编辑器的的form中写:
Ruby代码 复制代码
1. <span style="color: rgb(255, 0, 0);"> 注意这里的id不要写成content,貌似是由于命名冲突的原因</span>
2. <input type="hidden" id="content1" name="content" value=""></input>
3. <span style="color: rgb(255, 0, 0);">注意这里要把上面的隐藏域的id穿给编辑器的iframe</span>
4. <iframe id="myEditor" src="/editor/editor.htm?id=content1" frameborder="0" scrolling="no" width="550" height="220"></iframe>
5.
6. 再附上一段js校验编辑器内容不为空的代码
7. var content = myEditor.getHTML().replace(/<.*?>/g,"").split(" ").join("").split(" ").join("");
8. if(content.length==0){
9. alert('公告内容不能为空!');
10. return false;
11. }
注意这里的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。代码附上:
Ruby代码 复制代码
1. class Front::EditorsController < ApplicationController
2. skip_before_filter :verify_authenticity_token
3. # 上传图片
4. def upload_editor_image
5. file = params[:imgfile]
6. filename = params[:imgfile].original_filename.split('.').reverse
7. filename = Time.now.strftime("%Y%m%d%H%M%S") + rand(10000).to_s + "." + filename[0]
8. File.open("#{File.expand_path(RAILS_ROOT)}/public/upload/editor_image/#{filename}", "wb") do |f|
9. f.write(file.read)
10. end
11. render :text => "<script>window.parent.LoadIMG('/upload/editor_image/#{filename}')</script>"
12. rescue
13. render :text => "<script>window.parent.alert('您上传的图片无效或者损坏!');window.parent.divProcessing.style.display='none'; </script>"
14. end
15.
16. # 上传附件
17. def upload_editor_attach
18. file = params[:attach]
19. filename = params[:attach].original_filename.split('.').reverse
20. filename = Time.now.strftime("%Y%m%d%H%M%S") + rand(10000).to_s + "." + filename[0]
21. File.open("#{File.expand_path(RAILS_ROOT)}/public/upload/editor_attach/#{filename}", "wb") do |f|
22. f.write(file.read)
23. end
24. render :text => "<script>window.parent.LoadAttach('/upload/editor_attach/#{filename}')</script>"
25. rescue
26. render :text => "<script>window.parent.alert('您上传的附件无效或者损坏!');window.parent.divProcessing.style.display='none'; </script>"
27. end
28.
29. def download_attach
30. send_file params[:path]
31. rescue
32. render :text => "对不起,改附件已经损坏,无法下载!"
33. end
34. end
http://www.iteye.com/topics/download/dbb6e76b-a210-35ce-b056-28f9ea0f0d2d
* editor.rar (345.2 KB)
* 描述: 这里是压缩包!
* 下载次数: 1538
* HtmlEditor.rar (17.5 KB) http://www.iteye.com/topics/download/7dc976bb-d288-3a7b-9c93-76464e22eb8e
* 描述: 文件附上,都别装了,大家都来showshow吧!
* 下载次数: 387
评论
3 楼
zhou1986lin
2009-11-09
[flash=200,200][b]
[/b]
引用
[size=x-small][/size][color=yellow][/color][*]
隐隐约约隐隐约约应用于有 |
引用
[u][/u][img][/img][url][/url][/flash]
2 楼
vb2005xu
2009-09-16
晕 想不出来 为什么要实现 什么什么语言的 版本的好处
不都是 html+js么? 至于上传图片 截个url进去啊
不都是 html+js么? 至于上传图片 截个url进去啊
1 楼
suncanoe
2008-11-14
<iframe id="myEditor" src="/editor/editor.htm?id=content1" frameborder="0" scrolling="no" width="550" height="220"></iframe>
我修改了里面的width属性,想把宽度增大,但是好像没有什么效果
我修改了里面的width属性,想把宽度增大,但是好像没有什么效果
发表评论
-
架起自己的blog, 以后我的博客将更新至 http://kunlunblogs.herokuapp.com
2010-03-09 12:11 807博客辗转几个地方, 最终还是去heroku吧 http://k ... -
检查并显示mobile页面
2010-03-05 13:39 745根据user_agent判断是否是手机设备 reque ... -
给任务传递参数
2010-03-05 10:45 854desc 'For test params' task ... -
扩展paperclip 增加watermark
2010-03-05 01:46 12261. /lib/paperclip processors ad ... -
rails read digital photo
2010-03-05 01:28 8471 gem install exifr 2 $ irb -r ... -
rails' cron rufus-scheduler
2010-03-04 15:49 12251 installation sudo gem inst ... -
searchlogic
2010-03-03 14:57 774This plugin help searching. you ... -
capistrano配置
2010-03-02 16:21 1402服务器文件结构 mya ... -
passenger 工具查看内存状态
2010-03-02 15:59 9831. inspect Phusion Passenger’s ... -
passenger apache 设定
2010-03-02 15:56 937sudo vim /etc/apache2/httpd.con ... -
rails plugin-- auto_migrations
2010-03-02 12:09 771一般我们更改表结构的时候,数据会自动清空,挺麻烦的。auto_ ... -
a question
2010-01-28 20:10 790目前,经理想知道从A地址(例如10.1.3.1)到B地址(例如 ... -
在日志中过滤password
2010-01-28 14:00 796在user controller中加入 filter_para ... -
radiantcms
2009-12-02 17:33 704http://radiantcms.org/overview/ ... -
file copy
2009-06-23 14:39 829require 'ftools' namespace :ae ... -
copy files from original dir to other dir
2009-06-23 14:35 703namespace :ae do desc &quo ... -
ActionMailer 发送 email
2009-05-19 18:57 876配置 environment -- development.r ... -
Ruby rake file
2009-05-14 15:20 834task :import_projects => :en ... -
Mini_magick
2009-05-14 13:18 1275MiniMagick中Image对象有一个shave方法,正好 ... -
匹配所有路由
2009-05-14 11:57 591*path hehe
相关推荐
好用的新浪编辑器 简洁、大方 包含php和asp两个版本
最新的新浪编辑器,NetBox.exe用于快速建立实例站点,经nod32查杀无毒,请放心。
网易qq 新浪编辑器 js 版的 网易qq 新浪编辑器 js 版的
新浪编辑器、透明背景、效果比较好、感觉非常好用啊!欢迎大家下载!
javascript入门全集 + 新浪编辑器
新浪编辑器,HTML编辑器,PHP编辑器,网页编辑器, 一款很好的编辑器,FCK太大而且性能很差,
这是本人根据下载的新浪编辑器改编的,我发现下载的新浪编辑器用在asp.net的website版(webapplication版可以直接用网上下载的)时,传图片上去不能显示,所以本人将其修改好了,两种版本都封装好了!
很好用的编辑器,特别推荐新浪编辑器,方便、简洁、易懂,用最少的代码实现最多的功能。希望对学.Net的人有帮助。
从新浪提取的编辑器,大家可以测试下 调用: ...
一款非常好用的新浪在线编辑器,支持图片上传功能,体积小功能强
新浪编辑器,不晓得可有人发过!有就算了啊
新浪在线编辑器php版本新浪在线编辑器php版
新浪编辑器上传用的风声2。11,还不错,共享出来给大家下载
新浪编辑器SinaEditor应该算是最贴近网友体验的编辑器,简洁、大方,并且使用方便、功能强大。
新浪htmlteditor在线编辑器完美JSP版 支持全中文名称,由smartupload组件上传文件,可完美上传预览图片。放在根目录下可以直接运行。支持按年月自动创建上传目录,支持缩略图显示。 运行环境TOMCAT1.6下通过。 ...
兼顾新浪编辑器和kindeditor编辑的图片上传整合 测试地址:edit/edit/editor.php 上传类:upload_cgi/upload.php 在线演示地址:http://www.ykisp.com/pliuy/user/editor.php
经过一两天的改造后的版本,还不错,自己也在用这个
新浪 html在线编辑器 本地上传图片和文件,方便快捷,做为后台编辑器在适合不过了
源代码 博文链接:https://niu174420064.iteye.com/blog/551964