ckeditor 配置使用 -凯发k8网页登录

ckeditor 的官方网站是 ，我当前使用的版本是v3.0.1。

一、使用方法：

1、在页面中引入ckeditor核心文件ckeditor.js

2、在使用编辑器的地方插入html控件</font> </p> <p><font color="#999999"><textarea id="textarea1" cols="20" rows="2" class="ckeditor">

如果是asp.net环境，也可用服务器端控件

注意在控件中加上 class="ckeditor" 。

3、将相应的控件替换成编辑器代码

4、配置编辑器

    ckeditor的配置都集中在 ckeditor/config.js 文件中，下面是一些常用的配置参数：

// 界面语言，默认为 'en'

    config.language = 'zh-cn';

// 设置宽高

    config.width = 400;

    config.height = 400;

// 编辑器样式，有三种：'kama'（默认）、'office2003'、'v2'

    config.skin = 'v2';

// 背景颜色

    config.uicolor = '#fff';

// 工具栏（基础'basic'、全能'full'、自定义）plugins/toolbar/plugin.js

    config.toolbar = 'basic';

    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']
    ];

    //工具栏是否可以被收缩
    config.toolbarcancollapse = true;

    //工具栏的位置
    config.toolbarlocation = 'top';//可选：bottom

    //工具栏默认是否展开
    config.toolbarstartupexpanded = true;

// 取消 “拖拽以改变尺寸”功能 plugins/resize/plugin.js
    config.resize_enabled = false;

    //改变大小的最大高度

    config.resize_maxheight = 3000;

    //改变大小的最大宽度
    config.resize_maxwidth = 3000;

    //改变大小的最小高度
    config.resize_minheight = 250;

    //改变大小的最小宽度
    config.resize_minwidth = 750;
// 当提交包含有此编辑器的表单时，是否自动更新元素内的数据
    config.autoupdateelement = true;

// 设置是使用绝对目录还是相对目录，为空为相对目录
    config.basehref = ''

    // 编辑器的z-index值
    config.basefloatzindex = 10000;

//设置快捷键
    config.keystrokes = [
       [ ckeditor.alt 121 /*f10*/, 'toolbarfocus' ],  //获取焦点
        [ ckeditor.alt 122 /*f11*/, 'elementspathfocus' ],  //元素焦点

       [ ckeditor.shift 121 /*f10*/, 'contextmenu' ],  //文本菜单

       [ 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_colors =  '000,800000,8b4513,2f4f4f,008080,000080,4b0082,696969,b22222,a52a2a,daa520,

        006400,40e0d0,0000cd,800080,808080,f00,ff8c00,ffd700,008000,0ff,00f,ee82ee,

        a9a9a9,ffa07a,ffa500,ffff00,00ff00,afeeee,add8e6,dda0dd,d3d3d3,fff0f5,

        faebd7,ffffe0,f0fff0,f0ffff,f0f8ff,e6e6fa,fff’

    //是否在选择颜色时显示“其它颜色”选项 plugins/colorbutton/plugin.js
    config.colorbutton_enablemore = false

    //区块的前景色默认值设置 plugins/colorbutton/plugin.js
    config.colorbutton_forestyle = {
        element : 'span',
        styles : { 'color' : '#(color)' }
    };

    //所需要添加的css文件 在此添加 可使用相对路径和网站的绝对路径
    config.contentscss = './contents.css';

    //文字方向
    config.contentslangdirection = 'rtl'; //从左到右

    //ckeditor的配置文件 若不想配置 留空即可
    ckeditor.replace( 'myfiled', { customconfig : './config.js' } );

    //界面编辑框的背景色 plugins/dialog/plugin.js
    config.dialog_backgroundcovercolor = '#fffefd'; //可设置参考
    config.dialog_backgroundcovercolor = 'white' //默认

    //背景的不透明度 数值应该在：0.0～1.0 之间 plugins/dialog/plugin.js
    config.dialog_backgroundcoveropacity = 0.5

    //移动或者改变元素时 边框的吸附距离 单位：像素 plugins/dialog/plugin.js
    config.dialog_magnetdistance = 20;

    //是否拒绝本地拼写检查和提示 默认为拒绝 目前仅firefox和safari支持 plugins/wysiwygarea/plugin.js.
    config.disablenativespellchecker = true

    //进行表格编辑功能 如：添加行或列 目前仅firefox支持 plugins/wysiwygarea/plugin.js
    config.disablenativetablehandles = true; //默认为不开启

    //是否开启 图片和表格 的改变大小的功能 config.disableobjectresizing = true;
    config.disableobjectresizing = false //默认为开启

    //设置html文档类型
    config.doctype = ' ;