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"];来接收