20120603网站设计问题解决记录

在线编辑器是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