新浪编辑器

阅读更多

在线编辑器是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. 注意这里的id不要写成content，貌似是由于命名冲突的原因  
   2.   
   3. 注意这里要把上面的隐藏域的id穿给编辑器的iframe 
   4.   
   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，貌似是由于命名冲突的原因

注意这里要把上面的隐藏域的id穿给编辑器的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 => "" 
  12.   rescue 
  13.     render :text => "" 
  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 => "" 
  25.   rescue 
  26.     render :text => "" 
  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