CKEditor + CKFinder 配置

最新推荐文章于 2021-03-10 08:12:55 发布

iteye_14788

最新推荐文章于 2021-03-10 08:12:55 发布

阅读量164

点赞数

分类专栏： php应用文章标签： fckeditor Flash PHP HTML

本文链接：https://blog.csdn.net/iteye_14788/article/details/81789848

版权

php应用专栏收录该内容

3 篇文章 0 订阅

订阅专栏

logo 老牌编辑器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之后）

 
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里加入以下需要自定义的配置代码：

//字体.
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';
//等等... ...