CKEditor + CKFinder 配置
老牌编辑器FCK的升级版CKEditor经过重写，提供了丰富而强大的集成和互动的API。
新版编辑器是完全基于插件，它可以扩展所有部件以符合需求。
FCKeditor升级后的CKEditor去掉了上传功能，只提供了基本的文本编辑功能，上传模块由另一个组件CKFinder来实现。
换句话说编辑器如果需要上传功能，就需要再下载CKFinder(http://www.ckfinder.com/)。
CKEditor + CKFinder 配置流水账：
CKEditor：
1.解压CKEditor到webRoot目录，在应用页面加载其ckeditor.js ;
2.页面textarea：
1 |
<textarea cols="80" name="editor1" rows="10"></textarea> ; |
CKFinder：
3.解压CKFinder到webRoot目录（最好与CKEditor同级），在应用页面加载其ckfinder.js ;
4.页面script：（最好textarea之后）
1 2 3 4 5 6 7 8 |
if (typeof CKEDITOR == 'undefined') { document.write('加载CKEditor失败'); } else { var editor = CKEDITOR.replace('editor1'); CKFinder.SetupCKEditor(editor, '../ckeditor/ckfinder/'); //ckfinder总目录的相对路径. } |
整合：
（把俩js加载到同一文件其实就已经基本整合好了，还需要修改的配置如下）
5.打开\ckfinder\config.php，修改$baseUrl = ‘（上传附件的存放路径）’; //以webRoot为起始的绝对路径，其目录下会自动生成images、flash等子目录；默认是在webRoot的根目录下，注意修改。
至此配置完毕，如果需要自定义界面，可进行以下的高级修改：
6.在ckeditor\config.js中的CKEDITOR.editorConfig里加入以下需要自定义的配置代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
//字体. config.font_names = '宋体;楷体_GB2312;新宋体;黑体;隶书;幼圆;微软雅黑;Arial; Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana;' ; //工具按钮. config.toolbar= [ ['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'], '/', ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'], ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'], ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'], ['Link','Unlink','Anchor'], ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'], '/', ['Styles','Format','Font','FontSize'], ['TextColor','BGColor'], ['Maximize','ShowBlocks','-','About'] ]; //宽度 config.width = 500; //高度 config.height = 400; //皮肤 config.skin='v2'; //等等... ... |
安装CKFinder后才能有上传功能:
before:
after:
官方文档：
http://docs.cksource.com/CKEditor_3.x/Developers_Guide
http://docs.cksource.com/CKFinder/Developers_Guide
原文地址