CKEditor+SWFUpload實作功能較為強大的編輯器（二）---SWFUpload配置

版權聲明：本文為部落客原創文章，未經部落客允許不得轉載。 https://blog.csdn.net/qq1010885678/article/details/37516749

在前面配置完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"];來接收