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'
        });

那么,当点击这个按钮的时候
ckeditor 上传文件_第1张图片

会多了两个选项卡
上传选项卡:
ckeditor 上传文件_第2张图片

以及链接选项卡:
ckeditor 上传文件_第3张图片


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

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

上传图片的时候:
图片的 name 值是 upload
ckeditor 上传文件_第4张图片


当在链接选项卡 点击 浏览服务器 按钮的时候, 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 Filebutton>
    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 回填到 链接选项卡
ckeditor 上传文件_第5张图片

你可能感兴趣的:(Javascript)