【jQuery】简单的网页文本格式编辑器ckeditor

浏览数：38 / 时间：2015年06月09日

在《【jQuery】网页文本格式编辑器xheditor》（点击打开链接）中介绍了功能相当齐全的网页文本格式编辑器xheditor，但这款实用的xheditor，可能会有人觉得它的按钮什么的很丑，不符合现在网页的风格，其实个人认为这款编辑器的界面已经非常不错了。同时这款编辑器的很多功能，比如调颜色、加表情什么的，有时我们并不想给用户这么多功能，比如仅仅是一个评论框，但我们又不想给用户一个冰冷的多行文本框。那么，vista界面的ckeditor的standard版则是你首选。

这款编辑器的界面如下，非常符合现在流行的风格，但同时并不提供字体的类型的设置与颜色的设置，只提供外链图片与表格的增加：

技术分享

ckeditor的操作如下：

技术分享

它还有一个比xheditor的优点。就是可以自由拉伸，当然，也是可以兼容IE6的。

技术分享

下面给出一个JSP小例子说明这个东西如何放到你的网页上面。当然，同样还是表单传递的问题。

怎么完成表单之间的参数传递，就不是本文讨论的重点了。具体可以看：

asp也就是vbscript版的《【ASP】连接Access数据库的登陆系统》（点击打开链接）

aspx也就是aps.net当时候还没有写编辑记录的习惯，忘记记下来了。

jsp版的请看《【Filter】利用过滤器Filter解决post传递的编码问题与利用EL表达式简化参数传递》（点击打开链接）

php则请看《【php】基本语法与页面之间数值传递》（点击打开链接）

我都写过，都是一些很基础的东西！

一、基本准备

1、首先你要上ckeditor的官网（点击打开链接）下载这款编辑器的standard版。其Basic的功能太少，Full功能太多，但都是些没有意义的功能，这些功能编辑英文是很爽的，但是对于中文实在是蛋疼了。没有必要，而且这些功能还为黑客提供了一个注入漏洞。如果你要功能多，还是使用回xheditor，这东西对中文的支持非常不错，虽然界面丑了一点。Basic版刚刚好。

技术分享

2、在Eclipse里面新建一个JSP工程，里面的lib与web.xml保证启动正常的JSP工程就可以了。在里面新建一个ckeditor文件夹，把从网上下载的ckeditor.zip解压之后的，把里面的文件除了sample、各种.md声明文件都拷贝到JSP工程里面，如下图所示：

技术分享

二、制作过程

1、刷新一下JSP工程，目录结构如下所示。

技术分享

2、JSP工程就是一个edit.jsp用来放文本框的，request.jsp用来接传递过来的参数的，如下所示，只为了显示出来：

<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>结果</title>
</head>
<body>
	你所编辑的内容是：
	<%
		request.setCharacterEncoding("utf-8");
	%>
	<%=request.getParameter("edit")%>
	<a href="edit.jsp">返回</a>
</body>
</html>

3、对于edit.jsp也是如在《【jQuery】网页文本格式编辑器xheditor》（点击打开链接）一样，只要在引入JS头文件之后，设置表单中的textarea中的class为ckeditor就可以使用了。控制ckeditor的大小并不用像控制xheditor那样需要在class中设置参数。直接用普通的div控制就可以了。这东西能够自动适应div的。

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- 引入所需要的js -->
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<title>editor</title>
</head>
<body>
<form method="post" action="request.jsp">
<div style="width:800px;">
	<textarea name="edit"  class="ckeditor"></textarea><br />
</div>
	<input type="submit" value="提交" />
</form>
</body>
</html>

最后，还是那句话，这只是一个简单的小例子，

如果真正的放在网上配合数据库的的话。你需要考虑到注入问题，具体见在《【JavaScript】表单提交之前的前台处理检查三部曲》（点击打开链接）与《【JavaScript】某些字符不转义可以导致网页崩溃与涉及转义字符的显示方法》（点击打开链接）。同时还需要在后台处理的时候，考虑到sql注入的问题。

当然还有一个用户体验性的问题，需要离开页面之前提示未保存的内容，具体可以参考我之前的《【JavaScript】离开页面前提示》（点击打开链接）。

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

【jQuery】简单的网页文本格式编辑器ckeditor