ckEditor使用方法

原帖地址

灵活的调用方式——JS代码调用：

<script type="text/javascript" src="../../ckeditor/ckeditor.js"></script> <!--此行为导入ckeditor.js文件，要注意目录是否正确。-->

<textarea cols="80" id="editor1" name="editor1" rows="10"></textarea>

<script type="text/javascript"> CKEDITOR.replace( 'editor1' ); <!--此行就是用ckeditor替换文本域textarea 这里editor1可以是文本域的id或者name--></script>

 

其实很简单，包含Ckeditor的js文件，生成textarea，然后用语句替换。js替换，可以进行更为详细的配置，下文将做详细说明。

二、Ckeditor工具栏自定义设置

在ckeditor目录下，有个Config.js

未配置的内容如下:

 

CKEDITOR.editorConfig = function( config ){// Define changes to default configuration here. For example:// config.language = 'fr';// config.uiColor = '#AADC6E';

//可以在此处进行配置，配置后调用后就能呈现相应的显示效果，详细内容如下。};

1.在Ckeditor根目录的config.js中设置：

1. config.toolbar = 'Full';
2. config.toolbar_Full =
3. [
4. ['Source','-','Save','NewPage','Preview','-','Templates'],
5. ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
6. ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
7. ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
8. '/',
9. ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
10. ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
11. ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
12. ['Link','Unlink','Anchor'],
13. ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
14. '/',
15. ['Styles','Format','Font','FontSize'],
16. ['TextColor','BGColor'],
17. ['Maximize', 'ShowBlocks','-','About']
18. ];
19.  
20. config.toolbar_Basic =
21. [
22. ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About']
23. ];

上述代码中第一行，即为设定默认工具栏的，可以改写为：

1. config.toolbar = 'Basic';

2.在用js代码调用Ckeditor时设置：

1. CKEDITOR.replace( 'editor1',
2. {
3.        toolbar :
4.        [
5.          ['Styles', 'Format'],
6.          ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', '-', 'About']
7.        ]
8. });

3.以上两种方法的综合：
在Ckeditor根目录下的config.js文件中设置好多组toolbar，如方法1示

例代码去掉第一行；调用Ckeditor时的代码如下：

1. CKEDITOR.replace( 'editor1',
2. {
3.        toolbar : 'Full'
4. });
5.  
6. CKEDITOR.replace( 'editor2',
7. {
8.        toolbar : 'Basic'
9. });

第三种方法比较灵活，可以在不同的页面中设置不同的样式的编辑器。

更详细的设置参数可以参考另一篇帖子：

 ckeditor 配置文件Config.js的一些具体配置信息

三、Ckeditor语言、字体及皮肤样式自定义
Ckeditor支持多国语言，并提供三种皮肤样式：kama、office2003和v2，可以在Ckeditor根目录下的config.js文件中进行设置：

1. config.language = 'zh-cn' ;
2. config.skin = 'office2003';

也可以在js调用Ckeditor时设置：

1. CKEDITOR.replace( 'editor1',
2. {
3.        toolbar : 'Full',
4. language : 'zh-cn',
5. skin : 'office2003'
6. });
7.  
8. CKEDITOR.replace( 'editor2',
9. {
10.        toolbar : 'Basic',
11. language : 'zh-cn';
12. skin : 'kama'
13. });

四、Ckeditor添加中文字体
1.在Ckeditor根目录下的config.js文件中添加：

1. config.font_names = '宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS';

2.在用js代码调用Ckeditor时添加：

1. CKEDITOR.replace( 'editor1',
2. {
3.        toolbar : 'Full',
4. language : 'zh-cn',
5. skin : 'office2003',
6.        config.font_names : '宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS'
7. });