学习内容：学习JavaWeb（Day46）

1、使用富文本编辑器simditor

1、使用富文本编辑器

（1）常见的富文本编辑器有simditor、CKEditor、tinymce、kindEditor、UEditor、xhEditor
今天学习使用simditor，需要到官网下载相关组件。
主要用到
simditor.css
jquery.min.js
module.js
hotkeys.js
uploader.js
simditor.js

（2）创建富文本编辑页面simditor.jsp

<head>
    <title>Title</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="js/simditor-2.3.28/site/assets/styles/simditor.css" />
    <!-- 导入富文本编辑器需要的组件 -->
    <script src="js/simditor-2.3.28/site/assets/scripts/jquery.min.js"></script>
    <script type="text/javascript" src="js/simditor-2.3.28/site/assets/scripts/module.js"></script>
    <script type="text/javascript" src="js/simditor-2.3.28/site/assets/scripts/hotkeys.js"></script>
    <script type="text/javascript" src="js/simditor-2.3.28/site/assets/scripts/uploader.js"></script>
    <script type="text/javascript" src="js/simditor-2.3.28/site/assets/scripts/simditor.js"></script>
</head>
<body>
    <div class = "container" >
        <form action="/simditor" method="post">
        <!-- 使用表单提交富文本编辑器的内容 -->
            <textarea id="editor" placeholder="Balabala" autofocus name = "msg"></textarea>
            <input type="submit" value="发表">
        </form>
    </div>

    <script type = "text/javascript">
        $(function(){
            var editor = new Simditor({
                textarea: $('#editor'),//选中textarea元素

                toolbar:[//设置编辑器工具栏
                   /* 'title',
                    'bold',
                    'italic',
                    'underline',
                    'strikethrough',
                    'fontScale',*/
                    'color',
                    'ol',
                    'ul',
                    'blockquote',
                    'code',
                    'table',
                    'link',
                    'image',
                    'hr',
                    'indent',
                    'outdent',
                    'alignment'
                ],
                upload:{
                    url:'/simditorupload',//设置上传文件时做处理的servlet路径
                    connectionCount: 3,//同时上传的文件数量
                    //文件上传中离开页面的提示
                    leaveConfirm: 'Uploading is in progress, are you sure to leave this page?'
                },
                //允许粘贴图片
                pasteImage:true
            });
        });
    </script>
</body>

表单提交到SimditorServelet.java

@WebServlet(urlPatterns = "/simditor")
public class SimditorServlet extends HttpServlet {
    
    @Override   //将编辑器内容存入数据库后转到get方法
    protected void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
        SimditorService simditorService = new SimditorService();
        List<Msg> msgList = simditorService.findAll(); //从数据库查出所有存入的信息
        request.setAttribute("msgList",msgList); //转发到simditorList.jsp页面
        request.getRequestDispatcher("simditorList.jsp").forward(request,response);
    }

    @Override   //表单通过post提交
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("UTF-8");
        String msg = request.getParameter("msg");//获取编辑器内容
        SimditorService simditorService = new SimditorService();
        Msg m = new Msg();
        m.setMsg(msg);
        simditorService.save(m);//将编辑器内容存入数据库
        response.sendRedirect("/simditor");//重定向到simditor，转到get方法
    }
}

创建simditorList.jsp页面，用来展示提交的信息

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
</head>
<body>
<table class="table table-striped">
    <thead>
    <tr>
        <th>ID</th>
        <th>内容</th>
    </tr>
    </thead>
    
    <tbody>
    <c:forEach items="${msgList}" var="msg">
        <tr>
            <td>${msg.id}</td>
            <td>${msg.msg}</td>
        </tr>
    </c:forEach>
    </tbody>
</table>
</body>
</html>

创建SimditorUploadServlet.java，实现文件上传功能

@WebServlet("/simditorupload")
public class SimditorUploadServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        UploadUtil uploadUtil = new UploadUtil();//使用之前学习创建的文件上传工具类
        try {
            //返回一个Map对象，存入键success和imgName
            Map<String,Object> result = uploadUtil.upload(request);
            boolean success = (boolean) result.get("success");
            if(success){
                String imgName = (String) result.get("imgName");
                Map<String,Object> msg = new HashMap<>();
                msg.put("success",true);
                //将查看服务器中的文件的路径存入Map集合
                msg.put("file_path","http://localhost:8080/img/show?img="+imgName);
		//信息以json数据格式刷出，发送回前端
                ObjectMapper mapper = new ObjectMapper();
                response.setContentType("application/json;charset=utf-8");
                PrintWriter out = response.getWriter();

                String jsonMsg = mapper.writeValueAsString(msg);
                out.print(jsonMsg);
                out.flush();
                out.close();
            }
        } catch (FileUploadException e) {
            e.printStackTrace();
        }
    }
}

simditorList.jsp页面展示信息时通过ShowFileServlet.java查看图片

@WebServlet("/img/show")
public class ShowFileServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String dir = DirectoryUtil.FILE_DIR;//用到之前学习创建的获取目录工具类
        String img = request.getParameter("img");//获取参数img，即文件名
        File file = new File(dir + img);//拼出图片的url
        InputStream is = new FileInputStream(file);//通过输入输出流查看图片
        OutputStream outputStream = response.getOutputStream();

        int len = -1;
        while((len = is.read()) != -1){
            outputStream.write(len);
        }
        is.close();
        outputStream.close();
    }
}