百度UEditor的简单使用,JSP页面的表单中的内容后台获取和前端配置-结合项目使用

  百度UEditor的简单使用,JSP页面的表单中的内容后台获取和前端配置-结合项目使用

工具:

Myeclipse

jdk jsp

servlet

**第一步:下载包并导入到项目中**
 在官网下载 JSP(utf-8)的包,

这里写图片描述
解压复制(或导入)到项目中并修改名字为ueditor
百度UEditor的简单使用,JSP页面的表单中的内容后台获取和前端配置-结合项目使用_第1张图片

  刚导如会报错,是由于myecplise工具的问题,直接忽略版本错误
  右键ueditor的文件夹--》Myeclipse--》Exclude From Validation

百度UEditor的简单使用,JSP页面的表单中的内容后台获取和前端配置-结合项目使用_第2张图片

将ueditor文件夹下–》jsp文件夹–》lib文件夹中的包复制到 WEB-INF–>lib文件夹中去
百度UEditor的简单使用,JSP页面的表单中的内容后台获取和前端配置-结合项目使用_第3张图片


**第二步:页面配置
引入UEditor的js包和样式包,并实例化UE**
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>


<html>
  <head>
    <base href="<%=basePath%>">

   <title>编辑器完整版实例title>

   
    <script type="text/javascript" src="./ueditor/ueditor.config.js">script>
    <script type="text/javascript" src="./ueditor/ueditor.all.js">script>

  head>

  <body>
   

  <form action="publish"method="post">
    类别: <input type="text"name="category"/><br/>
    标题:<input type="text"name="title"/><br/>

    <textarea name="content" id="myEditor">这里写你的初始化内容textarea>
        <script type="text/javascript">
            UE.getEditor('myEditor');
        script>
    <input type="submit"value="提交"/>

form>



  body>
html>

**第三步:
  ***最重要的一步***,设置ueditor的实例和配置文件的根目录,最好是在项目下的绝对位置**

百度UEditor的简单使用,JSP页面的表单中的内容后台获取和前端配置-结合项目使用_第4张图片


第四步  web.xml配置

<web-app version="3.0" 
    xmlns="http://java.sun.com/xml/ns/javaee" 
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
    http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
  <display-name>display-name> 

  <servlet>
   <servlet-name>publishservlet-name>
  <servlet-class>test.publiservlet-class>
  servlet>

  <servlet-mapping>
   <servlet-name>publishservlet-name>
  <url-pattern>/publishurl-pattern>
  servlet-mapping>

  <welcome-file-list>
    <welcome-file>index.jspwelcome-file>
  welcome-file-list>
web-app>

使用myeclipse部署,并且使用浏览器查看效果如

效果图:
  在myeclipse中预览只有这种效果,

百度UEditor的简单使用,JSP页面的表单中的内容后台获取和前端配置-结合项目使用_第5张图片

  发布后使用浏览器登陆查看效果就出来了

百度UEditor的简单使用,JSP页面的表单中的内容后台获取和前端配置-结合项目使用_第6张图片

第三步:servl处理类代码,接受前台传来的参数
为了方便就没写其他的直接就打印出来验证一下是否接收到,编码是否正确。

百度UEditor的简单使用,JSP页面的表单中的内容后台获取和前端配置-结合项目使用_第7张图片

package test;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class publi extends HttpServlet {

    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        /**
         * 因为我的MyEclipse的jsp页面将默认编码格式修改为了UTF-8 
         * 并且工作空间和项目都是使用的UTF-8的格式,所以有以下三个代码。不然传递到后台的数据是乱码
         * 
         * */
        response.setContentType("text/html");
        request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");

        //获取前台传来的参数
        System.out.println(request.getParameter("category"));
        System.out.println(request.getParameter("title"));
        System.out.println(request.getParameter("content"));
    }

    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        doGet(request, response);
    }

}
至此百度UEditor的结合JSP获取表单内容已经完成,以至于其他的功能:比如上传图片等下次再说

你可能感兴趣的:(web方向)