官方文档不太清楚 - 将自定义文件浏览器/上传器与CKEditor集成的正确方法是什么？(v3 - 不是FCKEditor)
Don*_*nes 175
首先在实例化CKEditor时注册自定义浏览器/上传器.您可以为图像浏览器和常规文件浏览器指定不同的URL.
<script type="text/javascript">
CKEDITOR.replace('content', {
filebrowserBrowseUrl : '/browser/browse/type/all',
filebrowserUploadUrl : '/browser/upload/type/all',
filebrowserImageBrowseUrl : '/browser/browse/type/image',
filebrowserImageUploadUrl : '/browser/upload/type/image',
filebrowserWindowWidth : 800,
filebrowserWindowHeight : 500
});
</script>
您的自定义代码将收到一个名为CKEditorFuncNum的GET参数.保存它 - 这是你的回调函数.让我们说你把它放进去了$callback.
当有人选择文件时,运行此JavaScript以通知CKEditor选择了哪个文件:
window.opener.CKEDITOR.tools.callFunction(<?php echo $callback; ?>,url)
其中"url"是他们选择的文件的URL.可选的第三个参数可以是您希望在标准警报对话框中显示的文本,例如"非法文件"或其他内容.如果第三个参数是错误消息,请将url设置为空字符串.
CKEditor的"上传"选项卡将在"上传"字段中提交一个文件 - 在PHP中,转到$ _FILES ['upload'].CKEditor希望您的服务器输出的是一个完整的JavaScript块:
$output = '<html><body><script type="text/javascript">window.parent.CKEDITOR.tools.callFunction('.$callback.', "'.$url.'","'.$msg.'");</script></body></html>';
echo $output;
同样,您需要为其提供回调参数,文件的URL以及可选的消息.如果消息是空字符串,则不显示任何内容; 如果消息是错误,则url应为空字符串.
关于这一切的官方CKEditor文档是不完整的,但是如果按照上面的说法,它就会像冠军一样工作.
Pen*_*uel 14
我发布了一个关于将旧FCKEditor中可用的FileBrowser集成到CKEditor中的小教程.
http://www.mixedwaves.com/2010/02/integrating-fckeditor-filemanager-in-ckeditor/
它包含了这样做的分步说明,非常简单.我希望任何寻找这个的人都会觉得这个教程很有帮助.
Tim*_*Tim 10
我自己完成了学习过程.我明白了,但我同意文档的编写方式对我来说太吓人了.对我来说,最重要的"aha"时刻是理解为了浏览,所有CKeditor都会打开一个新窗口并在网址中提供一些参数.它允许您添加其他参数,但建议您需要在值上使用encodeURIComponent().
我打电话给浏览器和上传者
CKEDITOR.replace( 'body',
{
filebrowserBrowseUrl: 'browse.php?type=Images&dir=' +
encodeURIComponent('content/images'),
filebrowserUploadUrl: 'upload.php?type=Files&dir=' +
encodeURIComponent('content/images')
}
对于浏览器,在打开的窗口(browse.php)中,使用php&js提供选项列表,然后在提供的onclick处理程序上,调用带有两个参数的CKeditor函数,即所选图像的url/path和CKeditor在网址中提供的CKEditorFuncNum:
function myOnclickHandler(){
//..
window.opener.CKEDITOR.tools.callFunction(<?php echo $_GET['CKEditorFuncNum']; ?>, pathToImage);
window.close();
}
Simarly,上传者只是调用你提供的url,例如upload.php,然后再次提供$ _GET ['CKEditorFuncNum'].目标是iframe,因此,在您从$ _FILES保存文件后,您将反馈传递给CKeditor,因为:
$funcNum = $_GET['CKEditorFuncNum'];
exit("<script>window.parent.CKEDITOR.tools.callFunction($funcNum, '$filePath', '$errorMessage');</script>");
下面是一个简单易懂的自定义浏览器脚本.虽然它不允许用户在服务器中导航,但它允许您指定在调用浏览器时从哪个目录中提取图像文件.
这是所有相当基本的编码,因此它应该适用于所有相对现代的浏览器.
CKeditor只是打开一个带有提供的URL的新窗口
/*
in CKeditor **use encodeURIComponent()** to add dir param to the filebrowserBrowseUrl property
Replace content/images with directory where your images are housed.
*/
CKEDITOR.replace( 'editor1', {
filebrowserBrowseUrl: '**browse.php**?type=Images&dir=' + encodeURIComponent('content/images'),
filebrowserUploadUrl: 'upload.php?type=Files&dir=' + encodeURIComponent('content/images')
});
<?php
header("Content-Type: text/html; charset=utf-8\n");
header("Cache-Control: no-cache, must-revalidate\n");
header("Expires: Sat, 26 Jul 1997 05:00:00 GMT");
// e-z params
$dim = 150; /* image displays proportionally within this square dimension ) */
$cols = 4; /* thumbnails per row */
$thumIndicator = '_th'; /* e.g., *image123_th.jpg*) -> if not using thumbNails then use empty string */
?>
<!DOCTYPE html>
<html>
<head>
<title>browse file</title>
<meta charset="utf-8">
<style>
html,
body {padding:0; margin:0; background:black; }
table {width:100%; border-spacing:15px; }
td {text-align:center; padding:5px; background:#181818; }
img {border:5px solid #303030; padding:0; verticle-align: middle;}
img:hover { border-color:blue; cursor:pointer; }
</style>
</head>
<body>
<table>
<?php
$dir = $_GET['dir'];
$dir = rtrim($dir, '/'); // the script will add the ending slash when appropriate
$files = scandir($dir);
$images = array();
foreach($files as $file){
// filter for thumbNail image files (use an empty string for $thumIndicator if not using thumbnails )
if( !preg_match('/'. $thumIndicator .'\.(jpg|jpeg|png|gif)$/i', $file) )
continue;
$thumbSrc = $dir . '/' . $file;
$fileBaseName = str_replace('_th.','.',$file);
$image_info = getimagesize($thumbSrc);
$_w = $image_info[0];
$_h = $image_info[1];
if( $_w > $_h ) { // $a is the longer side and $b is the shorter side
$a = $_w;
$b = $_h;
} else {
$a = $_h;
$b = $_w;
}
$pct = $b / $a; // the shorter sides relationship to the longer side
if( $a > $dim )
$a = $dim; // limit the longer side to the dimension specified
$b = (int)($a * $pct); // calculate the shorter side
$width = $_w > $_h ? $a : $b;
$height = $_w > $_h ? $b : $a;
// produce an image tag
$str = sprintf('<img src="%s" width="%d" height="%d" title="%s" alt="">',
$thumbSrc,
$width,
$height,
$fileBaseName
);
// save image tags in an array
$images[] = str_replace("'", "\\'", $str); // an unescaped apostrophe would break js
}
$numRows = floor( count($images) / $cols );
// if there are any images left over then add another row
if( count($images) % $cols != 0 )
$numRows++;
// produce the correct number of table rows with empty cells
for($i=0; $i<$numRows; $i++)
echo "\t<tr>" . implode('', array_fill(0, $cols, '<td></td>')) . "</tr>\n\n";
?>
</table>
<script>
// make a js array from the php array
images = [
<?php
foreach( $images as $v)
echo sprintf("\t'%s',\n", $v);
?>];
tbl = document.getElementsByTagName('table')[0];
td = tbl.getElementsByTagName('td');
// fill the empty table cells with data
for(var i=0; i < images.length; i++)
td[i].innerHTML = images[i];
// event handler to place clicked image into CKeditor
tbl.onclick =
function(e) {
var tgt = e.target || event.srcElement,
url;
if( tgt.nodeName != 'IMG' )
return;
url = '<?php echo $dir;?>' + '/' + tgt.title;
this.onclick = null;
window.opener.CKEDITOR.tools.callFunction(<?php echo $_GET['CKEditorFuncNum']; ?>, url);
window.close();
}
</script>
</body>
</html>
小智 9
我花了一段时间试图找出这个,这就是我做的.我已经把它简单地分解了,因为这就是我所需要的.
在ckeditor文本区域的正下方,输入上传文件,如>>>>
<form action="welcomeeditupload.asp" method="post" name="deletechecked">
<div align="center">
<br />
<br />
<label></label>
<textarea class="ckeditor" cols="80" id="editor1" name="editor1" rows="10"><%=(rslegschedule.Fields.Item("welcomevar").Value)%></textarea>
<script type="text/javascript">
//<![CDATA[
CKEDITOR.replace( 'editor1',
{
filebrowserUploadUrl : 'updateimagedone.asp'
});
//]]>
</script>
<br />
<br />
<br />
<input type="submit" value="Update">
</div>
</form>
'然后添加你的上传文件,这是我用ASP编写的.如果你正在使用PHP等,只需用你的上传脚本替换ASP,但要确保页面输出相同的东西.
<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<%
if Request("CKEditorFuncNum")=1 then
Set Upload = Server.CreateObject("Persits.Upload")
Upload.OverwriteFiles = False
Upload.SetMaxSize 5000000, True
Upload.CodePage = 65001
On Error Resume Next
Upload.Save "d:\hosting\belaullach\senate\legislation"
Dim picture
For Each File in Upload.Files
Ext = UCase(Right(File.Path, 3))
If Ext <> "JPG" Then
If Ext <> "BMP" Then
Response.Write "File " & File.Path & " is not a .jpg or .bmp file." & "<BR>"
Response.write "You can only upload .jpg or .bmp files." & "<BR>" & "<BR>"
End if
Else
File.SaveAs Server.MapPath(("/senate/legislation") & "/" & File.fileName)
f1=File.fileName
End If
Next
End if
fnm="/senate/legislation/"&f1
imgop = "<html><body><script type=""text/javascript"">window.parent.CKEDITOR.tools.callFunction('1','"&fnm&"');</script></body></html>;"
'imgop="callFunction('1','"&fnm&"',"");"
Response.write imgop
%>
这是我用过的方法.这很简单,工作得很好.
在CK编辑器根目录中有一个名为config.js的文件
我添加了这个(你不需要querystring的东西,这只是我们的文件管理器).我还包括一些皮肤和更改显示的默认按钮:
CKEDITOR.editorConfig = function(config) {
config.skin = 'v2';
config.startupFocus = false;
config.filebrowserBrowseUrl = '/admin/content/filemanager.aspx?path=Userfiles/File&editor=FCK';
config.filebrowserImageBrowseUrl = '/admin/content/filemanager.aspx?type=Image&path=Userfiles/Image&editor=FCK';
config.toolbar_Full =
[
['Source', '-', 'Preview', '-'],
['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Print', 'SpellChecker'], //, 'Scayt'
['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'],
'/',
['Bold', 'Italic', 'Underline', 'Strike', '-', 'Subscript', 'Superscript'],
['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote'],
['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
['Link', 'Unlink', 'Anchor'],
['Image', 'Flash', 'Table', 'HorizontalRule', 'SpecialChar'],
'/',
['Styles', 'Format', 'Templates'],
['Maximize', 'ShowBlocks']
];
};
然后,我们的文件管理器调用:
opener.SetUrl('somefilename');
zerokspot上一篇名为CKEditor 3.0中的Custom filebrowser回调的文章处理了这个问题.最相关的部分引用如下:
因此,当您选择文件时,您只需要使用正确的回调号码(通常为1)和所选文件的URL来调用此代码:
Run Code Online (Sandbox Code Playgroud)window.opener.CKEDITOR.tools.callFunction(CKEditorFuncNum,url);对于快速上载程序,该过程非常相似.起初我认为编辑器可能正在侦听200 HTTP返回代码,并且可能会查看某些标题字段或类似内容以确定上载文件的位置,但随后 - 通过一些Firebug监控 - 我注意到所有发生的事情上传后是以下代码:
<script type="text/javascript">
window.parent.CKEDITOR.tools.callFunction(CKEditorFuncNum,url, errorMessage);</script>如果上传失败,请将其设置
errorMessage为某个非零长度字符串并清空该网址,反之亦然.
| 归档时间： |
|
| 查看次数： |
137643 次 |
| 最近记录： |