KindEditor瀏覽圖片空間返回圖片路徑給文本框并展示圖片

2016-5-3 16:6:49 | 作者：老鐵SEO | 0個評論 | 人瀏覽

在我們使用編輯器的時候經常會想讓編輯器里上傳的某張圖片設定為文章的形象圖，這時我們可以用到單獨的“瀏覽服務器”這個按鈕功能。

以下是KindEditor 4.1.11的示例代碼：

形象圖：<input id="pic" name="pic" type="text" />
<div id="picshow"><img src="images/nopic.gif" width='150' height='95' /></div>

<link rel="stylesheet" href="kindeditor/themes/default/default.css" />
<script charset="utf-8" src="kindeditor/kindeditor-all.js"></script>
<script charset="utf-8" src="kindeditor/lang/zh-CN.js"></script>
<script>
	KindEditor.ready(function(K) {
		var editor = K.editor({
			fileManagerJson : 'kindeditor/asp/file_manager_json.asp' //設置瀏覽服務器文件URL
		});
		K('#browsebtn').click(function() {
			editor.loadPlugin('filemanager', function() {
				editor.plugin.filemanagerDialog({
					viewType : 'VIEW',
					dirName : 'image',
					clickFn : function(url, title) {
						K("#pic").val(url); //給文本框賦值
						K("#picshow").html("<img src='" + url + "' width='150' height='95' />"); //更新圖片預覽區HTML代碼
						editor.hideDialog();
					}
				});
			});
		});
	});
</script>
<input type="button" id="browsebtn" value="瀏覽圖片空間" />

本文來自: 老鐵博客，轉載請保留出處！歡迎發表您的評論

相關標簽：KindEditor  編輯器  JS特效  

相關推薦

• kindeditor上傳圖片后自動縮放尺寸2016-11-23 12:58:23
• kindeditor上傳圖片，默認顯示本地上傳2016-9-23 12:37:30
• kindeditor隱藏上傳圖片框網絡圖片或本地上傳的功能2016-9-22 15:33:54
• JS獲取指定A標簽的鏈接地址url的頂級域名和當前域名2016-9-20 10:49:24
• JS獲取三種CSS樣式的方法2016-9-20 10:45:6
• JS飄浮廣告代碼（兼容多瀏覽器）2016-9-7 13:17:30
• JS確認對話框confirm()用法總結（常用于彈出確定、取消刪除）2016-9-1 10:9:57
• JS跳轉頁面方法總結2016-8-30 14:59:0
• JS后退、前進、返回上一頁并刷新代碼2016-8-30 14:22:18
• JS提交表單方法總結2016-8-29 15:59:56