分享一款word风格的rails在线编辑器

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

 

 

 效果如下：

 

下面是改编辑器的压缩包，直接解压即可。

 

评论

15 楼 hellohong 2008-07-11  

gm8pleasure 写道

非常不错，支持。。

支持!

14 楼 gm8pleasure 2008-07-11  

非常不错，支持。。

13 楼 macro.son 2008-07-11  

感觉不错,支持一下~

12 楼 Acaleph 2008-07-10  

怎么不去试一下YUI RICH EDITOR？

11 楼 phoenixup 2008-07-10  

Fckeditor~~更沉重一些~~~

10 楼 jollibee 2008-07-10  

下载包里的editor.js已经是utf8，只不过，一部分文字是正确的，一部分是乱码（乱码部分好象也不是gb2321，换成gb2321还是乱码）

总体上看，还是非常不错的。

9 楼 liuqiang 2008-07-10  

jollibee 写道

1，editor.js里面有一些乱码
2，文章排版功能会导致ff3长时间不反应，在对应的方法里也有一些乱码。

                    oChild[i].innerHTML = oChild[i].innerHTML.replace(/(^[ |��|��]*)|([ |��|��]*$)/g, "");

是由于编码方式造成的，是我当时转格式时弄乱的，就干脆别管它或者直接删除，因为都是无关紧要的，主要是一些被我裁掉的功能。

说真的，在ff3下我还真没仔细侧，说真的，js跨平台这种东西真的不好说，多少有点问题，我一般的处理是在ie ff下基本够用就可以了，说远的吧，你像sohu的编辑器在ff下是报一堆错误，近的吧，你像JE的编辑器在各个平台下也有些小小的问题，但不影响正常使用就足够了。

8 楼 jollibee 2008-07-10  

1，editor.js里面有一些乱码
2，文章排版功能会导致ff3长时间不反应，在对应的方法里也有一些乱码。

                    oChild[i].innerHTML = oChild[i].innerHTML.replace(/(^[ |��|��]*)|([ |��|��]*$)/g, "");

7 楼 liuqiang 2008-07-10  

<div class='quote_title'>Raecoo 写道</div>
<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'>&lt;input type="hidden" id="topic_content" name="content"/&gt;
&lt;iframe src="/HtmlEditor/editor.html?id=topic_content" frameborder="0" scrolling="no" width="100%" height="220"&gt;&lt;/iframe&gt;</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>

6 楼 whygod 2008-07-10  

顶！
liuqiang 真是功德无量！
今天看了好几篇你的文章，很不错！！

5 楼 Raecoo 2008-07-10  

不知道提交后出错再次返回编辑器所在页时内容是否还能保留
这样的调用方式和163的那个编辑器一个样
如果修改版本能够定制Button就更好了,毕竟多数情况下用不了这么多功能

4 楼 superxielei 2008-07-09  

不错的东西..正好新项目打算用一个.不过需要个java版的.明天试试能不能主机改过来..要是改过来了,也发一个给大家共享一下.

3 楼 liuqiang 2008-07-09  

netbeans 写道

firebug 报错

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里面。

2 楼 netbeans 2008-07-09  

firebug 报错

oForm has no properties
[Break on this error] else oForm.addEventListener('submit',AttachSubmit,false);

是不是要配置什么东西。
还有下载的文件里有svn信息，还是去掉的比较好。

效果不错，等有时间做成java版的。

1 楼 liuqiang 2008-07-09  

貌似JE编辑器在编辑文章的时候，格式就乱了，我已经不太敢修改文章了。

注意在编辑文章的时候这样写:
<input type="hidden" id="xxxx name="content" value="<%=h @xxx.content %>"/>
也就是用h方法将内容里面的html先过滤下