ckeditorアップロードファイル
6244 ワード
参考:http://docs.ckeditor.com/#!/ガイド/dev_file_browser_アプリhttp://docs.ckeditor.com/#!/ガイド/dev_file_browse_アップロード
環境:ckeditor_4.5.10_フル
ckeditorを生成するときは、次のように書きます.
二つのタブを追加してタブをアップロードします.
リンクタブ:
このうち、filebrowserBrowseUrlの値は、画像をアップロードするアドレスを表しています.タブに画像をアップロードする時、CKEditorのアクセスアドレスにはパラメータが付いています.この中で、CKEditor=editor 1は、CKEditorのID CK EditoFunctNum=1は、今回のアップロードイベントの一意の識別子を表しています.一般的には1です.
リンクタブでブラウズサーバボタンをクリックすると、CKEditorがサーバにアクセスするアドレスの形は以下の通りです.
ブラウズサーバのボタンをクリックすると、CKEditorがポップアップとしてサーバから戻ってきたページをポップアップします.サーバから戻ってきたページは下記のコードを参照してください.
環境:ckeditor_4.5.10_フル
ckeditorを生成するときは、次のように書きます.
CKEDITOR.replace('editor1', {
filebrowserBrowseUrl: '/Home/SelectImg',
filebrowserUploadUrl: '/Home/SetImg'
});
では、このボタンを押すとです.二つのタブを追加してタブをアップロードします.
リンクタブ:
このうち、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がサーバにアクセスするアドレスの形は以下の通りです.
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をリンクタブに書き込むことができる.