Jawaban:
Mulailah dengan mendaftarkan browser / pengunggah kustom Anda saat Anda membuat instantiate CKEditor. Anda dapat menentukan URL yang berbeda untuk browser gambar vs. browser file umum.
<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>
Kode khusus Anda akan menerima parameter GET yang disebut CKEditorFuncNum. Simpan - itulah fungsi panggilan balik Anda. Katakanlah Anda memasukkannya ke dalam $callback.
Ketika seseorang memilih file, jalankan JavaScript ini untuk memberi tahu CKEditor file mana yang dipilih:
window.opener.CKEDITOR.tools.callFunction(<?php echo $callback; ?>,url)
Di mana "url" adalah URL dari file yang mereka pilih. Parameter opsional ketiga bisa berupa teks yang ingin Anda tampilkan dalam dialog peringatan standar, seperti "file ilegal" atau sesuatu. Tetapkan url ke string kosong jika parameter ketiga adalah pesan kesalahan.
Tab "upload" CKEditor akan mengirimkan file di kolom "upload" - dalam PHP, yang nilainya adalah $ _FILES ['upload']. CKEditor ingin server Anda menghasilkan output adalah blok JavaScript lengkap:
$output = '<html><body><script type="text/javascript">window.parent.CKEDITOR.tools.callFunction('.$callback.', "'.$url.'","'.$msg.'");</script></body></html>';
echo $output;
Sekali lagi, Anda perlu memberikan parameter callback itu, URL file, dan secara opsional pesan. Jika pesan berupa string kosong, tidak ada yang akan ditampilkan; jika pesannya error, maka url harus berupa string kosong.
Dokumentasi resmi CKEditor tidak lengkap tentang semua ini, tetapi jika Anda mengikuti yang di atas, itu akan bekerja seperti juara.
Saya telah memposting satu tutorial kecil tentang mengintegrasikan FileBrowser yang tersedia di FCKEditor lama ke CKEditor.
http://www.mixedwaves.com/2010/02/integrating-fckeditor-filemanager-in-ckeditor/
Ini berisi petunjuk langkah demi langkah untuk melakukannya dan itu cukup sederhana. Saya harap siapa pun yang mencari ini akan menemukan tutorial ini bermanfaat.
Saya baru saja menjalani proses belajar sendiri. Saya mengetahuinya, tetapi saya setuju dokumentasinya ditulis dengan cara yang agak mengintimidasi saya. Momen "aha" yang besar bagi saya adalah memahami bahwa untuk browsing, yang dilakukan CKeditor hanyalah membuka jendela baru dan memberikan beberapa parameter di url. Ini memungkinkan Anda untuk menambahkan parameter tambahan tetapi perlu diketahui bahwa Anda perlu menggunakan encodeURIComponent () pada nilai Anda.
Saya menyebut browser dan pengunggah dengan
CKEDITOR.replace( 'body',
{
filebrowserBrowseUrl: 'browse.php?type=Images&dir=' +
encodeURIComponent('content/images'),
filebrowserUploadUrl: 'upload.php?type=Files&dir=' +
encodeURIComponent('content/images')
}
Untuk browser , di jendela yang terbuka (browse.php) Anda menggunakan php & js untuk memberikan daftar pilihan dan kemudian pada handler onclick yang Anda sediakan, Anda memanggil fungsi CKeditor dengan dua argumen, url / path ke gambar yang dipilih dan CKEditorFuncNum disediakan oleh CKeditor di url:
function myOnclickHandler(){
//..
window.opener.CKEDITOR.tools.callFunction(<?php echo $_GET['CKEditorFuncNum']; ?>, pathToImage);
window.close();
}
Demikian pula, pengunggah hanya memanggil url yang Anda berikan, mis., Upload.php , dan sekali lagi menyediakan $ _GET ['CKEditorFuncNum']. Targetnya adalah iframe jadi, setelah Anda menyimpan file dari $ _FILES Anda meneruskan umpan balik Anda ke CKeditor sebagai berikut:
$funcNum = $_GET['CKEditorFuncNum'];
exit("<script>window.parent.CKEDITOR.tools.callFunction($funcNum, '$filePath', '$errorMessage');</script>");
Di bawah ini adalah skrip browser khusus yang mudah dipahami. Meskipun tidak memungkinkan pengguna untuk menavigasi di dalam server, ini memungkinkan Anda untuk menunjukkan direktori mana yang akan menarik file gambar saat memanggil browser.
Itu semua pengkodean yang agak dasar sehingga harus berfungsi di semua browser yang relatif modern.
CKeditor hanya membuka jendela baru dengan url yang disediakan
/*
in CKeditor **use encodeURIComponent()** to add dir param to the filebrowserBrowseUrl property
Replace content/images with directory where your images are housed.
*/
CKEDITOR.replace( 'editor1', {
filebrowserBrowseUrl: '**browse.php**?type=Images&dir=' + encodeURIComponent('content/images'),
filebrowserUploadUrl: 'upload.php?type=Files&dir=' + encodeURIComponent('content/images')
});
<?php
header("Content-Type: text/html; charset=utf-8\n");
header("Cache-Control: no-cache, must-revalidate\n");
header("Expires: Sat, 26 Jul 1997 05:00:00 GMT");
// e-z params
$dim = 150; /* image displays proportionally within this square dimension ) */
$cols = 4; /* thumbnails per row */
$thumIndicator = '_th'; /* e.g., *image123_th.jpg*) -> if not using thumbNails then use empty string */
?>
<!DOCTYPE html>
<html>
<head>
<title>browse file</title>
<meta charset="utf-8">
<style>
html,
body {padding:0; margin:0; background:black; }
table {width:100%; border-spacing:15px; }
td {text-align:center; padding:5px; background:#181818; }
img {border:5px solid #303030; padding:0; verticle-align: middle;}
img:hover { border-color:blue; cursor:pointer; }
</style>
</head>
<body>
<table>
<?php
$dir = $_GET['dir'];
$dir = rtrim($dir, '/'); // the script will add the ending slash when appropriate
$files = scandir($dir);
$images = array();
foreach($files as $file){
// filter for thumbNail image files (use an empty string for $thumIndicator if not using thumbnails )
if( !preg_match('/'. $thumIndicator .'\.(jpg|jpeg|png|gif)$/i', $file) )
continue;
$thumbSrc = $dir . '/' . $file;
$fileBaseName = str_replace('_th.','.',$file);
$image_info = getimagesize($thumbSrc);
$_w = $image_info[0];
$_h = $image_info[1];
if( $_w > $_h ) { // $a is the longer side and $b is the shorter side
$a = $_w;
$b = $_h;
} else {
$a = $_h;
$b = $_w;
}
$pct = $b / $a; // the shorter sides relationship to the longer side
if( $a > $dim )
$a = $dim; // limit the longer side to the dimension specified
$b = (int)($a * $pct); // calculate the shorter side
$width = $_w > $_h ? $a : $b;
$height = $_w > $_h ? $b : $a;
// produce an image tag
$str = sprintf('<img src="%s" width="%d" height="%d" title="%s" alt="">',
$thumbSrc,
$width,
$height,
$fileBaseName
);
// save image tags in an array
$images[] = str_replace("'", "\\'", $str); // an unescaped apostrophe would break js
}
$numRows = floor( count($images) / $cols );
// if there are any images left over then add another row
if( count($images) % $cols != 0 )
$numRows++;
// produce the correct number of table rows with empty cells
for($i=0; $i<$numRows; $i++)
echo "\t<tr>" . implode('', array_fill(0, $cols, '<td></td>')) . "</tr>\n\n";
?>
</table>
<script>
// make a js array from the php array
images = [
<?php
foreach( $images as $v)
echo sprintf("\t'%s',\n", $v);
?>];
tbl = document.getElementsByTagName('table')[0];
td = tbl.getElementsByTagName('td');
// fill the empty table cells with data
for(var i=0; i < images.length; i++)
td[i].innerHTML = images[i];
// event handler to place clicked image into CKeditor
tbl.onclick =
function(e) {
var tgt = e.target || event.srcElement,
url;
if( tgt.nodeName != 'IMG' )
return;
url = '<?php echo $dir;?>' + '/' + tgt.title;
this.onclick = null;
window.opener.CKEDITOR.tools.callFunction(<?php echo $_GET['CKEditorFuncNum']; ?>, url);
window.close();
}
</script>
</body>
</html>
Saya menghabiskan beberapa saat mencoba mencari tahu yang satu ini dan inilah yang saya lakukan. Saya telah memecahnya dengan sangat sederhana karena itulah yang saya butuhkan.
Tepat di bawah text area ckeditor Anda, masukkan file upload seperti ini >>>>
<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>
'dan kemudian tambahkan file unggahan Anda, ini milik saya yang ditulis dalam ASP. Jika Anda menggunakan PHP, dll. Cukup ganti ASP dengan skrip unggahan Anda tetapi pastikan halaman mengeluarkan hal yang sama.
<%@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
%>
Ini adalah pendekatan yang saya gunakan. Ini cukup mudah, dan berfungsi dengan baik.
Di direktori root editor CK ada file bernama config.js
Saya menambahkan ini (Anda tidak memerlukan querystring, ini hanya untuk pengelola file kami). Saya juga menyertakan beberapa skinning dan perubahan tombol default yang ditunjukkan:
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']
];
};
Kemudian, manajer file kami menyebutnya:
opener.SetUrl('somefilename');
Sebuah artikel di zerokspot berjudul Custom filebrowser callbacks di CKEditor 3.0 menangani hal ini. Bagian yang paling relevan dikutip di bawah ini:
Jadi yang harus Anda lakukan dari browser file ketika Anda memilih file adalah memanggil kode ini dengan nomor panggilan balik yang benar (biasanya 1) dan URL file yang dipilih:
window.opener.CKEDITOR.tools.callFunction(CKEditorFuncNum,url);Untuk pengunggah cepat, prosesnya sangat mirip. Pada awalnya saya berpikir bahwa editor mungkin mendengarkan kode pengembalian HTTP 200 dan mungkin melihat ke beberapa bidang tajuk atau sesuatu seperti itu untuk menentukan lokasi file yang diunggah, tetapi kemudian - melalui beberapa pemantauan Firebug - saya perhatikan bahwa semua itu terjadi setelah diunggah adalah kode berikut:
<script type="text/javascript">
window.parent.CKEDITOR.tools.callFunction(CKEditorFuncNum,url, errorMessage);</script>Jika unggahan gagal, setel
errorMessageke beberapa string bukan panjang nol dan kosongkan url, dan sebaliknya jika berhasil.
Mulailah dengan mendaftarkan browser / pengunggah kustom Anda saat Anda membuat instantiate CKEditor.
<script type="text/javascript">
CKEDITOR.replace('content', {
filebrowserUploadUrl: "Upload File Url",//http://localhost/phpwork/test/ckFileUpload.php
filebrowserWindowWidth : 800,
filebrowserWindowHeight : 500
});
</script>
Kode untuk file unggahan (ckFileUpload.php) & letakkan file unggahan di direktori root proyek Anda.
// 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>';
Dokumentasi Ck-editor tidak jelas setelah melakukan banyak R&D untuk unggahan file kustom akhirnya saya menemukan solusi ini. Ini berhasil untuk saya dan saya harap ini akan membantu orang lain juga.
Untuk orang-orang yang bertanya-tanya tentang implementasi Servlet / JSP, inilah cara Anda melakukannya ... Saya juga akan menjelaskan uploadimage di bawah ini.
1) Pertama, pastikan Anda telah menambahkan variabel browser file dan uploadimage ke file config.js Anda. Pastikan Anda juga memiliki folder uploadimage dan filebrowser di dalam folder plugin juga.
2) Bagian ini membuat saya tersandung:
Dokumentasi situs web Ckeditor mengatakan Anda perlu menggunakan dua metode ini:
function getUrlParam( paramName ) {
var reParam = new RegExp( '(?:[\?&]|&)' + paramName + '=([^&]+)', 'i' );
var match = window.location.search.match( reParam );
return ( match && match.length > 1 ) ? match[1] : null;
}
function returnFileUrl() {
var funcNum = getUrlParam( 'CKEditorFuncNum' );
var fileUrl = 'https://patiliyo.com/wp-content/uploads/2017/07/ruyada-kedi-gormek.jpg';
window.opener.CKEDITOR.tools.callFunction( funcNum, fileUrl );
window.close();
}
Yang tidak mereka sebutkan adalah bahwa metode ini harus berada di halaman yang berbeda dan bukan halaman tempat Anda mengklik tombol browse server .
Jadi jika Anda telah menginisialisasi ckeditor di halaman editor.jsp maka Anda perlu membuat browser file (dengan html / css / javascript dasar) di halaman filebrowser.jsp .
editor.jsp (yang Anda butuhkan adalah ini di tag skrip Anda) Halaman ini akan membuka filebrowser.jsp di jendela mini saat Anda mengklik tombol jelajahi server.
CKEDITOR.replace( 'editor', {
filebrowserBrowseUrl: '../filebrowser.jsp', //jsp page with jquery to call servlet and get image files to view
filebrowserUploadUrl: '../UploadImage', //servlet
});
filebrowser.jsp (adalah file browser khusus yang Anda buat yang akan berisi metode yang disebutkan di atas)
<head>
<script src="../../ckeditor/ckeditor.js"></script>
</head>
<body>
<script>
function getUrlParam( paramName ) {
var reParam = new RegExp( '(?:[\?&]|&)' + paramName + '=([^&]+)', 'i' );
var match = window.location.search.match( reParam );
return ( match && match.length > 1 ) ? match[1] : null;
}
function returnFileUrl() {
var funcNum = getUrlParam( 'CKEditorFuncNum' );
var fileUrl = 'https://patiliyo.com/wp-content/uploads/2017/07/ruyada-kedi-gormek.jpg';
window.opener.CKEDITOR.tools.callFunction( funcNum, fileUrl );
window.close();
}
//when this window opens it will load all the images which you send from the FileBrowser Servlet.
getImages();
function getImages(){
$.get("../FileBrowser", function(responseJson) {
//do something with responseJson (like create <img> tags and update the src attributes)
});
}
//you call this function and pass 'fileUrl' when user clicks on an image that you loaded into this window from a servlet
returnFileUrl();
</script>
</body>
3) FileBrowser Servlet
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
Images i = new Images();
List<ImageObject> images = i.getImages(); //get images from your database or some cloud service or whatever (easier if they are in a url ready format)
String json = new Gson().toJson(images);
response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");
response.getWriter().write(json);
}
4) UploadImage Servlet
Kembali ke file config.js Anda untuk ckeditor dan tambahkan baris berikut:
//https://docs.ckeditor.com/ckeditor4/latest/guide/dev_file_upload.html
config.uploadUrl = '/UploadImage';
Kemudian Anda juga dapat menarik dan melepas file:
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
Images i = new Images();
//do whatever you usually do to upload your image to your server (in my case i uploaded to google cloud storage and saved the url in a database.
//Now this part is important. You need to return the response in json format. And it has to look like this:
// https://docs.ckeditor.com/ckeditor4/latest/guide/dev_file_upload.html
// response must be in this format:
// {
// "uploaded": 1,
// "fileName": "example.png",
// "url": "https://www.cats.com/example.png"
// }
String image = "https://www.cats.com/example.png";
ImageObject objResponse = i.getCkEditorObjectResponse(image);
String json = new Gson().toJson(objResponse);
response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");
response.getWriter().write(json);
}
}
Dan itu semua orang. Semoga bisa membantu seseorang.