实现一个简易的页面编辑器是大家在学习jsp的时候经常会遇到的一个需求，发现网上这方便的资料不多，所以想着自己总结下，本文详细介绍了JSP简易页面编辑器的实现方法，下面话不多说，来一起看看详细的介绍：
需求
提供一页面，放置“帮助”、“版权”文字内容，特点：静态页面，无须读数据库，只是应付字眼上频繁的修改；没有复杂的交互，无须 JavaScript；没有图片，不需要文件上传。
给出的方案：提供一页面和简易的后台管理，功能单一，只是编辑页面（只是修改字体、大小、粗体、斜体等的功能）。
实现思路：纯 JSP 展示，管理界面用 HTTP Basic 登入，通过一个 js 写成 HTML 编辑器修改页面内容。直接修改服务器磁盘文件。
界面如下，右图是后台编辑。
值得一提的是，Tomcat 7 下 JSP 默认的 Java 语法仍旧是 1.6 的。在 JSP 里面嵌入 Java 1.7 特性的代码会抛出“Resource specification not allowed here for source level below 1.7”的异常。于是需要修改 Tomcat/conf/web.xml 里面的配置文件，找到 <servlet> 节点（ <servlet-name>jsp</servlet-name> 的才是），加入下面最后两个 init-param 节点部分。注意是 <servlet-name>jsp</servlet-name> 节点才可以，不是 default 节点（很相似）。
<servlet> <servlet-name>jsp</servlet-name> <servlet-class>org.apache.jasper.servlet.JspServlet</servlet-class> <init-param> <param-name>fork</param-name> <param-value>false</param-value> </init-param> <init-param> <param-name>xpoweredBy</param-name> <param-value>false</param-value> </init-param> <init-param> <param-name>compilerSourceVM</param-name> <param-value>1.7</param-value> </init-param> <init-param> <param-name>compilerTargetVM</param-name> <param-value>1.7</param-value> </init-param> <load-on-startup>3</load-on-startup> </servlet>
访问的 jsp 其实只有两个 /index.jsp 和 /admin/index.jsp，分别是静态页面和后台编辑页面。/admin/action.jsp 用于接收保存的 action，数据由表单 POST 过来。functions.jsp 就是全部的业务逻辑代码，通过 %@include file="functions.jsp"% ，它不能单独给外界 url 访问。
我们先看看 /index.jsp。
<%@page pageEncoding="UTF-8"%> <html> <head> <title>帮助</title> <meta charset="utf-8" /> <!--宽度 320px --> <meta content="width=320,user-scalable=0,initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0" /> <style> html { font-size: 15px; } body { padding: 0; margin: 0 auto; max-width: 600px; -webkit-font-smoothing: antialiased; font-family: "Microsoft YaHei", "ff-tisa-web-pro-1", "ff-tisa-web-pro-2", "Lucida Grande", "Hiragino Sans GB", "Hiragino Sans GB W3", Arial; background-color: #ebebeb; } h1 { text-align: center; font-size: 1.5rem; letter-spacing: 2px; color: #864c24; border-bottom: #e0c494 solid 1px; padding: 2% 0; } h2 { font-size: 1rem; letter-spacing: 1px; color: #4c4c4c; padding-bottom:0; margin: 0; } p { text-align: justify; font-size: 1rem; color: #818181; margin: 1% 0; margin-top:0; } ol { padding: 0; margin: 0; } ol { } ol>li>:first-child { /* Make Firefox put the list marker inside */ /* https://bugzilla.mozilla.org/show_bug.cgi?id=36854 "if list-style-position is inside, bullet takes own line" */ display: inline; } ol>li>:first-child:after { /* Add the margin that was lost w/ display: inline */ /* Firefox 10 displays this as block */ /* Safari 5.1.2 and Chrome 17.0.963.56 don't */ content: ""; display: block; } li { padding: 5% 2%; list-style-position: inside; border-bottom: 1px solid #dddddb; } .text { color: #a8a8a8; font-size: 1rem; font-weight: bold; padding: 2%; } </style> </head> <body> <!-- Editable AREA|START --> <h1>帮助</h1> <div>常见问题</div> <ol> <li> <h2>Power TV的资费是怎样收取的？</h2> <p>12元Power TV手机电视包月，产品代码88888888，12元/月；省内用户省内使用配送3G/月定向流量，流量仅用于使用Power TV，超过定向流量部分按标准资费收取； </p> </li> <li> <h2>Power TV的资费是怎样收取的？</h2> <p>12元Power TV手机电视包月，产品代码88888888，12元/月；省内用户省内使用配送3G/月定向流量，流量仅用于使用Power TV，超过定向流量部分按标准资费收取； </p> </li> <li> <h2>Power TV的资费是怎样收取的？</h2> <p>12元Power TV手机电视包月，产品代码88888888，12元/月；省内用户省内使用配送3G/月定向流量，流量仅用于使用Power TV，超过定向流量部分按标准资费收取； </p> </li> <li> <h2>Power TV的资费是怎样收取的？</h2> <p>12元Power TV手机电视包月，产品代码88888888，12元/月；省内用户省内使用配送3G/月定向流量，流量仅用于使用Power TV，超过定向流量部分按标准资费收取； </p> </li> <li> <h2>Power TV的资费是怎样收取的？</h2> <p>12元Power TV手机电视包月，产品代码88888888，12元/月；省内用户省内使用配送3G/月定向流量，流量仅用于使用Power TV，超过定向流量部分按标准资费收取； </p> </li> <li> <h2>Power TV的资费是怎样收取的？</h2> <p>12元Power TV手机电视包月，产品代码88888888，12元/月；省内用户省内使用配送3G/月定向流量，流量仅用于使用Power TV，超过定向流量部分按标准资费收取； </p> </li> <li> <h2>Power TV的资费是怎样收取的？</h2> <p>12元Power TV手机电视包月，产品代码88888888，12元/月；省内用户省内使用配送3G/月定向流量，流量仅用于使用Power TV，超过定向流量部分按标准资费收取； </p> </li> </ol> <!-- Editable AREA|END --> </body> </html>