zoukankan      html  css  js  c++  java
  • 【转】ckEditor使用方法 转帖

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

    1. <script type="text/javascript" src="../../ckeditor/ckeditor.js"></script>
    2. <textarea cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;Ckeditor的初始化内容,作为textarea的value值. You are using &lt;a href="http://www.kxss.net/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
    3. <script type="text/javascript">
    4.        CKEDITOR.replace( 'editor1' );
    5. </script>

    其实很简单,包含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. ];
    19. config.toolbar_Basic =
    20. [
    21. ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About']
    22. ];

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

    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. CKEDITOR.replace( 'editor2',
    6. {
    7.        toolbar : 'Basic'
    8. });

    三、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. CKEDITOR.replace( 'editor2',
    8. {
    9.        toolbar : 'Basic',
    10. language : 'zh-cn';
    11. skin : 'kama'
    12. });

    四、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. });
  • 相关阅读:
    1010每次备份我的MySQL数据库
    1008win7与虚拟机中的linux共享文件的(详细)方法
    0930MySQL中实现高性能高并发计数器方案(例如文章点击数)
    0929shell操作mysql
    0929mysql前缀索引如何找到合适的位数
    0929mysql 用户管理和权限设置
    学习笔记之机器学习实战 (Machine Learning in Action)
    学习笔记之Python for Data Analysis
    学习笔记之入行数据科学,这些书一定要看
    面试总结之Python
  • 原文地址:https://www.cnblogs.com/ae6623/p/4416755.html
Copyright © 2011-2022 走看看