Question

任何人都可以向大家解释如何集成CKEditor和外部文件浏览器吗？在哪里放这个代码：

    CKEDITOR.replace( 'editor1', {
    filebrowserBrowseUrl: '/browser/browse.php',
    filebrowserUploadUrl: '/uploader/upload.php'
});

还有什么回报：

browse.php
upload.php

我认为这个问题的答案应该是here。很多人都问过这个问题，但这个插件没有明确的指南。 SO成员，也许你们中的一些人可以吗？

Answer 1

filebrowserBrowseUrl将是允许用户在服务器上选择文件的页面的URL。此页面将在新窗口中打开这些参数将添加到网址CKEditor=editor&CKEditorFuncNum=2&langCode=en-gb

CKEditor是当前编辑
CKEditorFuncNum是要调用的函数（将此值传递给callFunction）
langCode是语言

在弹出窗口中调用

window.opener.CKEDITOR.tools.callFunction(CKEditorFuncNum, 'img_url');

设置所选图像，并可选择window.close();关闭窗口 e.g。

<?php
$files = glob('/images/directory/*.{jpg,png,gif,bmp}', GLOB_BRACE);
if (count($files) > 0){
    echo 'Select a file <ul>';
    foreach ($files as $file) {
        echo '<li><button onclick="select(this)" data-name="'.$file.'">.basename($file).</button></li>'; 
    }
    echo '</ul>';
}
?>
<script>
    function select(el){
        window.opener.CKEDITOR.tools.callFunction(<?php echo (int)$_GET['CKEditorFuncNum'] ?>, el.getAttribute('data-name'));
        window.close();
    }
</script>

filebrowserUploadUrl将成为处理图片上传的网址它只是一个标准的文件上传处理程序，除了你在页面上运行一些js 并且与filebrowserBrowseUrl一样，将相同的参数添加到网址。

<?php
... handle the upload
?>
<script>
    window.parent.CKEDITOR.tools.callFunction(<?php echo (int)$_GET['CKEditorFuncNum'], ', ', json_encode($uploaded_image_url), ', ', json_encode($message_on_failure) ?>);
</script>";

简单演示http://jsfiddle.net/mowglisanu/f2ztp/show/（上传实际上并不起作用）
http://jsfiddle.net/mowglisanu/f2ztp/
http://jsfiddle.net/mowglisanu/GuA6s/show/
http://phpfiddle.org/api/run/dv4-e70

CKEditor filebrowser插件

1 个答案: