公式ドキュメントは明確ではありません - カスタム ファイル ブラウザ/アップローダーを CKEditor と統合する正しい方法は何ですか? (v3 - FCKEditor ではない)
141927 次
8 に答える
177
CKEditor をインスタンス化するときに、カスタム ブラウザー/アップローダーを登録することから始めます。イメージ ブラウザと一般的なファイル ブラウザでは、異なる URL を指定できます。
<script type="text/javascript">
CKEDITOR.replace('content', {
filebrowserBrowseUrl : '/browser/browse/type/all',
filebrowserUploadUrl : '/browser/upload/type/all',
filebrowserImageBrowseUrl : '/browser/browse/type/image',
filebrowserImageUploadUrl : '/browser/upload/type/image',
filebrowserWindowWidth : 800,
filebrowserWindowHeight : 500
});
</script>
カスタム コードは、CKEditorFuncNum という GET パラメーターを受け取ります。それを保存します - それがあなたのコールバック関数です。に入れたとしましょう$callback。
誰かがファイルを選択すると、次の JavaScript を実行して、どのファイルが選択されたかを CKEditor に通知します。
window.opener.CKEDITOR.tools.callFunction(<?php echo $callback; ?>,url)
「url」は、選択したファイルの URL です。オプションの 3 番目のパラメーターは、「不正なファイル」など、標準の警告ダイアログに表示するテキストにすることができます。3 番目のパラメーターがエラー メッセージの場合は、url を空の文字列に設定します。
CKEditor の「アップロード」タブは、フィールド「アップロード」にファイルを送信します。PHP では、$_FILES['upload'] に移動します。CKEditor がサーバーに出力させたいのは、完全な JavaScript ブロックです。
$output = '<html><body><script type="text/javascript">window.parent.CKEDITOR.tools.callFunction('.$callback.', "'.$url.'","'.$msg.'");</script></body></html>';
echo $output;
ここでも、コールバック パラメータ、ファイルの URL、およびオプションでメッセージを指定する必要があります。メッセージが空の文字列の場合、何も表示されません。メッセージがエラーの場合、url は空の文字列にする必要があります。
公式の CKEditor ドキュメントは、これらすべてについて不完全ですが、上記に従えば、チャンピオンのように機能します。
于 2009-09-30T15:00:43.463 に答える
14
古い FCKEditor で利用可能な FileBrowser を CKEditor に統合する方法について、1 つの小さなチュートリアルを投稿しました。
http://www.mixedwaves.com/2010/02/integrating-fckeditor-filemanager-in-ckeditor/
それを行うためのステップバイステップの説明が含まれており、非常に簡単です。これを探している人がこのチュートリアルに役立つことを願っています。
于 2010-03-05T04:54:13.140 に答える
9
私はこれを理解しようとしてしばらく時間を費やしましたが、これが私がしたことです。それが私が必要としていたものなので、私はそれを非常に簡単に分解しました。
ckeditor テキスト領域のすぐ下に、次のようにアップロード ファイルを入力します >>>>
<form action="welcomeeditupload.asp" method="post" name="deletechecked">
<div align="center">
<br />
<br />
<label></label>
<textarea class="ckeditor" cols="80" id="editor1" name="editor1" rows="10"><%=(rslegschedule.Fields.Item("welcomevar").Value)%></textarea>
<script type="text/javascript">
//<![CDATA[
CKEDITOR.replace( 'editor1',
{
filebrowserUploadUrl : 'updateimagedone.asp'
});
//]]>
</script>
<br />
<br />
<br />
<input type="submit" value="Update">
</div>
</form>
'次に、アップロード ファイルを追加します。ここに ASP で記述された私のファイルがあります。PHP などを使用している場合は、単に ASP をアップロード スクリプトに置き換えますが、ページが同じものを出力することを確認してください。
<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<%
if Request("CKEditorFuncNum")=1 then
Set Upload = Server.CreateObject("Persits.Upload")
Upload.OverwriteFiles = False
Upload.SetMaxSize 5000000, True
Upload.CodePage = 65001
On Error Resume Next
Upload.Save "d:\hosting\belaullach\senate\legislation"
Dim picture
For Each File in Upload.Files
Ext = UCase(Right(File.Path, 3))
If Ext <> "JPG" Then
If Ext <> "BMP" Then
Response.Write "File " & File.Path & " is not a .jpg or .bmp file." & "<BR>"
Response.write "You can only upload .jpg or .bmp files." & "<BR>" & "<BR>"
End if
Else
File.SaveAs Server.MapPath(("/senate/legislation") & "/" & File.fileName)
f1=File.fileName
End If
Next
End if
fnm="/senate/legislation/"&f1
imgop = "<html><body><script type=""text/javascript"">window.parent.CKEDITOR.tools.callFunction('1','"&fnm&"');</script></body></html>;"
'imgop="callFunction('1','"&fnm&"',"");"
Response.write imgop
%>
于 2009-12-25T04:56:05.890 に答える
8
これは私が使用したアプローチです。それは非常に簡単で、うまく機能します。
CK エディターのルート ディレクトリには、config.js という名前のファイルがあります。
これを追加しました (クエリ文字列は必要ありません。これはファイル マネージャー用です)。また、表示されているデフォルトのボタンのスキニングと変更もいくつか含めました。
CKEDITOR.editorConfig = function(config) {
config.skin = 'v2';
config.startupFocus = false;
config.filebrowserBrowseUrl = '/admin/content/filemanager.aspx?path=Userfiles/File&editor=FCK';
config.filebrowserImageBrowseUrl = '/admin/content/filemanager.aspx?type=Image&path=Userfiles/Image&editor=FCK';
config.toolbar_Full =
[
['Source', '-', 'Preview', '-'],
['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Print', 'SpellChecker'], //, 'Scayt'
['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'],
'/',
['Bold', 'Italic', 'Underline', 'Strike', '-', 'Subscript', 'Superscript'],
['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote'],
['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
['Link', 'Unlink', 'Anchor'],
['Image', 'Flash', 'Table', 'HorizontalRule', 'SpecialChar'],
'/',
['Styles', 'Format', 'Templates'],
['Maximize', 'ShowBlocks']
];
};
次に、ファイルマネージャーはこれを呼び出します：
opener.SetUrl('somefilename');
于 2010-05-27T20:14:35.893 に答える
7
CKEditor 3.0 での Custom filebrowser callbacksというタイトルの zerokspot の記事で、これが処理されます。最も関連性の高いセクションを以下に引用します。
したがって、ファイルを選択したときにファイル ブラウザから行う必要があるのは、正しいコールバック番号 (通常は 1) と選択したファイルの URL を指定してこのコードを呼び出すことだけです。
window.opener.CKEDITOR.tools.callFunction(CKEditorFuncNum,url);クイックアップローダーの場合、プロセスは非常に似ています。最初は、エディターが 200 HTTP リターン コードをリッスンしている可能性があり、おそらくヘッダー フィールドなどを調べて、アップロードされたファイルの場所を特定しているのではないかと考えていましたが、Firebug の監視を通じて、すべてが発生していることに気付きました。アップロード後のコードは次のとおりです。
<script type="text/javascript">
window.parent.CKEDITOR.tools.callFunction(CKEditorFuncNum,url, errorMessage);</script>アップロードが失敗した場合は、
errorMessage長さが 0 以外の文字列に設定して URL を空にし、成功した場合はその逆を行います。
于 2009-10-09T22:30:11.560 に答える
4
CKEditor をインスタンス化するときに、カスタム ブラウザー/アップローダーを登録することから始めます。
<script type="text/javascript">
CKEDITOR.replace('content', {
filebrowserUploadUrl: "Upload File Url",//http://localhost/phpwork/test/ckFileUpload.php
filebrowserWindowWidth : 800,
filebrowserWindowHeight : 500
});
</script>
アップロード ファイル (ckFileUpload.php) のコードを作成し、アップロード ファイルをプロジェクトのルート ディレクトリに置きます。
// HERE SET THE PATH TO THE FOLDERS FOR IMAGES AND AUDIO ON YOUR SERVER (RELATIVE TO THE ROOT OF YOUR WEBSITE ON SERVER)
$upload_dir = array(
'img'=> '/phpwork/test/uploads/editor-images/',
'audio'=> '/phpwork/ezcore_v1/uploads/editor-images/'
);
// HERE PERMISSIONS FOR IMAGE
$imgset = array(
'maxsize' => 2000, // maximum file size, in KiloBytes (2 MB)
'maxwidth' => 900, // maximum allowed width, in pixels
'maxheight' => 800, // maximum allowed height, in pixels
'minwidth' => 10, // minimum allowed width, in pixels
'minheight' => 10, // minimum allowed height, in pixels
'type' => array('bmp', 'gif', 'jpg', 'jpeg', 'png'), // allowed extensions
);
// HERE PERMISSIONS FOR AUDIO
$audioset = array(
'maxsize' => 20000, // maximum file size, in KiloBytes (20 MB)
'type' => array('mp3', 'ogg', 'wav'), // allowed extensions
);
// If 1 and filename exists, RENAME file, adding "_NR" to the end of filename (name_1.ext, name_2.ext, ..)
// If 0, will OVERWRITE the existing file
define('RENAME_F', 1);
$re = '';
if(isset($_FILES['upload']) && strlen($_FILES['upload']['name']) >1) {
define('F_NAME', preg_replace('/\.(.+?)$/i', '', basename($_FILES['upload']['name']))); //get filename without extension
// get protocol and host name to send the absolute image path to CKEditor
$protocol = !empty($_SERVER['HTTPS']) ? 'https://' : 'http://';
$site = $protocol. $_SERVER['SERVER_NAME'] .'/';
$sepext = explode('.', strtolower($_FILES['upload']['name']));
$type = end($sepext); // gets extension
$upload_dir = in_array($type, $imgset['type']) ? $upload_dir['img'] : $upload_dir['audio'];
$upload_dir = trim($upload_dir, '/') .'/';
//checkings for image or audio
if(in_array($type, $imgset['type'])){
list($width, $height) = getimagesize($_FILES['upload']['tmp_name']); // image width and height
if(isset($width) && isset($height)) {
if($width > $imgset['maxwidth'] || $height > $imgset['maxheight']) $re .= '\\n Width x Height = '. $width .' x '. $height .' \\n The maximum Width x Height must be: '. $imgset['maxwidth']. ' x '. $imgset['maxheight'];
if($width < $imgset['minwidth'] || $height < $imgset['minheight']) $re .= '\\n Width x Height = '. $width .' x '. $height .'\\n The minimum Width x Height must be: '. $imgset['minwidth']. ' x '. $imgset['minheight'];
if($_FILES['upload']['size'] > $imgset['maxsize']*1000) $re .= '\\n Maximum file size must be: '. $imgset['maxsize']. ' KB.';
}
}
else if(in_array($type, $audioset['type'])){
if($_FILES['upload']['size'] > $audioset['maxsize']*1000) $re .= '\\n Maximum file size must be: '. $audioset['maxsize']. ' KB.';
}
else $re .= 'The file: '. $_FILES['upload']['name']. ' has not the allowed extension type.';
//set filename; if file exists, and RENAME_F is 1, set "img_name_I"
// $p = dir-path, $fn=filename to check, $ex=extension $i=index to rename
function setFName($p, $fn, $ex, $i){
if(RENAME_F ==1 && file_exists($p .$fn .$ex)) return setFName($p, F_NAME .'_'. ($i +1), $ex, ($i +1));
else return $fn .$ex;
}
$f_name = setFName($_SERVER['DOCUMENT_ROOT'] .'/'. $upload_dir, F_NAME, ".$type", 0);
$uploadpath = $_SERVER['DOCUMENT_ROOT'] .'/'. $upload_dir . $f_name; // full file path
// If no errors, upload the image, else, output the errors
if($re == '') {
if(move_uploaded_file($_FILES['upload']['tmp_name'], $uploadpath)) {
$CKEditorFuncNum = $_GET['CKEditorFuncNum'];
$url = $site. $upload_dir . $f_name;
$msg = F_NAME .'.'. $type .' successfully uploaded: \\n- Size: '. number_format($_FILES['upload']['size']/1024, 2, '.', '') .' KB';
$re = in_array($type, $imgset['type']) ? "window.parent.CKEDITOR.tools.callFunction($CKEditorFuncNum, '$url', '$msg')" //for img
: 'var cke_ob = window.parent.CKEDITOR; for(var ckid in cke_ob.instances) { if(cke_ob.instances[ckid].focusManager.hasFocus) break;} cke_ob.instances[ckid].insertHtml(\'<audio src="'. $url .'" controls></audio>\', \'unfiltered_html\'); alert("'. $msg .'"); var dialog = cke_ob.dialog.getCurrent(); dialog.hide();';
}
else $re = 'alert("Unable to upload the file")';
}
else $re = 'alert("'. $re .'")';
}
@header('Content-type: text/html; charset=utf-8');
echo '<script>'. $re .';</script>';
カスタムファイルのアップロードについて多くの研究開発を行った後、最終的にこのソリューションを見つけた後、Ck-editorのドキュメントは明確ではありません。それは私にとってはうまくいき、他の人にも役立つことを願っています.
于 2016-04-07T04:24:30.750 に答える