1效果展示

1.1 點選圖片上傳按鈕

1.2 彈出選擇框，可以從已上傳的圖片中選擇上傳，也可以從本地上傳。

1.3選擇從圖片空間上傳，資料夾模式瀏覽所有已上傳的圖片

1.4從本地選擇圖片上傳

1.5上傳效果

1.6 上傳路徑： WebRoot/upload/image

2-1：kindeditor-4.1.10版本外掛

 2-2：jquery 1.x 版本，系統使用 1.11.3版本的jquery

3-1：在jsp頁面中引入對應的jquery 和 kindeditor，如：

<scriptlanguage="JavaScript"type="text/javascript"

src="<%=basePath%>js/jquery-1.11.3.min.js"></script>

<scriptcharset="utf-8"    src="<%=basePath%>js/kindeditor-4.1.10/kindeditor.js"></script>

<scriptcharset="utf-8"src="<%=basePath%>js/kindeditor-4.1.10/lang/zh_CN.js"></script>

3-2：建立富文字編輯器：

對id='content'的textarea 建立 富文字編輯器

3-3：對應HTML的textarea程式碼：

3-3：在表單提交過程中，為了保證在ie下能夠正常執行，使用type="submit"型別的button進行提交；考慮到需要對錶單進行“長度、非空”等驗證，在form表單提交時，新增onsubmit函式，具體如下：

A、表單

一定要加“return”，這樣 “validateValueS();”在返回false時，才會停止提交。

B、按鈕

C、驗證函式

特別需要注意的是：

function validateValueS這個函式不能放在$(document).ready(function()中，否則該函式在ie中不執行。

一、Kindeditor 圖片上傳 如何實現分析

1、選擇實現方式：php，java，asp.net等，本系統中選用java

2、修改上傳路徑

在檔案/tech/WebRoot/js/kindeditor-4.1.10/jsp/file_manager_json.jsp中

在檔案/tech/WebRoot/js/kindeditor-4.1.10/jsp/upload_json.jsp中

雖然都是jsp檔案，但是檔案中均為java程式碼。

4-1：引入js檔案程式碼

<scriptlanguage="JavaScript"type="text/javascript"

src="<%=basePath%>js/jquery-1.11.3.min.js"></script>

<scriptcharset="utf-8"    src="<%=basePath%>js/kindeditor-4.1.10/kindeditor.js"></script>

<scriptcharset="utf-8"    src="<%=basePath%>js/kindeditor-4.1.10/lang/zh_CN.js"></script>

4-2：建立富文字編輯器程式碼

<scripttype="text/javascript">

        var editor1;

        KindEditor.ready(function(K){

editor1 = K.create("textarea[id='content']",{

resizeType : 1,

                allowPreviewEmoticons: false,

                allowImageUpload:true,//允許上傳圖片

allowFileManager:true, //允許對上傳圖片進行管理

uploadJson:'<%=basePath%>js/kindeditor-4.1.10/jsp/upload_json.jsp', //上傳圖片的java程式碼，只不過放在jsp中

fileManagerJson:'<%=basePath%>js/kindeditor-4.1.10/jsp/file_manager_json.jsp',

                afterUpload: function(){this.sync();}, //圖片上傳後，將上傳內容同步到textarea中

afterBlur: function(){this.sync();},   ////失去焦點時，將上傳內容同步到textarea中

items : [

                    'fontname','fontsize', '|','forecolor', 'hilitecolor','bold', 'italic','underline',

                    'removeformat','|', 'justifyleft','justifycenter', 'justifyright','insertorderedlist',

                    'insertunorderedlist','|', 'emoticons','link','media','|','image']   

            });

        });        

 </script>

4-3：表單驗證程式碼

<scripttype="text/javascript">

function validateValueS()

    {

        if($.formValidator.pageIsValid())

        {

            return true;

        }

        return false;

    }  

 </script>

4-4：表單、按鈕程式碼

<html:formaction="lab.do?method=addLabInfo"target="_self"  styleClass="kjLabForm"method="POST"styleId="kjLabForm"onsubmit="returnvalidateValueS();">

...

<input type="submit"                                             class="ButtonHeightWidth"value="提交">

...

</html:form>