第一步:基本配置
CKEditor + CKFinder 配置流水账:
CKEditor:
1.解压CKEditor到webRoot目录,在应用页面加载其ckeditor.js ;
2.页面textarea:
[html]<textarea cols=”80″; name=”editor1″ rows=”10″></textarea>;[/html]
CKFinder:
3.解压CKFinder到webRoot目录(最好与CKEditor同级),在应用页面加载其ckfinder.js ;
4.页面script:(最好textarea之后)
[javascript]
if (typeof CKEDITOR == ‘undefined’) {
document.write(’加载CKEditor失败’);
}
else {
var editor = CKEDITOR.replace(’editor1′);
CKFinder.SetupCKEditor(editor, ‘../ckeditor/ckfinder/’); //ckfinder总目录的相对路径.
}
[/javascript]
整合:
(把俩js加载到同一文件其实就已经基本整合好了,还需要修改的配置如下)
5.打开\ckfinder\config.php,修改$baseUrl = ‘(上传附件的存放路径)’; //以webRoot为起始的绝对路径,其目录下会自动生成images、flash等子目录;默认是在webRoot的根目录下,注意修改。
至此配置完毕,如果需要自定义界面,可进行以下的高级修改:
6.在ckeditor\config.js中的CKEDITOR.editorConfig里加入以下需要自定义的配置代码:
[css]
//字体.
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′;
//等等… …
[/css]
安装CKFinder后才能有上传功能:
第二步:设置CKFinder的上传功能
由于本次CKEditor全新改版,没有提供文件上传功能,所以选择整合CKFinder是个不错的选择
需要修改一下CKEditor插件文件夹下的JS源码,以image插件为例(Flash及Files同理):
Code
//将下边的代码做一些修改
//{type:'button',id:'browse',align:'center',label:m.lang.common.browseServer,hidden:false,filebrowser:'info:txtUrl'}]}]},
//2009-07-13 将浏览服务器按钮置为显示状态 (hidden: false),增加onClick函数,用于打开ckfinder页面,紧接着上面的代码添加
{ type: 'button', id: 'browse', align: 'center', label: m.lang.common.browseServer, hidden: false, filebrowser: 'info:txtUrl', onClick: function() { var finder = new CKFinder(); finder.BasePath = '../ckfinder20090716/'; finder.SelectFunction = SetFileField; finder.Popup(); } }]}]},
在方法体外增加下边的函数
//用于取回 ckfinder 返回的图片地址并对路径文本框和预览图片进行赋值
function SetFileField(fileUrl)
{
//获取主Div下的所有文本框控件
var inputStr = document.getElementById("cke_txtContent_dialog").getElementsByTagName("Input");
for(var i=0; i<inputStr.length; i++)
{
if(inputStr[i].type=="text")
{
//第一个输入框控件是图像路径,得到ID,设置新的图片路径
CKEDITOR.document.getById(inputStr[i].id).setValue(fileUrl);
break ;
}
}
CKEDITOR.document.getById('previewImage').setAttribute('src', decodeURI(fileUrl));
}
第三步:CKFINDER上传问题:出现“因为安全原因,文件不可浏览. 请联系系统管理员并检查CKFinder配置文件“
整合后会出现“因为安全原因,文件不可浏览. 请联系系统管理员并检查CKFinder配置文件“
The Solution:
1. There is no write access for the default upload folder $baseUrl = '/userfiles/'; in ckfinder/config.php.
对于目标文件夹$baseUrl = '/userfiles/';没有写入权限
2. This is maybe because the Return value of Funcation CheckAuthentication() is always FALSE by default in ckfinder/config.php. Change the Validation Condition according to your condition, not recommend to set the return value to true directly.
因为出于安全考虑ckfinder/config.php文件中的CheckAuthentication()函数默认返回值是false, 需要手动修改验证条件, 不建议直接返回true
该文章出自《壁虎漫步网》,原文链接:http://www.hitsns.com/read.php?282
转载时间是: 2010-01-19 11:21:46 请务必保留此链接,谢谢!
分享到:
相关推荐
最近项目开发需要用到CKEditor在线编辑器,但发现他本身没有自带,所以需要自己手动配置插件。但网上很多配置都有问题,自己摸索了好久终于搞定。需要注意的细节有:flvPlayer文件夹的内容直接放在ckeditor文件夹...
ckeditor配置(详细)内涵详细使用说明
ckeditor配置详解文档资料
把ckeditor 3.4的ckeditor.js复盖就行
ckeditor 配配置文件
CKeditor配置使用[参照].pdf
ckeditor设置行间距资源包 1.下载ckeditor的行距插件包 lineheight 2.解压到ckeditor/plugins目录下 3.修改ckeditor目录下的 config.js文件
ckeditor的详细配置,ckeditor是FCKeditor的最新版本,支持各种浏览器。
CKEditor配置好的MyEclipse实例 .
ckeditor中用来设置字体行高的插件,解压后lineheight文件夹放到ckeditor--->plugins目录下即可,如果不明白可以参考http://blog.csdn.net/zcyhappy1314/article/details/8651053第二的部分:ckeditor的配置
ckEditor配置demo,上传图片配置以及插入高亮代码片段配置
CKEDITOR详细配置 如表情配置图片配置图片flash上传配置等
CKeditor的详细配置文件,很全很使用的。可以设置自己想要的在线编辑器的格式
用于最新CKEditor4.0的行距插件,不能用于CKEditor3.X.X及以前版本
ckeditor3.6详细的用法说明和配置.很好用!
在asp中使用ckeditor开启图片上传功能的设置方法: 1、下载asp版本的ckfinder,放到ckeditor目录下 2、修改ckeditor\config.js,加上如下内容: CKEDITOR.editorConfig = function( config ) { config.scayt_...
CKEditor的配置:文本编辑框,可像word那样改变字体颜色,大小,等等。
ckeditor5 v19完整配置文件,含教程及源文件,index.html调用文件及配置文件为单独文件,可以用于复制替换及学习,提醒个别插件必须在网站调试模式下才能正常显示工具,ckfinder需要自行从网上下载,默认为放在网站...
CKeditor的完整toolbar配置说明,很多人不知道,其他它就在sample下面。我单摘出来,方便大家查看
这是一个非常有用的在线编辑工具,里内包含了具体配置方法