分享一款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

 

 

 效果如下：

 

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