ckeditor的简单使用

最新推荐文章于 2019-07-16 17:14:00 发布

Piedra_134

最新推荐文章于 2019-07-16 17:14:00 发布

阅读量140

点赞数

分类专栏： WEB 文章标签： ckeditor jsp

WEB 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

[size=medium]本文将介绍CKEditor和JSP的整合。他们的整合将分为五个步骤进行：

1. 下载ckeditor的全功能版：下载网址：[url]http://ckeditor.com/download[/url]
下载的版本是：Fully functional, open source editor, with source code included
2. 下载服务端的jar包：即ckeditor-java-core-3.x.y*.jar。下载网址跟上面一样但是下载的文件是CKEditor for Java (*.jar files only)。
3. 下载完成后，解压文件，然后将我们所下载的全功能版的文件直接拷到我们项目的根目录下面，对于JSP的web应用就是WEBROOT的目录下面（如果你是用MyEclipse的话）。然后就是将我们下载的ckeditor的jar包拷到我们web应用的WEB-INF/lib的目录下。（web项目的错误我搞不懂，看了下是js文件的原因，但我不知道如何修改。如果你知道解决方法，还望相告。谢谢！）
[img]http://dl.iteye.com/upload/attachment/0064/0980/d4f0309b-9db0-3561-9143-2a86f3b88cad.jpg[/img]
4. 完成上面的操作后我们可以进行编辑了。首先我们先编辑原始的JSP页面，然后在使用ckeditor替代页面中的textarea标签。
[/size]


<!DOCTYPE unspecified PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<html>
	<body>
		<form action="sample_posteddata.jsp" method="get">
		    <label for="editor1">Editor 1:</label>
                    <textarea cols="80" id="editor1" name="editor1" rows="10">/textarea>					
		    <input type="submit" value="Submit" />
		</form>
	</body>	
</html>

[size=medium]5. 编辑完单纯的JSP页面后我们需要将页面中的输入域换成我们想要的ckeditor的输入域。首先我们需要将我们的taglib加到这个JSP文件中因此需要将下面的代码添加到我们的JSP页面：[/size]

<%@ taglib uri="http://ckeditor.com" prefix="ckeditor" %>

[size=medium]
其次，我们就需要修改我们的页面了，修改很简单，只需要将下面的代码添加到我们body的结束标签前面就可以了。[/size]

<ckeditor:replace replace="editor1" basePath="/ckeditor/" />

[size=medium]其中replace 表示我们的JSP页面中需要替换的textarea的ID或者Name。
basePath 表示我们刚才放在我们web应用的根目录下面的那个ckedcitor文件的路径。如果你在JSP页面中没有设置项目的basePath，那么你这是可能就需要使用EL表达式来表示了。代码如下：[/size]

<ckeditor:replace replace="editor1" basePath="${pageContext.request.contextPath }/ckeditor/" />

[size=medium]${pageContext.request.contextPath}表示的是你项目的根目录。[/size]
[size=medium]下面是修改后的代码：[/size]

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://ckeditor.com" prefix="ckeditor" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<body>
		<form action="sample_posteddata.jsp" method="get">
			<p>
				<label for="editor1">Editor 1:</label>
				<textarea cols="80" id="editor1" name="editor1" rows="10"></textarea>
			</p>
			<p>
				<input type="submit" value="Submit" />
			</p>
		</form>
		<ckeditor:replace replace="editor1" basePath="${pageContext.request.contextPath }/ckeditor/" />
	</body>	
</html>

[size=medium]后台处理类（强调：较好的实践方式应该在servlet中处理，本文仅仅为了测试ckeditor的使用，因此直接在JSP页面中处理）[/size]

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head> 
    <title>My JSP 'sample_posteddata.jsp' starting page</title>
  </head>

  <body>
	<%
		//post方式提交
		request.setCharacterEncoding("UTF-8");

		String editor1 = request.getParameter("editor1");

		//get方式提交
		//editor1 = new String(editor1.getBytes("ISO8859-1"),"utf-8");
	%>
	<%=editor1 %>
  </body>
</html>

[size=medium]
需要说明的问题：
不过在代码中使用的提交方式是get，那么可能需要你自己来解决中文乱码问题了。
你需要在你的处理程序中来设定字符编码和页面以什么样的编码显示内容。（由于本次试验仅仅为了测试ckeditor的使用，因此直接提交到JSP中处理，比较好的做法是有servlet来处理这些逻辑和控制。）你需要在你的处理类中添加这样一句话：[/size]

	
                String editor1 = request.getParameter("editor1");
		editor1 = new String(editor1.getBytes("ISO8859-1"),"utf-8");

[size=medium]当然，如果你改用post方式提交的话，那么只需要利用request设置一下编码就可以了。
如：[/size]

request.setCharacterEncoding("UTF-8");

[size=medium]
祝你成功！

下面是操作的截图：[/size]
[img]http://dl.iteye.com/upload/attachment/0064/0978/b3e7e13a-fc34-375f-b9d3-6e2737a05745.jpg[/img]

[img]http://dl.iteye.com/upload/attachment/0064/0991/4556aba8-e0ae-3fcc-8ab3-e3df159d6655.jpg[/img]
[size=medium]
如果需要使用其他更高级的特性或者你还有其他的需求，请参考ckeditor的官方文档。
下面是这篇文章的英文全文：
[url]http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Java/Integration[/url][/size]

Piedra_134

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ckeditor的简单使用

[size=medium]本文将介绍CKEditor和JSP的整合。他们的整合将分为五个步骤进行：1. 下载ckeditor的全功能版：下载网址：[url]http://ckeditor.com/download[/url]下载的版本是：Fully functional, open source editor, with source code included2. 下载服务端的j...
复制链接

扫一扫

专栏目录