ckeditor使用以及配置

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']
]
});
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值