CKEditor就像一个在你网页中的文本区域(textarea)一样工作,它提供了一个简单易写的用户界面、版式和丰富的文字输入区域。但用文本区域要实现同样的效果,并不容易,它需要用户输入html代码。
在使用之前需要导入ckedior的js和css文件 下载地址
需要配置根目录下面的config.js,配置自己需要的工具栏
- config.js的配置
CKEDITOR.editorConfig = function( config ) {
config.language = 'zh-cn'; //设置语言
config.height = 240; //设置高度
config.toolbarCanCollapse = true;
config.uiColor = '#90B8E9'; //设置外边框的颜色
config.toolbar = 'Full';
config.toolbarGroups = [ //将工具栏以组的形式显示
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ,'save'] },
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ] },
{ name: 'forms' },
'/',
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
{ name: 'styles' },
{ name: 'colors' , groups:['TextColor'] },
{ name: 'tools', groups:[ 'TextColor','BGColor' ]}
];
config.fontSize_defaultLabel = '18px';
};
- ckEditor的初始化
window.setTimeout('CKEDITOR.replace("editorContent")', 200);
- ckEditor的定义
<textarea id="editorContent" name="editorContent"></textarea>
- ckEditor的数据保存
var data = CKEDITOR.instances.editorContent.getData();
ckEditor将所有设置的字体格式以html标签的形式进行保存,在数据端以Text的格式保存,在前端展示时,取出来存放在页面里,就展示成了有样式的字体。