`

CkEditor使用技巧

 
阅读更多

转自：http://hunanpengdake.iteye.com/blog/1636632

CkEditor使用技巧

博客分类：
javascriptfckeditor 
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中指定皮肤。
分享到：
| HttpWatch使用简介
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

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

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

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

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

    Laravel5.6框架使用CKEditor5相关配置详解

    主要介绍了Laravel5.6框架使用CKEditor5相关配置,结合实例形式详细分析了Laravel5.6框架整合CKEditor5编辑器相关操作技巧与注意事项,需要的朋友可以参考下

    CKeditor4 字体颜色功能配置方法教程

    主要介绍了CKeditor4 字体颜色功能配置方法,结合图文与实例的形式分析了CKeditor4 添加字体颜色扩展功能的相关实现步骤与操作技巧,需要的朋友可以参考下

    CKEditor扩展插件：自动排版功能autoformat插件实现方法详解

    主要介绍了CKEditor扩展插件：自动排版功能autoformat插件实现方法,结合实例形式详细分析了CKEditor扩展插件实现自动排版功能的autoformat插件具体定义、配置与使用技巧,需要的朋友可以参考下

    php版本CKEditor 4和CKFinder安装及配置方法图文教程

    主要介绍了php版本CKEditor 4和CKFinder安装及配置方法,结合图文与实例形式详细分析了php安装及配置CKEditor 4和CKFinder相关实现步骤、操作技巧与注意事项,需要的朋友可以参考下

    dedecms 百度编辑器ueditor_utf8_编辑器_织梦_

    使用小技巧： 使用百度编辑器栏目设置里面的栏目内容无法保存的解决方法： 这里需要修改下在栏目内容编辑时候使用默认ckeditor就可以了： 找到文件位置：/dede/templates/catalog_edit.htm和/dede/templates/...

    UnityCms内容管理系统 v2.0.zip

    使用技巧: 配置文件: ./lib/cfg.class.php 1.数据库配置 通过修改配置文件 2.管理员帐号密码 通过修改配置文件 3.文章分类 通过修改配置文件 4.文章内容 通过后台添加. 较上一版本改进: 1.采用最新...

    UnityCms内容管理系统 2.0.zip

    使用技巧: ****************** 配置文件: ./lib/cfg.class.php 1.数据库配置 通过修改配置文件 2.管理员帐号密码 通过修改配置文件 3.文章分类 通过修改配置文件 4.文章内容 通过后台添加. *****************...

    FCKeditor.Net_2.2安全修正版

    相关安全文件参看：《在.net中使用Fckeditor》 http://cliffever.cnblogs.com/archive/2006/05/09/395134.aspx《FCKeditor 實戰技巧》//www.jb51.net/html/200609/1206.htm《asp.net下FCKeditor的安全问题》...

    史上最好传智播客就业班.net培训教程60G 不下会后悔

    .Net精品就业班课程表 : 1、.Net基础加强（10天） 核心技术课程 常用数据结构（List、Dictionary、...项目说明 总结以往所学知识，讲解《传智播客.Net面试、笔试宝典》，介绍简历、笔试、面试等所需的知识和技巧。

    JAVA上百实例源码以及开源项目

    　Java数据压缩与传输实例，可以学习一下实例化套按字、得到文件输入流、压缩输入流、文件输出流、实例化缓冲区、写入数据到文件、关闭输入流、关闭套接字关闭输出流、输出错误信息等Java编程小技巧。 Java数组倒置...

    JAVA上百实例源码以及开源项目源代码

    　Java数据压缩与传输实例，可以学习一下实例化套按字、得到文件输入流、压缩输入流、文件输出流、实例化缓冲区、写入数据到文件、关闭输入流、关闭套接字关闭输出流、输出错误信息等Java编程小技巧。 Java数组倒置...

Magicbox
Global site tag (gtag.js) - Google Analytics