kindeditor中插入图片_kindeditor 插入图片-优快云博客

本文链接：https://blog.youkuaiyun.com/u013654037/article/details/44855383

本文介绍如何在项目中集成KindEditor富文本编辑器，包括下载安装包、配置实例参数及图片上传等功能实现。

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

1·首先下载kindeditor包，放在我们的项目目录下

2·目录结构：

3·创建kindeditor实例时：

KindEditor.ready(function(K) {
           editor = K.create('#editor',{
             width:'150px',
             height:'300px',
             items:[
		        'code', 'cut', 'copy', 'paste',
		        'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
		        'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
		        'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
		        'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
		        'italic', 'underline', 'lineheight', 'removeformat', '|', 'image', 'multiimage',
		        'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',
		        'anchor', 'link', 'unlink'
             ],
             /* 制定上传方法 */
             uploadJson :'${pageContext.request.contextPath}/kindeditor/jsp/upload_json.jsp',
             /* 图片管理器的路径 */
	     fileManagerJson : '${pageContext.request.contextPath}/kindeditor/jsp/file_manager_json.jsp',
	     allowFileManager : true,
           });
}

4·点击图片时：