电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛

标题: CKEditor 介绍（4） [打印本页]

作者: look_w 时间: 2018-9-19 20:05 标题: CKEditor 介绍（4）

注意在清单 1 的代码中，我们并没有使用任何语句初始化这个编辑器。只是定义了一个 textarea 元素：

1	<textarea id="editor1" class="ckeditor">Sample Text</textarea>

缺省地，CKEditor 的执行代码在完整载入后，会在所在页面的 BODY 元素中寻找 CSS class 为 ckeditor 的 <textarea>HTML 元素，将其替换为完整功能的 CKEditor。这一过程中，寻找的 CSS 类名，以及是否进行这样的替换，都是可配置的。关于如何配置，则超出了本文的范围，在此不再赘述。
除了令 CKEditor 自动进行 <textarea> 元素的替换外，我们也可以使用 JavaScript 代码让 CKEditor 替换特定的 <div> 以及 <textarea> 元素。参见代码清单 2。
清单 2. 替换 div 元素

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

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

</script>
</head>
<body onload="returnonLoad(); ">
<div id="editor2"><strong>Sample</strong> Text</div>
</body>
</html>

代码清单 2 中，我们在 BODY 元素的 onload 事件中调用函数 onLoad。在函数中，语句 CKEDITOR.replace("editor2");在 BODY 中寻找 ID 为 editor2 的 <div> 元素或 <textarea> 元素并将其替换为完整功能的 CKEditor。
在通常的 CKEditor 应用中，清单 2 的代码是更加常用的。在 CKEDITOR.replace() 函数中，我们可以传递更多的参数，来定制我们需要的编辑器。作为例子，下一小节我们将演示如何定制 CKEditor 的工具栏。
通过参数定制工具栏在大多数应用场合中，我们需要更改编辑器的缺省配置，如工具栏布局、大小、样式等。通过在创建编辑器实例时，传入适当的配置参数，这些都可以实现。清单 3 的代码展示了如何通过配置参数定制 CKEditor 的工具栏。
清单 3. 定制工具栏

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

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

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

创建的编辑器实例参见图 8。
图 8. 定制工具栏后的编辑器实例

可以看到，我们裁剪了缺省的工具栏配置，提供了精简的编辑功能。我们在调用 CKEDITOR.replace() 函数时用到了 toolbar 这一配置参数，只需列举代表相应功能的一组名字，即可定制出我们所需要的菜单栏。

欢迎光临电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/)