码迷，mamicode.com
首页 > 其他好文 > 详细

kindeditor编辑器

时间：2018-07-09 15:21:29      阅读：371      评论：0      收藏：0      [点我收藏+]

标签：insert   nod   charset   lis   down   uuid   rand   enc   tno   

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编辑器

标签：insert   nod   charset   lis   down   uuid   rand   enc   tno   

原文地址：https://www.cnblogs.com/dztHome/p/9283642.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！