เอกสารอย่างเป็นทางการมีความชัดเจนน้อยกว่า - วิธีที่ถูกต้องในการรวมเบราว์เซอร์ / โปรแกรมอัปโหลดไฟล์แบบกำหนดเองกับ CKEditor คืออะไร (v3 - ไม่ใช่ FCKEditor)
เอกสารอย่างเป็นทางการมีความชัดเจนน้อยกว่า - วิธีที่ถูกต้องในการรวมเบราว์เซอร์ / โปรแกรมอัปโหลดไฟล์แบบกำหนดเองกับ CKEditor คืออะไร (v3 - ไม่ใช่ FCKEditor)
คำตอบ:
เริ่มต้นด้วยการลงทะเบียนเบราว์เซอร์ / ตัวอัปโหลดที่กำหนดเองของคุณเมื่อคุณสร้างอินสแตนซ์ 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>
โค้ดที่กำหนดเองของคุณจะได้รับพารามิเตอร์ GET ที่เรียกว่า CKEditorFuncNum บันทึก - นั่นคือฟังก์ชันโทรกลับของคุณ $callbackสมมติว่าคุณใส่ลงใน
เมื่อมีคนเลือกไฟล์ให้เรียกใช้ JavaScript นี้เพื่อแจ้ง CKEditor ว่าไฟล์ใดถูกเลือก:
window.opener.CKEDITOR.tools.callFunction(<?php echo $callback; ?>,url)
โดย "url" คือ URL ของไฟล์ที่เลือก พารามิเตอร์ที่สามซึ่งเป็นทางเลือกอาจเป็นข้อความที่คุณต้องการให้แสดงในกล่องโต้ตอบการแจ้งเตือนมาตรฐานเช่น "ไฟล์ผิดกฎหมาย" หรือบางอย่าง ตั้งค่า 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 ไม่สมบูรณ์ในทั้งหมดนี้ แต่ถ้าคุณทำตามข้างต้นมันจะทำงานเหมือนแชมป์
ฉันได้โพสต์บทช่วยสอนเล็ก ๆ เกี่ยวกับการรวม FileBrowser ที่มีอยู่ใน FCKEditor รุ่นเก่าเข้ากับ CKEditor
http://www.mixedwaves.com/2010/02/integrating-fckeditor-filemanager-in-ckeditor/
มันมีคำแนะนำทีละขั้นตอนสำหรับการทำเช่นนั้นและค่อนข้างง่าย ฉันหวังว่าใครก็ตามที่ค้นหาสิ่งนี้จะพบว่าบทช่วยสอนนี้มีประโยชน์
ฉันเพิ่งผ่านกระบวนการเรียนรู้ด้วยตัวเอง ฉันคิดออก แต่ฉันยอมรับว่าเอกสารนั้นเขียนในลักษณะที่ข่มขู่ฉัน ช่วงเวลา "aha" ที่ยิ่งใหญ่สำหรับฉันคือการเข้าใจว่าสำหรับการเรียกดู CKeditor ทั้งหมดจะเปิดหน้าต่างใหม่และระบุพารามิเตอร์บางอย่างใน url ช่วยให้คุณสามารถเพิ่มพารามิเตอร์เพิ่มเติมได้ แต่โปรดทราบว่าคุณจะต้องใช้ encodeURIComponent () กับค่าของคุณ
ฉันเรียกเบราว์เซอร์และผู้อัปโหลดด้วย
CKEDITOR.replace( 'body',
{
filebrowserBrowseUrl: 'browse.php?type=Images&dir=' +
encodeURIComponent('content/images'),
filebrowserUploadUrl: 'upload.php?type=Files&dir=' +
encodeURIComponent('content/images')
}
สำหรับเบราว์เซอร์ในหน้าต่างที่เปิดอยู่ (Browse.php) คุณใช้ php & js ในการจัดหารายการตัวเลือกจากนั้นบนตัวจัดการ onclick ที่คุณให้มาคุณเรียกใช้ฟังก์ชัน CKeditor โดยมีอาร์กิวเมนต์สองตัวคือ url / path ไปยังรูปภาพที่เลือกและ CKEditorFuncNum จัดทำโดย CKeditor ใน url:
function myOnclickHandler(){
//..
window.opener.CKEDITOR.tools.callFunction(<?php echo $_GET['CKEditorFuncNum']; ?>, pathToImage);
window.close();
}
Simarly ผู้อัปโหลดเพียงแค่เรียก url ที่คุณระบุเช่นupload.phpและอีกครั้งจ่าย $ _GET ['CKEditorFuncNum'] เป้าหมายคือ iframe ดังนั้นหลังจากที่คุณบันทึกไฟล์จาก $ _FILES คุณจะส่งความคิดเห็นของคุณไปยัง CKeditor ดังนี้:
$funcNum = $_GET['CKEditorFuncNum'];
exit("<script>window.parent.CKEDITOR.tools.callFunction($funcNum, '$filePath', '$errorMessage');</script>");
ด้านล่างนี้เป็นสคริปต์เบราว์เซอร์แบบกำหนดเองที่เข้าใจง่าย แม้ว่าจะไม่อนุญาตให้ผู้ใช้นำทางไปรอบ ๆ ในเซิร์ฟเวอร์ แต่ก็อนุญาตให้คุณระบุไดเร็กทอรีที่จะดึงไฟล์รูปภาพจากการเรียกเบราว์เซอร์
ทั้งหมดนี้เป็นการเข้ารหัสแบบพื้นฐานดังนั้นจึงควรใช้งานได้กับเบราว์เซอร์ที่ค่อนข้างทันสมัยทั้งหมด
CKeditor เพียงแค่เปิดหน้าต่างใหม่ด้วย url ที่ให้มา
/*
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>
ฉันใช้เวลาสักพักในการพยายามคิดออกและนี่คือสิ่งที่ฉันทำ ฉันทำลายมันลงอย่างเรียบง่ายเพราะนั่นคือสิ่งที่ฉันต้องการ
ใต้พื้นที่ข้อความ 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
%>
นี่คือแนวทางที่ฉันเคยใช้ ค่อนข้างตรงไปตรงมาและใช้งานได้ดี
ในไดเร็กทอรี root ของตัวแก้ไข 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');
บทความที่ zerokspot ชื่อCustom filebrowser callbacks ใน CKEditor 3.0จะจัดการสิ่งนี้ ส่วนที่เกี่ยวข้องมากที่สุดอยู่ด้านล่าง:
ดังนั้นสิ่งที่คุณต้องทำจากเบราว์เซอร์ไฟล์เมื่อคุณเลือกไฟล์คือเรียกรหัสนี้ด้วยหมายเลขโทรกลับที่ถูกต้อง (ปกติ 1) และ URL ของไฟล์ที่เลือก:
window.opener.CKEDITOR.tools.callFunction(CKEditorFuncNum,url);สำหรับผู้อัปโหลดอย่างรวดเร็วกระบวนการนี้ค่อนข้างคล้ายกัน ตอนแรกฉันคิดว่าตัวแก้ไขอาจกำลังรับฟังโค้ดส่งคืน HTTP 200 รายการและอาจมองเข้าไปในฟิลด์ส่วนหัวหรืออะไรทำนองนั้นเพื่อระบุตำแหน่งของไฟล์ที่อัปโหลด แต่จากการตรวจสอบ Firebug บางส่วนฉันสังเกตเห็นว่าทั้งหมดที่เกิดขึ้น หลังจากอัปโหลดเป็นรหัสต่อไปนี้:
<script type="text/javascript">
window.parent.CKEDITOR.tools.callFunction(CKEditorFuncNum,url, errorMessage);</script>หากการอัปโหลดล้มเหลวให้ตั้งค่า
errorMessageเป็นสตริงที่ไม่มีความยาวเป็นศูนย์และว่าง URL และในทางกลับกันเมื่อสำเร็จ
เริ่มต้นด้วยการลงทะเบียนเบราว์เซอร์ / ตัวอัปโหลดที่กำหนดเองของคุณเมื่อคุณสร้างอินสแตนซ์ 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) และวางไฟล์อัปโหลดบน root dir ของโครงการของคุณ
// 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 ไม่ชัดเจนหลังจากทำ R&D จำนวนมากสำหรับการอัปโหลดไฟล์ที่กำหนดเองในที่สุดฉันก็พบวิธีแก้ปัญหานี้ มันใช้ได้ผลสำหรับฉันและฉันหวังว่ามันจะเป็นประโยชน์กับคนอื่น ๆ เช่นกัน
สำหรับผู้ที่สงสัยเกี่ยวกับการใช้งาน Servlet / JSP ต่อไปนี้เป็นวิธีดำเนินการ ... ฉันจะอธิบายการอัพโหลดภาพด้านล่างด้วย
1) ขั้นแรกตรวจสอบให้แน่ใจว่าคุณได้เพิ่มfilebrowserและตัวแปรuploadimageลงในไฟล์ config.js แล้ว ทำให้คุณยังมีuploadimageและfilebrowserโฟลเดอร์ภายในปลั๊กอินโฟลเดอร์เกินไป
2) ส่วนนี้เป็นส่วนที่ทำให้ฉันสะดุด:
เอกสารเว็บไซต์ Ckeditor ระบุว่าคุณต้องใช้สองวิธีนี้:
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();
}
สิ่งที่พวกเขาไม่ได้กล่าวถึงก็คือว่าวิธีการเหล่านี้จะต้องมีในหน้าแตกต่างกันและไม่ได้หน้าเว็บที่คุณกำลังคลิกเซิร์ฟเวอร์ดูจากปุ่ม
ดังนั้นถ้าคุณได้CKEditor เริ่มต้นได้ใน editor.jsp หน้าแล้วคุณจะต้องสร้างเบราเซอร์ไฟล์ (กับพื้นฐาน HTML / CSS / JavaScript) ใน filebrowser.jsp
editor.jsp (สิ่งที่คุณต้องมีคือในแท็กสคริปต์ของคุณ) หน้านี้จะเปิด filebrowser.jsp ในหน้าต่างขนาดเล็กเมื่อคุณคลิกที่ปุ่มเรียกดูเซิร์ฟเวอร์
CKEDITOR.replace( 'editor', {
filebrowserBrowseUrl: '../filebrowser.jsp', //jsp page with jquery to call servlet and get image files to view
filebrowserUploadUrl: '../UploadImage', //servlet
});
filebrowser.jsp (เป็นเบราว์เซอร์ไฟล์แบบกำหนดเองที่คุณสร้างขึ้นซึ่งจะมีวิธีการที่กล่าวถึงข้างต้น)
<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
กลับไปที่ไฟล์ config.js ของคุณสำหรับ ckeditor และเพิ่มบรรทัดต่อไปนี้:
//https://docs.ckeditor.com/ckeditor4/latest/guide/dev_file_upload.html
config.uploadUrl = '/UploadImage';
จากนั้นคุณสามารถลากและวางไฟล์ได้ด้วย:
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);
}
}
และนั่นคือคนทั้งหมด หวังว่ามันจะช่วยใครบางคน