ckeditor4.2的配置使用与问题解决-优快云博客

一、CKeditor的使用
首先从CKEditor的官方网站(http://ckeditor.com/download) 下载开发包并解压。
将解压后文件夹里面的ckeditor文件夹放到项目webroot下面。
CKEditor 的基本使用
1、页面引入js文件
<script type="text/javascript"src="js/ckeditor/ckeditor.js"></script>
2、使用<textarea id="editor1" class="ckeditor">待输入内容</textarea>
3、配置样式及宽高<script type="text/javascript">$(function () {
CKEDITOR.replace( 'editor1', {
height: '200px',
width: '350px',
});}) </script>

4.关于取出textarea中输入内容的问题
取值：CKEDITOR.instances.editor1.getData();
设置值：CKEDITOR.instances.editor1.setData();
5.关于在IE下出现不兼容的问题：

在html标签上方添加：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

二、ckeditor的配置

在ckeditor的文件夹中找到config.js,根据自己需要选择功能
CKEDITOR.editorConfig = function( config ) {
config.toolbarGroups = [
//{ name: 'clipboard'//,groups: [ 'clipboard', 'undo' ] },
// { name: 'editing' //groups: [ 'find', 'selection', 'spellchecker' ]},
{ name: 'links' },
{ name: 'insert' },
//{ name: 'forms' },
//{ name: 'tools' },
//{ name: 'document' //, groups: [ 'mode', 'document', 'doctools' ]},
//{ name: 'others' },
'/',
{ name: 'basicstyles' //, groups: [ 'basicstyles', 'cleanup' ]
},
{ name: 'paragraph' , groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ]
},
{ name: 'styles' },
{ name: 'colors' }

];
//config.removeButtons = 'Underline,Subscript,Superscript';
//config.format_tags = 'p;h1;h2;h3;pre';
//config.removeDialogTabs = 'image:advanced;link:advanced';
};

三、ckeditor的精简

在部署到Web服务器上时，下列文件夹和文件都可以删除：

/_samples ：示例文件夹；

/_source ：未压缩源程序；

/lang文件夹下除 zh-cn.js、en.js 以外的文件（也可以根据需要保留其他语言文件）；

根目录下的 changes.html(更新列表)，install.html(安装指向)，license.html(使用许可)；