關于kindeditor編輯器上傳按鈕的異步加載最關鍵的部署問題，它的上傳圖片的組件都已經封裝得很好了的，只需要監聽到頁面按鈕的點擊事件給編輯器對象傳遞一些對應的初始化參數即可顯示圖片上傳的彈窗實現異步上傳圖片的效果。下面我們就來聊一聊相關的部署細節：

1、kindeditor編輯器的圖片上傳有兩種途徑：本地圖片上傳和網絡圖片添加；

2、首先我們頁面內需要放置一個文本框用于存放圖片路徑；

view sourceprint? 1.<input type="text"?id="url"?value=""?/>

3、其次我們需要放置一個觸發彈出圖片上傳框的按鈕；

view sourceprint? 1.<input type="button"?id="image"?value="選擇圖片"?/>

4、為了我們能夠觸發按鈕彈出圖片上傳框，所以我們需要在頁面內的head內引入相關的js文件

view sourceprint? 1.<script src="../kindeditor.js"></script> 2.<script src="../lang/zh_CN.js"></script>

第一個js文件是kindeditor編輯器核心js文件，必須有；第二個是漢化包，沒有也可以，無非是英文界面和菜單不會影響操作。

5、頁面初始的時候給按鈕綁定click事件

view sourceprint? 01.KindEditor.ready(function(K) { 02.var?editor = K.editor({ 03.allowFileManager :?true?//允許圖片管理 開啟后再挑選圖片的時候可以直接從圖片空間內挑選 04.}); 05.//給按鈕添加click事件 06.K('#image').click(function() { 07.alert("你點我了!"); 08.}); 09.});

這樣當我們運行頁面后，點擊“選擇圖片”的按鈕就會彈出“你點我了!"的彈出消息提示，說明按鈕事件監聽已經ok。

6、接下來我們就是要在按鈕觸發后如何才能夠彈出框呢？我們需要調用kindeditor編輯器的一些相應的方法和給予一些初始化的參數即可：

view sourceprint? 01.K('#image').click(function() { 02.editor.loadPlugin('image',?function() { 03.//圖片彈窗的基本參數配置 04.editor.plugin.imageDialog({ 05.imageUrl : K('#url').val(),?//如果圖片路徑框內有內容直接賦值于彈出框的圖片地址文本框 06.//點擊彈窗內”確定“按鈕所執行的邏輯 07.clickFn :?function(url, title, width, height, border, align) { 08.K('#url').val(url);//獲取圖片地址 09.editor.hideDialog();?//隱藏彈窗 10.} 11.}); 12.}); 13.});

這里我們將會看到彈窗的窗體內可以進行本體圖片和網絡圖片上傳。

如果我們只允許本地圖片上傳，我們可以在初始化彈窗的是配置一個參數：

view sourceprint? 1.editor.loadPlugin('image',?function() { 2.editor.plugin.imageDialog({ 3.showRemote :?false,?//網絡圖片不開啟

為什么這里不配置開啟本地圖片上傳呢？因為默認情況下就是開啟的。如果只允許進行網絡圖片添加，那么可以配置這個參數：

view sourceprint? 1.editor.loadPlugin('image',?function() { 2.editor.plugin.imageDialog({ 3.showLocal :?false,?//不開啟本地圖片上傳

7、如何將kindeditor編輯器和單獨的圖片上傳頁面上進行分開但是配置進行同一融合呢？

這個問題其實不難，只要你了解了上面的一些配置，能夠保證兩者相互獨立即可，這里提供一個完整的示例代碼：

view sourceprint? 01.var?editor; 02.KindEditor.ready(function?(K) { 03.//這里是kindeditor編輯器的基本初始化配置 04.editor = K.create('textarea[name="content"]', { 05.resizeType: 1, 06.fullscreenMode: 0,?//是否全屏顯示 07.designMode: 1, 08.allowPreviewEmoticons:?false, 09.allowImageUpload:?true, 10.allowFileManager:?true 11.}); 12.//這里是監聽按鈕點擊事件 然后在初始化點擊按鈕彈窗上傳圖片的基本配置 13.K('#image').click(function?() { 14.editor.loadPlugin('image',?function?() { 15.editor.plugin.imageDialog({ 16.imageUrl: K('#url').val(), 17.clickFn:?function?(url, title, width, height, border, align) { 18.K('#url').val(url); 19.editor.hideDialog(); 20.} 21.}); 22.}); 23.}); 24.});

頁面配置為：

view sourceprint? 1.<p> 2.<input type="text"?id="url"?value=""?/> 3.<input type="button"?id="image"?value="選擇圖片"?/>（網絡圖片 + 本地上傳） 4.</p> 5.<!--編輯器容器--> 6.<textarea name="content"?style="width: 700px; height: 200px; "></textarea>

轉載于:https://www.cnblogs.com/moqiang02/p/4061295.html

總結

以上是生活随笔為你收集整理的kindeditor编辑器和图片上传独立分开的配置细节的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。