ckeditor 上传文件

参考：
http://docs.ckeditor.com/#!/guide/dev_file_browser_api
http://docs.ckeditor.com/#!/guide/dev_file_browse_upload

环境：
ckeditor_4.5.10_full

在生成 ckeditor 的时候，像下面那样写：

        CKEDITOR.replace('editor1', {
            filebrowserBrowseUrl: '/Home/SelectImg',
            filebrowserUploadUrl: '/Home/SetImg'
        });

那么，当点击这个按钮的时候
这里写图片描述

会多了两个选项卡
上传选项卡：
这里写图片描述

以及链接选项卡：
这里写图片描述

其中 filebrowserBrowseUrl 的值代表图片要上传的地址，
当在上传选项卡上传图片的时候，CKEditor的访问地址会带一些参数，形如：
其中：
CKEditor=editor1 表示 CKEditor 的 id
CKEditorFuncNum=1 表示此次上传事件的唯一标识码，一般是1

http://localhost:53927/Home/SetImg?CKEditor=editor1&CKEditorFuncNum=1&langCode=zh-cn

上传图片的时候：
图片的 name 值是 upload
这里写图片描述

当在链接选项卡点击浏览服务器按钮的时候， CKEditor 访问服务器的地址形如：

http://localhost:53927/Home/SelectImg?CKEditor=editor1&CKEditorFuncNum=1&langCode=zh-cn

同样是带 CKEditorFuncNum 的，通过这个 CKEditorFuncNum 可以方便服务器找出刚刚在上传选项卡上传的图片

点击浏览服务器按钮的时候，CKEditor 会以弹窗的形式弹出服务器返回的页面，服务器返回的页面可以参考下面的代码：

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>选择文件</title>
</head>
<body>
    <div>
        <button onclick="returnFileUrl()">Select File</button>
    </div>
    <script>
        // Helper function to get parameters from the query string.
        function getUrlParam(paramName) {
            var reParam = new RegExp('(?:[\?&]|&)' + paramName + '=([^&]+)', 'i');
            var match = window.location.search.match(reParam);

            return (match && match.length > 1) ? match[1] : null;
        }
        // Simulate user action of selecting a file to be returned to CKEditor.
        function returnFileUrl() {

            var funcNum = getUrlParam('CKEditorFuncNum');
            var fileUrl = '/path/to/img.jpg';
            window.opener.CKEDITOR.tools.callFunction(funcNum, fileUrl);
            window.close();
        }
    </script>
</body>
</html>

其中 callFunction方法可以把从服务器获取的图片 url 回填到链接选项卡
这里写图片描述

猜你喜欢