kindeditor插件的使用

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.效果