ckeditorアップロードファイル

6244 ワード

参考:http://docs.ckeditor.com/#!/ガイド/dev_file_browser_アプリhttp://docs.ckeditor.com/#!/ガイド/dev_file_browse_アップロード
環境:ckeditor_4.5.10_フル
ckeditorを生成するときは、次のように書きます.
        CKEDITOR.replace('editor1', {
            filebrowserBrowseUrl: '/Home/SelectImg',
            filebrowserUploadUrl: '/Home/SetImg'
        });
では、このボタンを押すとckeditor 上传文件_第1张图片です.
二つのタブを追加してタブをアップロードします.ckeditor 上传文件_第2张图片
リンクタブ:ckeditor 上传文件_第3张图片
このうち、filebrowserBrowseUrlの値は、画像をアップロードするアドレスを表しています.タブに画像をアップロードする時、CKEditorのアクセスアドレスにはパラメータが付いています.この中で、CKEditor=editor 1は、CKEditorのID CK EditoFunctNum=1は、今回のアップロードイベントの一意の識別子を表しています.一般的には1です.
http://localhost:53927/Home/SetImg?CKEditor=editor1&CKEditorFuncNum=1&langCode=zh-cn
画像をアップロードする時:画像のname値はuplad ckeditor 上传文件_第4张图片です.
リンクタブでブラウズサーバボタンをクリックすると、CKEditorがサーバにアクセスするアドレスの形は以下の通りです.
http://localhost:53927/Home/SelectImg?CKEditor=editor1&CKEditorFuncNum=1&langCode=zh-cn
同じくCKEditor FunncNumを持っています.このCKEditor FunncNumを通じて、アップロードタブにアップロードされたばかりの写真をサーバで見つけやすくなります.
ブラウズサーバのボタンをクリックすると、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>
calFunction方法は、サーバから取得したピクチャurlをリンクタブckeditor 上传文件_第5张图片に書き込むことができる.