CKEditor 使用技巧

最新推荐文章于 2021-12-08 16:13:30 发布

hongfei233

最新推荐文章于 2021-12-08 16:13:30 发布

阅读量878

点赞数

分类专栏： PHP 编程工具文章标签：文本编辑 ckeditor fckeditor

PHP 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

编程工具

4 篇文章 0 订阅

订阅专栏

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会在元素中先按name来查找

元素或元素为”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(“”);

配置编辑器

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中指定皮肤。

来自：http://blog.csdn.net/ljhabc1982/article/details/6546425

hongfei233

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CKEditor 使用技巧

CKEditor 简介CKEditor 是一款功能强大的开源在线文本编辑器。它所见即所得的特点，使你在编辑时所看到的内容和格式，能够与发布后看到的效果完全一致。CKEditor 完全是基于 JavaScript 开发的，因此不必在客户端进行任何安装，并且兼容各大主流浏览器。CKEditor 的前身是 FCKEditor，目前，有很多公司都在使用 CKEditor 作为 Web 编辑的解决方案。
复制链接

扫一扫