TinyMCE 新增本地图片上传功能

   在TinyMCE 在处理富文本时，可以通过网站的相对路径录入图片地址。这样TinyMCE 就可以正常显示图片了。其实该功能属于普通HTML富文本控件基本功能了。现有需求将TinyMCE 扩展成可直接上传本地图片而后在文本区域显示图片。

   实现思路：

        使用Ajax 进行图片上传，此上传方式可以更友好的实现TinyMCE 的图片上传扩展，

        具体方法可以参考我的上一篇 Jquery ajaxsubmit 上传图片。将Ajax上传图片集成到 TinyMCE 中，

        主要是修改TinyMCE 目录下的 tinymce\jscripts\tiny_mce\plugins 的 advimage 插件。

        了解TinyMCE的人应该知道 TinyMCE 类似 FireFox。 开发者是可以为其编写适合自己需求的插件。

        所以只要稍稍修改 advimage 这个插件即可。我们为 advimage

        目录下的image.htm 新增 jquery 图片异步提交代码：

 

  
  

   
    1 
   
    
   
   <
   
   script type
   
   =
   
   "
   
   text/javascript
   
   "
   
   >
   
   

   
    2 
   
           
   
   function
   
    AjaxUploadPic() {

   
    3 
   
              
   
   if
   
    ($(
   
   "
   
   #flUpload
   
   "
   
   ).val() 
   
   ==
   
    
   
   ""
   
   ) {

   
    4 
   
                   alert(
   
   "
   
   请选择一个图片文件，再点击上传。
   
   "
   
   );

   
    5 
   
                   
   
   return
   
   ;

   
    6 
   
               }

   
    7 
   
   

   
    8 
   
               $(
   
   '
   
   #myForm
   
   '
   
   ).ajaxSubmit({

   
    9 
   
                   beforeSubmit: 
   
   function
   
   () {

   
   10 
   
                   },

   
   11 
   
                   success: 
   
   function
   
   (html, status) {

   
   12 
   
                       
   
   var
   
    result 
   
   =
   
    html.replace(
   
   "
   
   <PRE>
   
   "
   
   , 
   
   ""
   
   );

   
   13 
   
                       result 
   
   =
   
    result.replace(
   
   "
   
   </PRE>
   
   "
   
   , 
   
   ""
   
   );

   
   14 
   
                       
   
   if
   
    (html.indexOf(
   
   "
   
   格式
   
   "
   
   ) 
   
   >
   
    
   
   0
   
   ) {

   
   15 
   
                           alert(result);

   
   16 
   
                           
   
   return
   
   ;

   
   17 
   
                       }

   
   18 
   
                       $(
   
   "
   
   #src
   
   "
   
   ).val(result);

   
   19 
   
                       ImageDialog.showPreviewImage($(
   
   "
   
   #src
   
   "
   
   ).val())

   
   20 
   
                   }

   
   21 
   
               });

   
   22 
   
   

   
   23 
   
           }

   
   24 
   
        });

   
   25 
   
       
   
   <
   
   /
   
   script>
  
  

复制代码

当然了，flUpload 这个input type="file" 需要被form html标签包住同时为该form设置好

 

method="post" enctype="multipart/form-data"  action=url 属性。

程序截图如下：