ckeditor 使用方法
使用方法:
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>
3、将相应的控件替换成编辑器代码 【我发现不写这段js代码,也是可以使用的,关键是第2部,textarea的 class="ckeditor"】
<script type="text/javascript">
CKEDITOR.replace('TextArea1');
</script>
默认样式:
上面的功能项太多,有好多用不到, 若要定义新的样式,自己写一个ckeditor_config.js文件,代替原有文件。
如下:
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="ckeditor/ckeditor_config_fabiao.js"></script>
一:
ckeditor_config_fabiao.js代码:
CKEDITOR.editorConfig = function( config ) { config.width = 870; //宽度 config.height = 400; //高度 //下面的是工具条的定义,不用的删除,用的留下。 []里在工具栏上显示一块, "/" 换行 "-"代表 "|" d config.toolbar_A = [ ['Source'], // ['Cut','Copy','Paste','PasteText','PasteFromWord'], ['Bold','Underline'], // ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'], ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'], // '/', ['Styles','Format','Font','FontSize'], ['TextColor','BGColor'], ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'], ]; config.toolbar = 'A'; config.language = 'zh-cn'; };
样式:
二:ckeditor_config_huifu.js 代码
:
CKEDITOR.editorConfig = function( config ) { config.language = 'zh-cn'; config.toolbar_A = [ ['Source'], ['Cut','Copy','Paste','PasteText','PasteFromWord'], ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'], ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'], ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'], '/', ['Styles','Format','Font','FontSize'], ['TextColor','BGColor'], ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'], ]; config.toolbar = 'A'; config.uiColor = '#BFEFFF'; //背景颜色 config.width = 700; //宽度 config.height = 180; //高度 config.skin='kama'; //编辑器主题选择 //工具栏 config.toolbar = [ ['Source','Bold','Italic'], ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'], ['Smiley'], ['Styles','Font','FontSize'], ['TextColor'], ['Undo','Redo'], ['Image','Flash'] ]; };
样式: