加入收藏 | 设为首页 | 会员中心 | 我要投稿 银川站长网 (https://www.0951zz.com/)- 云通信、基础存储、云上网络、机器学习、视觉智能!
当前位置: 首页 > 站长学院 > Asp教程 > 正文

asp中的ckEditor的详细配置总结

发布时间:2023-04-29 13:22:19 所属栏目:Asp教程 来源:
导读:ckeditor的详细配置:在网上找了好久终于找到了!O(_)O哈哈~一、使用方法:1、在页面<head>中引入ckeditor核心文件ckeditor.js代码如下:<script type="text/javascript" src="ckeditor/ckeditor.js"></script>2、在使

ckeditor的详细配置:

在网上找了好久终于找到了!O(_)O哈哈~

一、使用方法:

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' ], //重做

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

]

(编辑:银川站长网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章