CKEditor+SWFUpload实现功能较为强大的编辑器（二）---SWFUpload配置

在前面配置完CKEditor之后，就可以拥有一个功能挺强大的编辑器了

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

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

这时候就需要SWFUpload出场啦

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

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

下载地址：SWFUpload

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

1.swfupload.js

2.handlers.js

3.swfupload.swf

4.swfuploadbutton.swf

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

 <script src="js/swfupload.js" type="text/javascript"></script>

    <script src="js/handlers.js" type="text/javascript"></script>

    <script src="ckeditor/ckeditor.js" type="text/javascript"></script>

要注意路径的问题

引用完毕之后，是时候展现威力了！

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

<label for="editor1">

                发表留言:</label>

            <textarea cols="80" id="editor1" name="editor1" rows="10"></textarea>

<div id="content">

                <div id="swfu_container" style="margin: 0px 10px;">

                    <div>

                        <span id="spanButtonPlaceholder"></span>

                    </div>

                    <div id="divFileProgressContainer" style="height: 75px;">

                    </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: '<span class="button"> 插入图片 <span class="buttonSmall">(2 MB Max)</span></span>',

                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='图片路径' height='20' width='20'/>

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

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

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

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

巴特西

CKEditor+SWFUpload实现功能较为强大的编辑器（二）---SWFUpload配置

最新文章

热门文章