1、在页面<head>中引入ckeditor核心文件ckeditor.js
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<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' ]
是百度编辑器的配置文件。
百度UEditor编辑器之配置文件：ueditor.config.js，配置整个编辑器的特性的方法。
编辑器资源文件根路径配置:window.UEDITOR_HOME_URL = "/xxxx/xxxx/"；
配置项主体。注意，此处所有涉及到路径的配置别遗漏URL变量。
工具栏上的所有的功能按钮和下拉框，可以在new编辑器的实例时选择自己需要的从新定义；
语言配置项,默认是zh-cn。有需要的话也可以使用如下这样的方式来自动多语言切换，当然，前提条件是lang文件夹下存在对应的语言文件：
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）