CKEditor 介绍（5）

论坛元老

Rank: 8 Rank: 8

UID: 1066743

1^#

打印

字体大小: tT

look_w发表于 2018-9-19 20:06 | 只看该作者

CKEditor 介绍（5）

输入和输出在最后一个例子中，我们将演示如何为 CKEditor 提供待编辑的文档，以及如何获得用户编辑完成的文档。
在上面的示例中，我们已经看到，为 CKEditor 提供待编辑的文档非常简单。我们只需要把文档的 HTML 代码放进 <textarea> 或者 <div> 元素即可。HTML 代码中的格式也会自动为 CKEditor 所识别。参见代码清单 4 以及图 9：
清单 4 div 元素中包含 HTML 代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<html>
<head>
<script type="text/javascript" src="js/ckeditor/ckeditor.js"></script>
<script type="text/javascript">

</script>
</head>
<body onload="returnonLoad();">
<div id="editor2"><em>Sample</em> text</textarea>
</body>
</html>

图 9 带有格式的待编辑文档

为获取用户在 CKEditor 中编辑的文档，最方便做法的是使用传统的表单提交方式。在清单 5 的代码中，我们创建了一个 JSP 页面。在页面中，我们通过替换 HTML 表单中的 <textarea> 元素来创建一个编辑器实例，并将表单提交给本页面。在页面头部的 Java 代码中，我们尝试获取客户端提交的编辑文档数据，输出到命令行中并作为本次编辑器的待编辑数据。
清单 5 利用表单提交用户编辑的文档

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<%@ page buffer="none" autoFlush="true" contentType="text/html; charset=utf-8"
%><%
String text = request.getParameter("text");
if (text == null) {
text = "<em>Sample</em> text";
}
System.out.println(text);
%><html>
<head>
<script type="text/javascript" src="js/ckeditor/ckeditor.js"></script>
<script type="text/javascript">

</script>
</head>
<body onload="return onLoad();">
<form method="post" action="sample.jsp">
<textarea id="editor2" name="text"><%=text %></textarea>
<br />
<input type="submit" value="Submit" />
</form>
</body>
</html>

代码运行的结果如图 10 所示。其中，我们将单词 styles 设置了加粗、斜体和下划线。
图 10. 获取提交的数据

编辑一部分文字后，点击 Submit，我们可以从应用服务器的命令行输出中看到 CKEditor 提交的，经过格式化的 HTML 代码，参见清单 6。
清单 . 6 经格式化的 HTML 代码

1
2
3
4
5
6
7
8
9
10
11

<p>
<em>Sample</em> text</p>
<p>
Now I input another line, with fancy <u><strong><em>styles</em></strong>
</u>.</p>

<p>
<em>Sample</em> text</p>
<p>
Now I input another line, with fancy <u><strong><em>styles</em></strong>
</u>.</p>

可以看到，CKEditor 的输出数据是符合 HTML 规范的。

收藏分享评分

回复引用

订阅 TOP

返回列表