JSP 实用程序之简易页面编辑器
需求：提供一页面，放置“帮助”、“版权”文字内容，特点：静态页面，无须读，只是应付字眼上频繁的修改；没有复杂的交互，无须 javascript；没有图片，不需要文件上传。
给出的方案：提供一页面和简易的后台管理，功能单一，只是编辑页面（只是修改字体、大小、粗体、斜体等的功能）。
实现思路：纯 jsp 展示，管理界面用 http basic 登入，通过一个 js 写成 html 编辑器修改页面内容。直接修改服务器磁盘文件。
界面如下，右图是后台编辑。
访问的 jsp 其实只有两个 /index.jsp 和 /admin/index.jsp，分别是静态页面和后台编辑页面。/admin/action.jsp 用于接收保存的 action，数据由表单 post 过来。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: 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%;
}
帮助
常见问题
power tv的资费是怎样收取的？
12元power tv手机电视包月，产品代码88888888，12元/月；省内用户省内使用配送3g/月定向流量，流量仅用于使用power tv，超过定向流量部分按标准资费收取；
power tv的资费是怎样收取的？
12元power tv手机电视包月，产品代码88888888，12元/月；省内用户省内使用配送3g/月定向流量，流量仅用于使用power tv，超过定向流量部分按标准资费收取；
power tv的资费是怎样收取的？
12元power tv手机电视包月，产品代码88888888，12元/月；省内用户省内使用配送3g/月定向流量，流量仅用于使用power tv，超过定向流量部分按标准资费收取；
power tv的资费是怎样收取的？
12元power tv手机电视包月，产品代码88888888，12元/月；省内用户省内使用配送3g/月定向流量，流量仅用于使用power tv，超过定向流量部分按标准资费收取；
power tv的资费是怎样收取的？
12元power tv手机电视包月，产品代码88888888，12元/月；省内用户省内使用配送3g/月定向流量，流量仅用于使用power tv，超过定向流量部分按标准资费收取；
power tv的资费是怎样收取的？
12元power tv手机电视包月，产品代码88888888，12元/月；省内用户省内使用配送3g/月定向流量，流量仅用于使用power tv，超过定向流量部分按标准资费收取；
power tv的资费是怎样收取的？
12元power tv手机电视包月，产品代码88888888，12元/月；省内用户省内使用配送3g/月定向流量，流量仅用于使用power tv，超过定向流量部分按标准资费收取；
这份 jsp 与一般 jsp 并无特异，只不过大家有没有留意到两段注释： 和 ——这就是我们约定的“可编辑”范围。当然，使用自定义的 html tag 也可以，只要定义了一个范围即可。一份网页，无非是 html。对于其中欲编辑的东西，我们定义一个范围指明哪些地方需要编辑，就可以了。至于为什么不让全部的页面可以编辑？是因为我们不想用户对页面其它部分进行编辑，万一修改了的关键地方造成了错误，那可不好。
好了，怎么让这个 /index.jsp 编辑呢？就是利用 java 读取磁盘的方法来做的。在这个之前，得先登录到 /admin/index.jsp。这里我们通过 http basic authorization 来做用户认证，无须数据库。如果需要修改 账号密码，打开 admin/functions.jsp，编辑头部分即可：
public static final string userid = "admin", pwd = "123123";
....
%>
不过笔者 http basic authorization 遇到了个小问题，就是弹出的对话框，不知怎么修改其中的提示文字，试过几种方法，要么不显示，要么乱码。如果知道的童鞋还请告知一二！
action.jsp 也要作认证的限制，不然等于是个可以让别人 post 任何数据到页面。
非法登录！
修改下页面，点击保存就可以修改页面了。
至于 html 如何编辑？这个答案想必大家都清楚，使用 html 可视化编辑器即可，在线的哦，而不是什么 dreamweaver、frontpage、vs web 之类啦。老人们用过的就是有 fckeditror 呀、tinymce editor，近几年好像喜欢用国产了，我就不知道了。现在这个用的是我自己写，功能比较单一的。
核心逻辑是通过下面的代码搞定的。
用户凭账号密码登入简易的后台，通过可视化编辑器即可修改页面内容，立刻修改，立刻产生效果，简单快捷——把页面开放出来允许自主编辑这样会提高效率——减少来回修改的次数。
不足之处，还请大家指出。
喎?https:>
上一篇： 很欠揍的爆笑熊孩子又来了
下一篇： springboot aop