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. });

 

 

 

你可能感兴趣的:(basic,Office,语言,button,templates,styles)