CkEditor使用技巧

ckeditor

设置值
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、在页面中即时设置编辑器

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

CkEditor使用技巧

你可能感兴趣的:(javascript,fckeditor)