CKEditor+SWFUpload实现功能较为强大的编辑器(2)

但是现在还不够,还要能够在发表文字中插入自己电脑上的图片

CKEditor自己好像有这个功能,但是实在是。。。没法说,很难用(这是听别人说的,我自己测试的时候根本就不能用。。。)


这时候就需要SWFUpload出场啦

具体介绍就不说了,百度之。

简单的说SWFUpload是一个能够实现文件无刷新上传的一个神奇的东西

SWFUpload  下载见本文第一页

下载下来之后,真正有用的东西有四个

1.swfupload.js

2.handlers.js

3.swfupload.swf

4.swfuploadbutton.swf

以上四个文件都在js文件夹下,将它们拷到项目中,还是放在js文件夹下,接着添加对两个js文件的引用(加上之前的CKEditor)

<script src="https://www.linuxidc.com/js/swfupload.js" type="text/javascript"></script> 
  <script src="https://www.linuxidc.com/js/handlers.js" type="text/javascript"></script> 
  <script src="https://www.linuxidc.com/ckeditor/ckeditor.js" type="text/javascript"></script> 

要注意路径的问题

引用完毕之后,是时候展现威力了!

在页面中添加几个必要的div

<label for="editor1"> 
                发表留言:</label> 
            <textarea cols="80" rows="10"></textarea> 

<div> 
                <div> 
                    <div> 
                        <span></span> 
                    </div> 
                    <div> 
                    </div> 
                </div> 
            </div> 

就添加在CKEditor替换的textarea的后面,这几个div都是必须的,就是将这些个div配置成无刷新上传的控件

配置的js代码如下:

//SWF---------------------------------- 
            var swfu; 
            swfu = new SWFUpload({ 
                // Backend Settings 
                upload_url: "Upload.ashx",//这里是图片上传到后台的一个接收页面 
                post_params: { 
                    "ASPSESSID": "<%=Session.SessionID %>" 
                }, 
 
                // File Upload Settings 
                file_size_limit: "2 MB",//文件大小的限制 
                file_types: "*.jpg",//类型限制 
                file_types_description: "JPG Images", 
                file_upload_limit: "0",    // Zero means unlimited 
 
                // Event Handler Settings - these functions as defined in Handlers.js 
                //  The handlers are not part of SWFUpload but are part of my website and control how 
                //  上传之后的一系列事件,可以自定义,这里的success就是自定义的,当图片上传成功之后的回调方法 
                file_queue_error_handler: fileQueueError, 
                file_dialog_complete_handler: fileDialogComplete, 
                upload_progress_handler: uploadProgress, 
                upload_error_handler: uploadError, 
                upload_success_handler: success, 
                upload_complete_handler: uploadComplete, 
 
                // 显示的按钮的相关设置 
                button_image_url: "images/XPButtonNoText_160x22.png", 
                button_placeholder_id: "spanButtonPlaceholder", 
                button_width: 160, 
                button_height: 22, 
                button_text: '插入图片(2 MB Max)', 
                button_text_style: '.button { font-family: Helvetica, Arial, sans-serif; font-size: 14pt; } .buttonSmall { font-size: 10pt; }', 
                button_text_top_padding: 1, 
                button_text_left_padding: 5, 
 
                // Flash Settings 
                flash_url: "js/swfupload.swf", // .swf文件,注意路径问题 
 
                custom_settings: { 
                    upload_target: "divFileProgressContainer"// 
                }, 
 
                // Debug Settings 
                debug: false 
            }); 
 
            //------------------------------------------------------以下为自定义的SWFupload函数 
            var data; 
            function success(file, serverData) {//自定义方法的时候需要注意,参数是固定的只有两个,其中serverData是服务器接收完图片之后返回的数据,这里我返回的是一个字符串ok+刚刚上传的图片路径,以分号隔开 
                data = serverData.split(";"); 
                if (data[0] == "ok") { 
                    var msg = oEditor.getData();//向原有的编辑器中插入刚刚的图片 
                    oEditor.setData(msg + "[img=110,90]" + data[1] + "[/img]");//图片为ubb代码 
                } 
            } 

注意js代码中中文注释的部分,这是很容易出错的地方,其中success是将用户选择的图片异步上传到服务器成功之后的回调函数,由于我在后台保存完上传的图片之后将这张图片的路径返回给前台,所以前台能够根据路径访问到这张图片
html代码<img src='https://www.linuxidc.com/图片路径'/>

对应的ubb代码为[img=20,20]图片路径[/img]

这个时候,前台已经配置完毕,我们可以再ubb编辑器中随意的插入想要的图片了

需要注意的是,使用SWFUpload异步上传的文件

在后台使用HttpPostedFile file = context.Request.Form["Filedata"];来接收

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/16835.html