1.使用方式
jsp页面中包含 <script type="text/javascript" src="<%= request.getContextPath() %>/km/knowledge/ckeditor/ckeditor.js"></script>
<td class="label_left" colspan="6">
<html:textarea property="entity.mainContent" styleId="bottom" rows="100" cols="30" style="width: 30%; height: 100%" />
<br>
</td>
</tr>
<script>
CKEDITOR.replace( 'entity.mainContent',
{
fullPage : false,
width:'100%'
});
</script>
2.ckeditor工具栏的自定义
CKEditor 工具栏是一个JavaScript数组,数组里面包含了要显示的工具的名字。工具栏的命名规则为:“toolbar_<name>”, “<name>”是定义的工具栏名字。 下面代码中是CKEditor默认定义好的两个工具栏,“Full”和“Basic”,并且默认使用的是“Full”工具栏
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'],
['BidiLtr', 'BidiRtl'],
'/',
['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
['NumberedList','BulletedList','-','Outdent','Indent','Blockquote','CreateDiv'],
['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.js里自定义工具栏:
CKEDITOR.editorConfig = function( config )
{
config.toolbar = 'MyToolbar';//把默认工具栏改为‘MyToolbar’
config.toolbar_MyToolbar =
[
['NewPage','Preview'],
['Cut','Copy','Paste','PasteText','PasteFromWord','-','Scayt'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
'/',
['Styles','Format'],
['Bold','Italic','Strike'],
['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
['Link','Unlink','Anchor'],
['Maximize','-','About']
];
};
或者你也可以定义多个Toolbar,然后在不同的地方使用不同的toolbar属性的设置:
CKEDITOR.replace( 'editor1',
{
toolbar : 'MyToolbar'
});
CKEDITOR.replace( 'editor2',
{
toolbar : 'Basic'
});
当然,你也可以在调用CKEditor的地方直接定义新的工具栏
CKEDITOR.replace( 'editor1',
{
toolbar :
[
['Styles', 'Format'],
['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', '-', 'About']
]
});
分享到:
相关推荐
ckeditor的详细配置,ckeditor是FCKeditor的最新版本,支持各种浏览器。
ckeditor+ckfinder配置实现图片上传实例: 版本ckeditor4.0.1+ckfinder2.3.1,已经去掉授权提示, 需要的可以下下来研究下。
CKeditor的详细配置文件,很全很使用的。可以设置自己想要的在线编辑器的格式
最近项目开发需要用到CKEditor在线编辑器,但发现他本身没有自带,所以需要自己手动配置插件。但网上很多配置都有问题,自己摸索了好久终于搞定。需要注意的细节有:flvPlayer文件夹的内容直接放在ckeditor文件夹...
ckeditor5 v19完整配置文件,含教程及源文件,index.html调用文件及配置文件为单独文件,可以用于复制替换及学习,提醒个别插件必须在网站调试模式下才能正常显示工具,ckfinder需要自行从网上下载,默认为放在网站...
ckeditor配置(详细)内涵详细使用说明
文本编辑器CKEditor 3使用配置和图片上传实现实例,里面包含了一个项目源代码和使用文档。项目经过自己的测试,是成功的,但里面还包含了其他程序代码没有去掉,不会影响的。 项目是使用jsp+struts 1.2实现。
最新ckeditor_ckfinder整合超完整版 for PHP版让你的文本编辑器支持图片和FLASH的上传 附ckeditor完整中文配置
NULL 博文链接:https://lafecat.iteye.com/blog/2002321
CKeditor3.0详细配置[定义].pdf
这是一个非常有用的在线编辑工具,里内包含了具体配置方法
CKeditor配置使用[参照].pdf
ckeditor 配配置文件
CKeditor的完整toolbar配置说明,很多人不知道,其他它就在sample下面。我单摘出来,方便大家查看
asp.net 使用ckeditor5富文本编辑器包含图片上传全部代码
已经将ckeditor4.2+ckfinder2.3.1功能整合到一起。直接将js文件夹复制到web项目中即可。
ASP.NET中CKeitor文本编辑器的使用Demo,配置图片上传,已经使用的文档说明。
详细的CKEditor安装与配置使你更快一步上手,希望对你有所帮助!
ckeditor3.6详细的用法说明和配置.很好用!
CKEditor使用介绍 配置中文解释 AutoDetectLanguage=true/false 自动检测语言 BaseHref="" 相对链接的基地址 ContentLangDirection="ltr/rtl" 默认文字方向 ContextMenu=字符串数组,右键菜单的内容