百度富文本编辑器的使用

富文本编辑器的使用

1.百度富文本编辑器的下载地址

通过此链接https://ueditor.baidu.com/website/download.html进入下载

如下图所示

百度富文本编辑器的使用_第1张图片

2.新建一个javaweb项目

把下载好的百度富文本编辑器拷贝到项目中

百度富文本编辑器的使用_第2张图片

新建一个index.jsp页面 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>




富文本编辑器





    


        
UJeditorServlet1" method="post">
            

完整的富文本编辑器的使用


            
            
        

    

    

新建一个servlet

 

package Servlet;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class Editor
 */
public class UJeditorServlet1 extends HttpServlet {
    private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public UJeditorServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("UTF-8");
        response.setCharacterEncoding("UTF-8");
        String content = request.getParameter("editorValue");
        if(content != null) {
            request.setAttribute("content",content);
            request.getRequestDispatcher("content.jsp").forward(request, response);
        }else {
            response.getWriter().append("内容为空");
        }
    }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        doGet(request, response);
    }

}
 

 

表单form中的action中的路径和servlet中地址保持一致

百度富文本编辑器的使用_第3张图片 

然后在新建一个content.jsp页面接受上传的数据

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>




Insert title here



    <%
        out.print(request.getRealPath(""));
    %>
    

${content}


 

完成以上步骤上传图片不能正常显示 ,需要对以下文件进行配置

百度富文本编辑器的使用_第4张图片显示效果如下:

百度富文本编辑器的使用_第5张图片.

 

你可能感兴趣的:(javaWeb,编辑器)