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. });
  • 相关阅读:
    三种构建器的使用
    java class file
    JVM知识(下)
    JVM知识(上)
    初识JMM
    nginx基础配置加基础实战演示
    GitHub中webhooks的使用
    redis sentinel介绍
    redis主从复制
    【开源】.net 分布式架构之监控平台
  • 原文地址:https://www.cnblogs.com/ae6623/p/4416755.html
Copyright © 2011-2022 走看看