kindeditor插件的使用

最新推荐文章于 2025-07-06 12:20:01 发布

原创最新推荐文章于 2025-07-06 12:20:01 发布 · 619 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍如何在项目中集成KindEditor富文本编辑器，并实现图片上传功能。通过具体步骤和代码示例，展示了如何配置KindEditor，以及如何在前端界面引入必要的JS文件，实现编辑器的初始化和图片上传对话框的调用。

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

1.首先将下载的kindeditor插件解压到当前项目的一个文件夹中

2.接下来对jsp界面进行操作

 <!-- 页面在需要显示编辑器的位置提供textarea输入框-->          
<div class="ibox-content">
     <form class="form-horizontal" method="post" action="admin/article">
     
          <div class="form-group ">
			    <div class="col-sm-12">
			    	<textarea name="content" class="form-control" id="txt1" style="height:300px"></textarea>
			    </div>
          </div>
                 
         <div class="form-group ">
	         <label  class="col-sm-2 control-label">主图1:</label>
		     <div class="col-sm-3">
		          <input type="hidden" id="pic1" name="pic"/>
		          <img id="uppic01" src="img/upload.jpg" style="width:68px; height:57px" />
		     </div>   
         </div>  
               
     </form>
</div>      
     
     
<!-- 前端页面引入对应的js文件：     -->
<script charset="utf-8" src="kindeditor/kindeditor-all-min.js"></script>
<script charset="utf-8" src="kindeditor/lang/zh-CN.js"></script>

    <script type="text/javascript">
       //KindEditor编辑器
		     KindEditor.ready(function(K) {
                window.editor = K.create('#txt1',{   //对应文本框的id号
                	uploadJson : 'admin/fileupload' //对应的servlet路径
                });
                
       // KindEditor上传图片     
                K('#uppic01').click(function() {
					editor.loadPlugin('image', function() {
						editor.plugin.imageDialog({
							
						    uploadJson:'admin/fileupload',
							imageUrl : K('#pic1').val(),
							clickFn : function(url, title, width, height, border, align) {
								K('#pic1').val(url); //取得输入框的值                
								document.getElementById("uppic01").src=url;
								editor.hideDialog();
							}
						});
					});
				});
                
		    });
</script>

3.效果