CKeditor如何實現圖片上傳功能

第一步：工具下載

本人使用的開發工具爲myeclipse10，服務器爲apache-tomcat-6.0.30

首先進入CKeditor和CKfinder官網下載所需工具包

進入CKeditor下載地址：http://ckeditor.com/download

進入CKfinder下載地址：http://ckfinder.com/download

下載成功後包爲： ckeditor_3.6.5.zip ckfinder_java_2.3.zip 這是最新版，若以後有更新，只需下載新版即可，步驟不變哦！

第二部：在myeclipse10建立項目CKeditor

右鍵單擊new一個webproject，輸入所建立的項目名CKeditor如圖所示：

第三部：將ckeditor和ckfinder整合到項目中

1、先解壓 ckeditor_3.6.5.zip ，解壓文件全部拷到webroot下面，結構如下圖所示：

修改ckeditor文件夾下的config.js文件，代碼如下：

 
{  
    // Define changes to default configuration here. For example:  
    // config.language = 'fr';  
    // config.uiColor = '#AADC6E';  
    //配置默認配置   
     config.language = 'zh-cn'; //配置語言   
     // config.uiColor = '#FFF'; //背景顏色   
     // config.width = 400; //寬度   
     // config.height = 400; //高度   
     // config.skin = 'v2'; //編輯器皮膚樣式   
     // 取消 “拖拽以改變尺寸”功能   
     // config.resize_enabled = false;   
     // 使用基礎工具欄   
     // config.toolbar = "Basic";   
     // 使用全能工具欄   
     config.toolbar = "Full";   
     //使用自定義工具欄   
     // config.toolbar =   
     // [   
     // ['Source', 'Preview', '-'],   
     // ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', ],   
     // ['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'],   
     // ['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', SpecialChar','PageBreak'],   
     // '/',   
     // ['Bold', 'Italic', 'Underline', '-', 'Subscript', 'Superscript'],   
     // ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote'],   
     // ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],   
     // ['Link', 'Unlink', 'Anchor'],   
     // '/',   
     // ['Format', 'Font', 'FontSize'],   
     // ['TextColor', 'BGColor'],   
     // ['Maximize', 'ShowBlocks', '-', 'About']   
     // ];  
     // 在 CKEditor 中集成 CKFinder，注意 ckfinder 的路徑選擇要正確。   
     config.filebrowserBrowseUrl = 'ckfinder/ckfinder.html',  
     config.filebrowserImageBrowseUrl = 'ckfinder/ckfinder.html?type=Images',  
     config.filebrowserFlashBrowseUrl = 'ckfinder/ckfinder.html?type=Flash',  
     config.filebrowserUploadUrl = 'ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Files',  
     config.filebrowserImageUploadUrl = 'ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images',  
     config.filebrowserFlashUploadUrl = 'ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash',  
     config.filebrowserWindowWidth = '1000',  
     config.filebrowserWindowHeight = '700' 
};

2、接着解壓：ckfinder_java_2.3.zip ，將ckfinder_java_2.3./ckfinder下的 CKFinderJava.war（通過微軟winrAR可以進行解壓)再次解壓，找到CKFinderJava下的ckfinder文件夾，將其拷貝到WebRoot根目錄下，目錄結構如下圖所示：

此處出現兩處錯誤：其中_samples文件夾可以直接刪除，而jquery.min.js出錯，是因爲採用了壓縮（縮小版）的jquery庫，不被識別。

解決辦法：

我們可以將jquery.min.js文件刪除，到jquery官網重新下載個完整版的，

下載地址：http://code.jquery.com/index.html

選擇jquery-1.7.1.js，右擊鏈接另存爲到你想要放置的路徑。將該文件重新命名爲jquery.min.js放到原來文件所在的位置，刷新項目，錯誤就這麼輕易的解決了！

然後整合jar包，到剛纔的war包，

將jar包全部拷貝放到項目WebRoot --> WEB-INF --> lib下

接着把配置文件：config.xml、web.xml（直接替換掉原來的web.xml即可)也拷貝到WebRoot/WEB-INF下

接着找到config.xml進行修改：

第二行的<enabled>false</enabled>換成：<enabled>true</enabled>

第四行的<baseURL>/CKFinderJava/userfiles/</baseURL> 
 
換成<baseURL>/CKeditor/userfiles/</baseURL> 
注意：此處的CKeditor是根據你的項目名定的，大小寫注意些準確，否則將會出現錯誤，記住哦。

最後：在Webroot下的index.jsp文件中<head></head>中加入

第四步：看運行結果

選擇瀏覽服務器可以看到

選擇圖像屬性，可以實現上傳，選擇flash屬性，可以上傳flv文件，特別實用。

最後：去除版本信息

打開ckfinder下面的ckfinder.js文件，查找<h4,此標籤上添加隱藏樣式style='display:none;'

當想在WebRoot下建立admin後臺管理時，如圖：

在WEB-INF下面的lib導入包如下：

此時admin文件夾下的index.jsp代碼如下：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> 
<%@ taglib uri="http://ckeditor.com" prefix="ckeditor"%>     
<%@ taglib uri="http://ckfinder.com" prefix="ckfinder"%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>首頁</title> 
 
</head> 
<body> 
    <form action="indexTo.jsp" method="post"> 
        <table style="margin-top: 30px;"> 
            <tr> 
                <td align="right"><font color="#FF0000">*</font>標題：</td> 
                <td align="left"><input type="text" name="title" id="title" size="120" maxlength="30"/></td> 
            </tr> 
            <tr>   
                <td colspan="2">&nbsp;</td> 
            </tr> 
            <tr> 
                <td align="right"><font color="#FF0000">*</font>內容：</td> 
                <td align="left"> 
                    <ckfinder:setupCKEditor editor="content" basePath="../ckfinder/" />     
                        <ckeditor:editor basePath="../ckeditor/" editor="content"  value="asasfasf" />   
                </td> 
            </tr> 
            <tr> 
                <td colspan="2"><input type="hidden" name="cid" value="1">&nbsp;</td> 
            </tr> 
            <tr> 
                <td colspan="2" align="right"> 
                    <input type="submit" value="提交" "/>&nbsp;&nbsp;  
                    <input type="button" value="返回" onclick="history.go(-1)"/> 
                </td> 
            </tr> 
        </table> 
    </form> 
</body> 
</html>

indexTo.jsp代碼如下：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> 
<%@ taglib uri="http://ckeditor.com" prefix="ckeditor"%>     
<%@ taglib uri="http://ckfinder.com" prefix="ckfinder"%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>首頁</title> 
 
</head> 
<body> 
    <form action="IndexTo.jsp" method="post"> 
        <table style="margin-top: 30px;"> 
              
            <tr> 
            <%  
                    String content = request.getParameter("content");  
            %> 
              
                <td align="right"><font color="#FF0000">*</font>內容：</td> 
                <td align="left"> 
                    <ckfinder:setupCKEditor editor="content" basePath="../ckfinder/" />     
                        <ckeditor:editor basePath="../ckeditor/" editor="content"  value="<%=content %>"/>   
                </td> 
            </tr> 
            <tr> 
                <td colspan="2"><input type="hidden" name="cid" value="1">&nbsp;</td> 
            </tr> 
            <tr> 
                <td colspan="2" align="right"> 
                    <input type="submit" value="提交" "/>&nbsp;&nbsp;  
                    <input type="button" value="返回" onclick="history.go(-1)"/> 
                </td> 
            </tr> 
        </table> 
    </form> 
</body> 
</html>

至此，大功告成，大神略過，希望能對你有點用，親！

/*  
Copyright (c) 2003-2012, CKSource - Frederico Knabben. All rights reserved.  
For licensing, see LICENSE.html or http://ckeditor.com/license  
*/ 
 
CKEDITOR.editorConfig = function( config )

CKeditor如何實現圖片上傳功能

VMware虛擬機上網絡連接（network type）的三種模式--bridged、host-only、NAT

我的友情鏈接

MyEclipse中將項目導出jar包，以及轉化成EXE文件

Java配置環境變量

myeclipse快捷鍵

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結