jsp中ckeditor的施用实例及配置-JavaSript-爱易网页

jsp中ckeditor的施用实例及配置

日期：2014-05-16　浏览次数：20341 次

jsp中ckeditor的运用实例及配置

ckeditor是fckeditor的下一代版本，下面就来说下ckeditor的使用吧！

要使用ckeditor，当然首先就是去http://ckeditor.com/?(ckeditor网站)下载ckeditor的压缩包.

ckeditor 的官方网站是?http://ckeditor.com/?，当前使用的版本是v3.0.1。

一、使用方法：

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

<script type="text/javascript" src="ckeditor/ckeditor.js"></script>

2、在使用编辑器的地方插入HTML控件<textarea>

<textarea id="TextArea1" cols="20" rows="2" class="ckeditor"></textarea>

如果是ASP.NET环境，也可用服务器端控件<TextBox>

<asp:TextBox ID="tbContent" runat="server" TextMode="MultiLine" class="ckeditor"></asp:TextBox>

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

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

<script type="text/javascript">
    CKEDITOR.replace('TextArea1');
//如果是在ASP.NET环境下用的服务器端控件<TextBox>
    CKEDITOR.replace('tbContent');
//如果<TextBox>控件在母版页中，要这样写
    CKEDITOR.replace('<%=tbContent.ClientID.Replace("_","$") %>');
</script>
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' ], //重做
        [

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

jsp中ckeditor的施用实例及配置

相关资料更多>

推荐阅读更多>