HTML 编辑器 CKEditor 的使用方法 - ckEditor 使用方法

admin
admin
admin
102157
文章
87
评论
2021年4月3日20:07:29评论49 views字数 2345阅读7分49秒阅读模式

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

  4.        CKEDITOR.replace( 'editor1' );

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

二、Ckeditor工具栏自定义设置
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. ];
  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. });
  6. CKEDITOR.replace( 'editor2',
  7. {
  8.        toolbar : 'Basic'
  9. });

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

文章来源于lcx.cc:HTML 编辑器 CKEditor 的使用方法 - ckEditor 使用方法

相关推荐: 中国黑客对比东欧 菜的不是一个档次

虽然最近几年东亚黑客对全世界公司和政府机构网络攻击的成功案例在持续增长。但对于国际互联网，来自东欧的计算机犯罪仍然显的更有威胁。 Tom Kellermann — Trend Micro(杀毒软件供应商)的副总裁，在最近的一次报告“彼得大帝对战孙子(Peter…

  • 左青龙
  • 微信扫一扫
  • weinxin
  • 右白虎
  • 微信扫一扫
  • weinxin
admin
  • 本文由 发表于 2021年4月3日20:07:29
  • 转载请保留本文链接(CN-SEC中文网:感谢原作者辛苦付出)：
                   HTML 编辑器 CKEditor 的使用方法 - ckEditor 使用方法https://cn-sec.com/archives/325632.html

发表评论

匿名网友 填写信息