KindEditor上传图片-优快云博客

本文链接：https://blog.youkuaiyun.com/weimingjun110/article/details/38299377

本文介绍如何使用KindEditor富文本编辑器配置图文上传功能。通过具体步骤和代码示例展示了如何初始化编辑器、设置上传参数及触发上传事件，适用于需要在网页中实现丰富编辑和图片上传功能的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.定义KindEditor

var editor = KindEditor.create('textarea[name="detail"]', {
			uploadJson : '<%=basePath%>templet/editor_upload_gate/shop${shopId}',
			width : '100%',
			height : '300',
			items: [
				'undo', 'redo', '|', 'justifyleft', 'justifycenter', 'justifyright',
				'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
				'superscript', '|',
				'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
				'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|',
				'image',
				'table', 'hr', 'emoticons','|', 'clearhtml', 'selectall',  'fullscreen',
			],
			allowFlashUpload : false,
			allowMediaUpload : false,
			allowFileUpload : true,
		});

2.触发事件。

	KindEditor.ready(function(K) {
		var uploadeditor = K.editor({
			uploadJson : '<%=basePath%>templet/editor_upload_gate/shop${shopId}',
			allowFileManager : true
		});

		K('.upload').click(function() {
			var infoId = $(this).attr("id");
			uploadeditor.loadPlugin('image', function() {
				uploadeditor.plugin.imageDialog({
					showRemote : false,
					clickFn : function(url, title, width, height, border, align) {					
						$("#wjtp"+infoId+" ul").empty();
						$("#wjtp"+infoId+" ul").append("<img width=100% height=180 src='" + url +"' /><input type=hidden id='images' name='images' value='" + infoId+"@"+url +"'/></span>");
						uploadeditor.hideDialog();
					}
				});
			});
		});
	});

3.jsp代码。

<td width="33%" height="200px"><span class="sub_sp"><font
										size="4" color="black">${bhi.functionAlias }</font></span> <span
									class="sub_ip" style="width: auto;"><input type="button"
										id="${bhi.infoId}" class="upload" value="上传图片"
										style="width: 80px; height: 30px; color: #fff; background: #e57327" /></span>
									<div id="wjtp${bhi.infoId}" style="">
										<ul>
											<img width="100%" height=180 src='${bhi.functionImage }' />
										</ul>
										<div class="clearfix"></div>
									</div></td>

上面的代码实现的是动态生成多个文图片上传按钮，最后由表单统一提交