`
HuNanPengdake
  • 浏览: 236293 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

CkEditor使用技巧

阅读更多
http://www.iprue.com/article/123/
http://hi.baidu.com/good_pb/blog/item/db2cac30d92ff797a9018e4b.html
CKEditor 简介
CKEditor 是一款功能强大的开源在线文本编辑器。它所见即所得的特点,使你在编辑时所看到的内容和格式,能够与发布后看到的效果完全一致。CKEditor 完全是基于 JavaScript 开发的,因此不必在客户端进行任何安装,并且兼容各大主流浏览器。CKEditor 的前身是 FCKEditor,目前,有很多公司都在使用 CKEditor 作为 Web 编辑的解决方案。

从CKEditor的官方网站(http://ckeditor.com/download) 下载的开发包解压

CKEditor 的基本使用
<script type="text/javascript" src="js/ckeditor/ckeditor.js"></script>
<textarea id="editor1" class="ckeditor">Sample Text</textarea>
此种创建方法的优点:简单! 缺点:不容易灵活设置Ckeditor的皮肤、工具栏甚至初始化时的动作事件;补救办法:通过Ckeditor根目录下的config.js去设置(适用于整个网站只调用同一种皮肤、工具栏的Ckeditor)

除了令 CKEditor 自动进行 <textarea>元素的替换外,我们也可以使用 JavaScript 代码让 CKEditor 替换特定的 <div> 以及 <textarea> 元素
<html>
  <head>
    <script type="text/javascript" src="js/ckeditor/ckeditor.js"></script>
    <script type="text/javascript">
    <!--
     functiononLoad(){
       CKEDITOR.replace("editor2");
     }
    //-->
    </script>
  </head>
  <body onload="returnonLoad(); ">
    <div id="editor2"><strong>Sample</strong> Text</div>
  </body>
</html>
CKEDITOR.replace("editor2");
CKEditor会在<body>元素中先按name来查找<div>元素或<textarea>元素为"editor2",查找不到,再按 id 来查找。
在通常的 CKEditor 应用中,用CKEDITOR.replace()传递更多的参数,来定制我们需要的编辑器。
如:
<html>
  <head>
  <script type="text/javascript" src="js/ckeditor/ckeditor.js"></script>
  <script type="text/javascript">
  <!--
  functiononLoad() {
    CKEDITOR.replace("editor2", {
    toolbar: [
      ['Bold','Italic','Underline','Strike'], ['Cut','Copy','Paste'],
      ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
      ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock']
    ]
   });
  }
  // -->
</script>
</head>
<body onload="returnonLoad();">
   <div id="editor2">Sample text</textarea>
</body>
</html>
CKEditor菜单栏配置可以参见其官网上的文:http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Toolbar。

设置编辑器皮肤、宽高
<textarea  cols="90" rows="10" id="content" name="content">ckeditor</textarea>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript">
<!--
    CKEDITOR.replace("content",
    {
          skin: "kama", width:700, height:300
    });
//-->
</script>

设置值
CKEDITOR.instances.content.setData("test"); // content 就是前面 CKEDITOR.replace 的第一个参数值
或var editor = CKEDITOR.replace("content");
editor.setData("test");

取值
alert(CKEDITOR.instances.content.getData() );// content 就是前面 CKEDITOR.replace 的第一个参数值
或var editor = CKEDITOR.replace("content");
alert(editor.getData());

插入图片
若要演示此示例,最好是放在按钮的事件处理程序中,目的是有些延迟。
CKEDITOR.instances.content.insertHtml("<img src=...>");

配置编辑器
ckeditor的配置都集中在 ckeditor/config.js 文件中,下面是一些常用的配置参数:
    config.language = 'zh-cn';// 界面语言,默认为 'en'
    config.width = 400; // 设置宽高
    config.height = 400;// 设置高度
    config.skin = 'v2';// 编辑器样式,有三种:'kama'(默认)、'office2003'、'v2'
    config.uiColor = '#FFF'; // 背景颜色

Ckeditor工具栏自定义设置
// 工具栏(基础'Basic'、全能'Full'、自定义)plugins/toolbar/plugin.js
config.toolbar = 'Full'; //注意需要双引号
config.toolbar_Full =
[
  ['Source','-','Save','NewPage','Preview','-','Templates'],
  ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
  ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
  ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
  '/',
  ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
  ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
  ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
  ['Link','Unlink','Anchor'],
  ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
  '/',
  ['Styles','Format','Font','FontSize'],
  ['TextColor','BGColor'],
  ['Maximize', 'ShowBlocks','-','About']
];
config.toolbar_Basic =
[
  ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About']
];
上述代码中第一行,即为设定默认工具栏的,可以改写为:config.toolbar = 'Basic';

也可以用js代码调用Ckeditor时设置:
CKEDITOR.replace( 'editor1',
  {
    toolbar :   
    [       
      ['Styles', 'Format'],
      ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', '-', 'About']
    ]
   });
以上两种方法的综合
CKEDITOR.replace( 'editor1',
{
     toolbar : 'Full'
});
CKEDITOR.replace( 'editor2',
{
    toolbar : 'Basic'
);

config.toolbarCanCollapse = true;//工具栏是否可以被收缩
config.toolbarLocation = 'top';//可选:bottom//工具栏的位置
config.toolbarStartupExpanded = true;//工具栏默认是否展开

config.resize_enabled = false;// 取消 "拖拽以改变尺寸"功能 plugins/resize/plugin.js
config.autoUpdateElement = true;// 当提交包含有此编辑器的表单时,是否自动更新元素内的数据

config.resize_maxHeight = 3000;//改变大小的最大高度
config.resize_maxWidth = 3000;//改变大小的最大宽度
config.resize_minHeight = 250;//改变大小的最小高度
config.resize_minWidth = 750;//改变大小的最小宽度

//设置快捷键
config.keystrokes = [
        [ CKEDITOR.CTRL + 90 /*Z*/, 'undo' ], //撤销
        [ CKEDITOR.CTRL + 89 /*Y*/, 'redo' ], //重做
        [ CKEDITOR.CTRL + CKEDITOR.SHIFT + 90 /*Z*/, 'redo' ], //
        [ CKEDITOR.CTRL + 76 /*L*/, 'link' ], //链接
        [ CKEDITOR.CTRL + 66 /*B*/, 'bold' ], //粗体
        [ CKEDITOR.CTRL + 73 /*I*/, 'italic' ], //斜体
        [ CKEDITOR.CTRL + 85 /*U*/, 'underline' ], //下划线
        [ CKEDITOR.ALT + 109 /*-*/, 'toolbarCollapse' ]
    ]
    //设置快捷键 可能与浏览器快捷键冲突 plugins/keystrokes/plugin.js.
    config.blockedKeystrokes = [
        CKEDITOR.CTRL + 66 /*B*/,
        CKEDITOR.CTRL + 73 /*I*/,
        CKEDITOR.CTRL + 85 /*U*/
    ]
  
    //设置编辑内元素的背景色的取值 plugins/colorbutton/plugin.js.
    config.colorButton_backStyle = {
        element : 'span',
        styles : { 'background-color' : '#(color)' }
    }
    //区块的前景色默认值设置 plugins/colorbutton/plugin.js
    config.colorButton_foreStyle = {
        element : 'span',
        styles : { 'color' : '#(color)' }
    };

Ckeditor语言、字体及皮肤样式自定义
Ckeditor支持多国语言,并提供三种皮肤样式:kama、office2003和v2 ,可以在Ckeditor根目录下的config.js文件中进行设置:
config.language = 'zh-cn' ;
config.skin = 'office2003';
也可以在js调用Ckeditor时设置:
CKEDITOR.replace( 'editor1',{
        toolbar : 'Full',
    language : 'zh-cn',
    skin : 'office2003'
});

config.contentsCss = './contents.css';//所需要添加的CSS文件 在此添加 可使用相对路径和网站的绝对路径
config.enterMode = CKEDITOR.ENTER_P; //回车产生的标签,可选:CKEDITOR.ENTER_BR或CKEDITOR.ENTER_DIV
config.font_defaultLabel = 'Arial';//默认的字体名 plugins/font/plugin.js


Ckeditor添加中文字体
在Ckeditor根目录下的config.js文件中添加:
config.font_names = '宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS';
在用js代码调用Ckeditor时添加:
CKEDITOR.replace( 'editor1', {
    toolbar : 'Full',
    language : 'zh-cn',
    skin : 'office2003',
    config.font_names : '宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS'
});

一些使用技巧
1、在页面中即时设置编辑器
<script type="text/javascript">
    //示例1:设置工具栏为基本工具栏,高度为70
     CKEDITOR.replace('<%=tbLink.ClientID.Replace("_","$") %>',
         { toolbar:'Basic', height:70 });
    //示例2:工具栏为自定义类型
     CKEDITOR.replace( 'editor1',
          {
              toolbar :
              [
                 //加粗     斜体,下划线     穿过线    下标字      上标字
                 ['Bold','Italic','Underline','Strike','Subscript','Superscript'],
                  //数字列表       实体列表          减小缩进  增大缩进
                 ['NumberedList','BulletedList','-','Outdent','Indent'],
                  //左对齐        居中对齐           右对齐      两端对齐
                 ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
                //超链接  取消超链接 锚点
                 ['Link','Unlink','Anchor'],
                 //图片    flash   表格     水平线          表情      特殊字符      分页符
                 ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
                '/',
                  //样式     格式     字体   字体大小
                 ['Styles','Format','Font','FontSize'],
                 //文本颜色    背景颜色
                 ['TextColor','BGColor'],
                  //全屏       显示区块
                 ['Maximize', 'ShowBlocks','-']
              ]
          }
     );
</script>


精简ckeditor
在部署到Web服务器上时,下列文件夹和文件都可以删除:
/_samples :示例文件夹;
/_source :未压缩源程序;
/lang文件夹下除 zh-cn.js、en.js 以外的文件(也可以根据需要保留其他语言文件);
根目录下的 changes.html(更新列表),install.html(安装指向),license.html(使用许可);
/skins 目录下不需要的皮肤,一般用V2(简单,朴素) ,如果只保留V2则必须在config.js中指定皮肤。
分享到:
评论

相关推荐

    ckeditor使用

    ### CKEditor 使用详解 #### 一、CKEditor 简介 CKEditor(原名 FCKeditor)是一款功能强大且广泛使用的开源富文本编辑器。...对于开发人员来说,熟练掌握 CKEditor 的使用方法和配置技巧将极大地提高工作效率。

    ckeditor4 行高插件

    开发者通常需要对源码有深入的理解,以便进行这样的适配工作,这涉及到对CKEditor框架结构、API接口以及JavaScript编程技巧的掌握。 在实际使用中,行高插件通常会提供一个下拉菜单或者工具栏按钮,用户可以通过...

    CKEditor配置好的MyEclipse实例

    CKEditor是一款功能强大的富文本编辑器,常用于网页和应用程序中的文本输入,提供丰富的格式化选项和交互功能。...对于开发者而言,理解并掌握CKEditor的配置和使用技巧,能够极大地提升项目开发效率和用户体验。

    ckeditor富文本控件

    CKEditor是一款广泛应用于网页开发中的开源富文本编辑器,它为用户提供了一种强大的方式来创建和编辑HTML内容。...同时,通过实际操作和练习,你将能够熟练掌握CKEditor的使用技巧,提升网页内容编辑的效率和质量。

    ckeditor配置(详细)

    本文将深入解析CKEditor的配置方法及常用配置参数,帮助开发者更好地掌握其使用技巧。 #### 一、CKEditor的基本使用 1. **引入CKEditor核心文件**:要在页面中使用CKEditor,首先需要在`&lt;head&gt;`标签内引入CKEditor...

    ckeditor及配置方法

    同时,通过阅读CKEditor的开发者文档和社区资源,你可以学习更多高级技巧和最佳实践。 总结,CKEditor是一个强大且灵活的富文本编辑器,通过合理的配置和API使用,可以轻松集成到你的项目中,提升用户体验。了解其...

    ckeditor的用法

    通过上述内容,我们可以看到CKEditor与CKFinder的强大功能及其在实际应用中的配置与使用技巧。无论是简单的文本编辑还是复杂的文件管理,这两款工具都能够提供优秀的解决方案,极大地提升了Web开发的工作效率。

    非常全面的CKEditor插件开发文档

    8. **调试技巧**:可以利用CKEditor的内置开发工具或浏览器的开发者工具来追踪和调试插件代码,定位问题所在。 总之,"非常全面的CKEditor插件开发文档"会涵盖上述所有内容,帮助开发者从零开始学习如何创建和优化...

    ckeditor学习笔记

    ### CKEditor 学习笔记:实现自定义按钮与图片上传功能 #### 一、简介 在Web开发过程中,富文本编辑器(Rich Text Editor)是非常常见的需求之一。...希望本篇学习笔记能帮助大家更好地理解和掌握CKEditor的使用技巧。

    ckeditor自定义插件

    在阅读提供的博文链接()时,你可以了解到更多关于CKEditor自定义插件的实战经验和技巧。博主可能分享了具体案例,包括如何创建按钮、处理事件、与其他CKEditor功能集成等。 在实际应用中,可能会遇到的挑战包括但...

    HTML文本编辑器(使用的ckeditor_3.2.1版本)

    总之,理解并掌握HTML文本编辑器的配置技巧,尤其是像CKEditor这样的高级工具,对于任何涉及网页内容编辑的工作都是必不可少的。通过正确配置,我们可以有效地将其他应用程序中的内容无缝迁移至Web平台,提升用户...

    ckeditor_sample_blog_4.rar

    综上所述,姜哥的这篇教程通过“ckeditor_sample.html”源代码实例,深入讲解了CKEditor的集成、功能扩展、事件处理和样式控制等多个方面,为开发者提供了构建高效博客平台的实用技巧。通过对这些知识点的掌握,...

    CKEditor+CKFinder实例代码

    在这个“CKEditor+CKFinder实例代码”中,我们将深入探讨这两个组件的集成与使用。 首先,CKEditor是一个开源的JavaScript组件,它提供了丰富的文本编辑功能,如字体、字号选择,段落格式化,图片和链接的插入等。...

    富文本编辑器ckeditor

    富文本编辑器CKEditor是一款广泛应用于网页开发中的高级文本编辑工具,它允许用户在网页上进行格式化文本的创建、编辑...对于初学者和专业开发者来说,掌握CKEditor的使用和开发技巧,无疑会提升网页制作的效率和质量。

    ckeditor教程

    同时,社区中也有很多开发者分享的经验和技巧,是提高使用技能的好去处。 总结,CKEditor教程涵盖了从基础操作到高级功能的全面学习,无论你是网页开发新手还是经验丰富的开发者,都能从中受益。通过学习和实践,你...

    CKeditor富文本编辑器使用技巧之添加自定义插件的方法

    本文实例讲述了CKeditor富文本编辑器使用技巧之添加自定义插件的方法。分享给大家供大家参考,具体如下: 首先就是在CKeditor的plugins目录下新建一个目录qchoice: qchoice目录下的结构如下: 然后, images中...

    MathType数学公式编辑器使用技巧

    MathType数学公式编辑器使用技巧MathType数学公式编辑器使用技巧MathType数学公式编辑器使用技巧MathType数学公式编辑器使用技巧

    ckeditor富文本

    根据描述,作者已将详细的使用过程写入这个文本文件,因此,我们应该首先阅读这个文件来理解如何在项目中集成和使用CKEditor。 CKEditor的使用通常包括以下步骤: 1. **安装**:你可以通过npm(Node.js包管理器)...

    ckeditor源文件

    3. **实践操作**:在实际项目中应用CKEditor,通过实践掌握其使用技巧。 4. **社区交流**:加入CKEditor的开发者社区,与其他开发者交流经验,获取最新资讯和解决方案。 总之,CKEditor源文件对于想要深入理解和...

    ckeditor和ckfinder

    **ckeditor和ckfinder** CKEditor和CKFinder是两个在Web开发中广泛使用的工具,它们主要用于提升网站的内容编辑和管理体验...对于开发者而言,掌握这两款工具的使用和集成技巧,将有助于提升项目质量并优化用户交互。

Global site tag (gtag.js) - Google Analytics