kindeditor编辑器

Posted 2020-12-03 dzthome

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了kindeditor编辑器相关的知识，希望对你有一定的参考价值。

0. 添加前端页面

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

String htmlData=(String)request.getAttribute("htmlData");
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title></title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <script type="text/javascript" src="<%=basePath%>/common/js/jquery-1.7.1.min.js"></script>
     <link href="<%=basePath%>liger/lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
    <link href="<%=basePath%>common/css/bgcommon.css?1.3" rel="stylesheet" type="text/css" />
    <script src="<%=basePath%>liger/lib/ligerUI/js/core/base.js" type="text/javascript"></script>
    <script src="<%=basePath%>liger/lib/ligerUI/js/ligerui.all.js" type="text/javascript"></script>
    <script src="<%=basePath%>liger/lib/ligerUI/js/plugins/ligerResizable.js" type="text/javascript"></script>
    
    <link rel="stylesheet" href="<%=basePath %>kindeditor-4.1.2/plugins/code/prettify.css?1.2" />
    <link rel="stylesheet" href="<%=basePath %>kindeditor-4.1.2/themes/default/default.css?1.2" />
    
    <script charset="utf-8" src="<%=basePath %>kindeditor-4.1.2/kindeditor.js?1.3"></script>
    <script charset="utf-8" src="<%=basePath %>kindeditor-4.1.2/lang/zh_CN.js?1.2"></script>
    <script charset="utf-8" src="<%=basePath %>kindeditor-4.1.2/plugins/code/prettify.js?1.2"></script>
    
     <link rel="stylesheet" href="<%=basePath%>/zTree_v3/css/demo.css" type="text/css">
    <link rel="stylesheet" href="<%=basePath%>/zTree_v3/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <script type="text/javascript" src="<%=basePath%>/zTree_v3/js/jquery.ztree.core-3.5.js"></script>
    
    
    <script type="text/javascript" src="<%=basePath%>/common/js/bgcommon.js"></script>
    <style type="text/css">
        .l-text-field{
           height: 20px;
           border:none;
           outline: none;
        }
        #title_ul{width: 100%;height: 30px;border-bottom: 1px solid #dbdbdb;margin-top: 10px;margin-bottom: 30px;z-index:0;}
        #title_ul li.cu_li{border-top: 1px solid red;}
        #title_ul li{display:block;height: 30px;line-height: 30px;border: 1px solid #dbdbdb;float: left;width:120px;border-bottom: none;cursor: pointer;z-index:99;}
        .add_gg{height: 30px;line-height: 30px;text-align: center;border: 1px solid #dbdbdb;width:100px;}
        
        #edit_table1 table tr td a{padding-left: 8px;cursor: pointer;}
        #edit_table1 table tr td{padding-top:12px;}
        #edit_table2 table select{width:150px;}
        
        #edit_table2 table tr td{border: 1px;}
    </style>
    <script>
    var editor1;
        KindEditor.ready(function(K) {
            editor1 = K.create(‘textarea[name="content1"]‘, {
                cssPath : ‘<%=basePath %>/kindeditor-4.1.2/plugins/code/prettify.css‘,
                uploadJson : ‘<%=basePath %>/jsp/upload_json.jsp‘,
                fileManagerJson : ‘<%=basePath %>/jsp/file_manager_json.jsp‘,
                allowFileManager : true,
                afterCreate : function() {
                    var self = this;
                    K.ctrl(document, 13, function() {
                        self.sync();
                        document.forms[‘example‘].submit();
                    });
                    K.ctrl(self.edit.doc, 13, function() {
                        self.sync();
                        document.forms[‘example‘].submit();
                    });
                }
           
            });
            prettyPrint();
        });
        
    </script>
  </head>
  
  <body>
   <div id="toolbar">
         
        
        <div style="width:99%;margin:auto;" id="edit_table">
         <form action="" id="edit_form" method="post" enctype="multipart/form-data">
         <input  value="${obj.id}" name="id" id="id" type="hidden"/>
         <table cellpadding="0" cellspacing="0" border="0" width="100%">
             
         
             <tr><td width="120" align="right">新闻详情：<font color=red>*</font></td>
                  <td align="left" width="900">
                      <textarea name="content1" id="content1" cols="100" rows="8" style="width:800px;height:500px;visibility:hidden;">
                          <%=htmlspecialchars(htmlData)%>
                      </textarea>
                    <input type="hidden" id="e_content" name="e_content">
                 </td>
             </tr>
              <tr>
              <td style="border:none">&nbsp;</td>
              <td style="padding:5px 0px 5px 5px;border:none">
                  <a href="javascript:update()" class="a_btn space blue">保&nbsp;存</a>
                &nbsp;&nbsp;<a href="javascript:location.href=‘<%=basePath%>/appNews/news_list‘;" class="a_btn space">返&nbsp;回</a>
             </td></tr>
         </table>
         </form>
      </div>

    </div>
    <div id="menuContent" class="menuContent" style="display:none; position: absolute;">
        <ul id="treeDemo2" class="ztree" style="margin-top:0; width:160px;"></ul>
    </div>
  </body>
  <script type="text/javascript">
  function check_file(e,file_type)
  {
     var str=e.value.substr(e.value.length-4,e.value.length).toLowerCase();
     if(str!=".jpg")
     {
          alert(‘文件必须为 jpg、png或gif格式！‘);
          e.value="";
          e.outerHTML=e.outerHTML; //清空
     }
  }

  
  function update()
  {
   
    var html = editor1.html();
     html = html.replace(/&/g, "%26");   
     html = html.replace(/‘/g, "%27");   
     html = html.replace(/</g, "%48");  
     html = html.replace(/>/g, "%50");  
     html = html.replace(/%/g, "%25"); 
     
     $("#e_content").val(html);
     var edit_form = document.getElementById("edit_form");   
    
    var save_url="appNews/save";
    var e_id = document.getElementById("id");   
    
    if(e_id.value!=""){
     save_url="appNews/update";
    }
    edit_form.action=save_url;
    edit_form.submit();
  }   
  </script>
</html>
<%!
private String htmlspecialchars(String str) {
    str = str.replaceAll("%25", "%");    
    str = str.replaceAll("%26", "&");
    str = str.replaceAll("%27", "‘");
    str = str.replaceAll("%48", "<");    
    str = str.replaceAll("%50", ">");
    return str;
}
%> 

<script type="text/javascript">
    function chow_div(e,num){
        $(e).siblings().removeClass(‘cu_li‘);
        $(e).addClass(‘cu_li‘);
        if(num==1){
            $(‘#edit_table‘).show();
            $(‘#edit_table1‘).hide();
            $(‘#edit_table2‘).hide();
        }else if(num==2){
            $(‘#edit_table‘).hide();
            $(‘#edit_table1‘).show();
            $(‘#edit_table2‘).hide();
        }else{
            $(‘#edit_table‘).hide();
            $(‘#edit_table1‘).hide();
            $(‘#edit_table2‘).show();
        }
    }
</script>
<script>
function test(e){
    var name=$(e).prev("input").attr("name");

    var str=‘<div style="padding-top:5px;"><span style="visibility: hidden;">规格名称：</span><input name="‘+name+‘"><a onclick="del_parent(this)">-</a></div>‘;
    $(e).parent().append(str);
}
function del_parent(e){
    $(e).parent().remove();
}
</script>
<SCRIPT type="text/javascript">
        
    
    var setting = {
        data: {
            simpleData: {
                enable: true
            }
        },
        callback: {
            
            onClick: onClick
        }
    };
    var setting2 = {
            data: {
                simpleData: {
                    enable: true
                }
            },
            callback: {
                
                onClick: onClick2
            }
        };
    function beforeClick(treeId, treeNode) {
        
        return check;
    }
    
    function onClick(e, treeId, treeNode) {
        
        getdata(treeNode.id,treeNode.getParentNode().name)
        return false;
    }
function onClick2(e, treeId, treeNode) {
        
        $("#category_id").val(treeNode.id)
        $("#parent_name").val(treeNode.name);
        hideMenu();
        return false;
    }
    
        function onBodyDown(event) {
            if (!(event.target.id == "menuBtn" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
                hideMenu();
            }
        }

    
        function check_file(e,file_type)
          {
             var i=0;
             var file_index=-1;//获取文本域下标
             var files;
            
             var str=e.value.substr(e.value.length-4,e.value.length);
             if(str!=".jpg")
             {
                    alert(‘文件格式必须为 .jpg 格式‘);
                    e.value="";
                    e.outerHTML=e.outerHTML; //清空
             }
          }
    </SCRIPT>

1.添加并保存至阿里云，后台控制器

    //添加
    @RequestMapping(value ="/save",produces="text/html;charset=UTF-8")
    public String tc_info_save( News news,String e_content, @RequestParam("myfile1") MultipartFile myfile1,
            HttpSession session, HttpServletRequest request ){        
        BGUser user=(BGUser)session.getAttribute("bguser");
        if(user==null){
            return "99";
        }
        
        String id="";
        
            //UUID uuid  =  UUID.randomUUID(); 
            id = UUID.randomUUID().toString();
            news.setId(id);
            news.setNews_img(id+".jpg");
            
            // -------aliyun上传star-------
            // endpoint以杭州为例，其它region请按实际情况填写。
            String endpoint = "xxxx";
            // 阿里云主账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM账号进行API访问或日常运维，请登录 https://ram.console.aliyun.com 创建RAM账号。
            String accessKeyId = "xxxxxx";
            String accessKeySecret ="xxxxxxx";
            // 创建OSSClient实例。
            //OSSClient ossClient = new OSSClient(endpoint, accessKeyId, accessKeySecret);
            OSSClient ossClient = new OSSClient(endpoint, "xxxxxx", "xxxxxx");
            // 上传文件流。
            InputStream inputStream=null;
            try {
                if (!myfile1.isEmpty()) {
                    
                    inputStream = myfile1.getInputStream();
                }
            } catch (FileNotFoundException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            } catch (IOException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
            String img_url="hlww/news/news_img/"+news.getNews_img();
            ossClient.putObject("hlww",img_url, inputStream);
            InputStream byteArrayInputStream=null;
            
            byteArrayInputStream = new ByteArrayInputStream(e_content.getBytes());
        
            String body_url="xxxxx/"+id+".txt";
            ossClient.putObject("hlww",body_url,byteArrayInputStream);
            // 关闭ossClient。
            ossClient.shutdown();
            // -------aliyun上传star-------
            
            try {
                inputStream.close();
                
            } catch (IOException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
            try {
                byteArrayInputStream.close();
            } catch (IOException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
            
        //设置id
        String r="-1";
        r=this.newsService.insert(news);
        System.out.println("r="+r);
        request.setAttribute("result", r);
        
        if (Integer.parseInt(r)>0) {
             MyNewThread myNewThread = new MyNewThread( news);
             myNewThread.start();

        }
        return "bg/base/news_save";
    }

2.从阿里云服务器读取后台：

    @RequestMapping(value ="/edit/{id}",produces="text/html;charset=UTF-8")
    public String tc_info_edit(@PathVariable("id") String id,Model mod,HttpServletRequest request,HttpSession session){        
        if(id==null) id="";
        if(id.equals("a1")) id="";
        Map obj=null;
        String htmlData="";
        if(!id.equals("")){
            obj=this.newsService.getMapBySql("select * from  t_news_list where id=‘"+id+"‘");
           
            String content="";
            BufferedInputStream in=null;
            try {
                URL url = new URL("https://xxx.oss-cn-shanghai.aliyuncs.com/xxx/"+id+".txt");
                in = new BufferedInputStream(url.openStream());
                
                StringBuffer out = new StringBuffer(); 
                byte[]  b = new byte[4096]; 
                for(int n;(n=in.read(b))!=-1;){ 
                  out.append(new String(b,0,n)); 
                } 
                content= out.toString(); 
            }catch (FileNotFoundException e) {
                        // TODO Auto-generated catch block
                        e.printStackTrace();    
            } catch (MalformedURLException e1) {
                // TODO Auto-generated catch block
                e1.printStackTrace();
            } catch (IOException e1) {
                // TODO Auto-generated catch block
                e1.printStackTrace();
            }
          
            
            try {
                in.close();
            } catch (IOException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
          
            ReadFile r=new ReadFile();
            //String content=r.read(file);
            htmlData = content;
        } 
        mod.addAttribute("obj",obj); 
        mod.addAttribute("htmlData",htmlData);        
        String goods_id="1";    
        return "bg/base/news_edit";
    }

3. 前端jsp显示页面

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>

<head>
<jsp:include page="../../wx/main/head.jsp"></jsp:include>
<style>
html,
body {
margin: 0px;
padding: 0px;
background-color: #efeff4;
}
.ui-login-form {
margin-top: 20px;
padding: 0px 15px;
}
.mui-btn-block {
padding: 10px 0;
}
.mui-content-padded {
margin: 25px 15px;
}
.mui-btn {
padding: 10px;
}
.link-area {
display: block;
margin-top: 25px;
text-align: center;
}
.spliter {
color: #bbb;
padding: 0px 8px;
}
.mui-input-row {
background-color: #fff !important;
}
.mui-input-row {
border-bottom: 1px solid #E2E2E2;
}
.mui-content-padded a, .mui-content-padded a:hover{
color: #f00;
}
</style>
<style type="text/css">
select {
background-color: #ffffff !important;
background-image: url("data:image/svg+xml;base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iM3B4IiB2aWV3Qm94PSIwIDAgNiAzIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA2IDMiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwb2x5Z29uIHBvaW50cz0iNS45OTIsMCAyLjk5MiwzIC0wLjAwOCwwICIvPjwvc3ZnPg==") !important;
background-repeat: no-repeat !important;
background-position: 97% center !important;
padding: 0.5rem;
font-size: 0.875rem;
border-radius: 0px;
height: 2.3125rem;
}
.mui-content{
padding:5px;
}
.mui-content p{
color:#000;
}

</style>
</head>

<body>
<div class="mui-content" style="background:#fff">
${htmlData }
</div>
</body>
</html>

以上是关于kindeditor编辑器的主要内容，如果未能解决你的问题，请参考以下文章

KindEditor编辑器的使用

编辑器kindeditor-4.1.10 自动上传图

富文本编辑器 kindeditor

怎么给kindeditor编辑器添加引用标签

KindEditor

kindeditor使用记录