jsp html在线编辑器,JSP实用教程之简易页面编辑器的实现方法（附源码）

前言

实现一个简易的页面编辑器是大家在学习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 里面的配置文件，找到 节点( jsp  的才是)，加入下面最后两个 init-param 节点部分。注意是 jsp节点才可以，不是 default 节点(很相似)。

jsp

org.apache.jasper.servlet.JspServlet

fork

false

xpoweredBy

false

compilerSourceVM

1.7

compilerTargetVM

1.7

3

访问的 jsp 其实只有两个 /index.jsp 和 /admin/index.jsp，分别是静态页面和后台编辑页面。/admin/action.jsp 用于接收保存的 action，数据由表单 POST 过来。functions.jsp 就是全部的业务逻辑代码，通过 %@include file="functions.jsp"%，它不能单独给外界 url 访问。

我们先看看 /index.jsp。

帮助

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: inl