উত্তর:
আপনি যখন CKEditor ইনস্ট্যান্ট করবেন তখন আপনার কাস্টম ব্রাউজার / আপলোডারটিকে নিবন্ধভুক্ত করে শুরু করুন। আপনি একটি সাধারণ ব্রাউজার বনাম কোনও চিত্র ব্রাউজারের জন্য বিভিন্ন ইউআরএল নির্ধারণ করতে পারেন।
<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 নামে একটি জিইটি প্যারামিটার গ্রহণ করবে। এটি সংরক্ষণ করুন - এটি আপনার কলব্যাক ফাংশন। যাক আপনি এটি putোকানো $callback।
কেউ যখন কোনও ফাইল নির্বাচন করেন, তখন সি কেইডিটর কে জানাতে কোন ফাইলটি নির্বাচন করা হয়েছে তা জানাতে এই জাভাস্ক্রিপ্ট চালান:
window.opener.CKEDITOR.tools.callFunction(<?php echo $callback; ?>,url)
"Url" হ'ল তারা তোলা ফাইলটির URL। একটি thirdচ্ছিক তৃতীয় প্যারামিটার এমন পাঠ্য হতে পারে যা আপনি একটি স্ট্যান্ডার্ড সতর্কতা সংলাপে প্রদর্শন করতে চান, যেমন "অবৈধ ফাইল" বা কিছু। তৃতীয় প্যারামিটারটি একটি ত্রুটি বার্তা হলে url একটি খালি স্ট্রিংয়ে সেট করুন।
সি কেইডিটরের "আপলোড" ট্যাব ফিল্ড "আপলোড" - পিএইচপি-তে একটি ফাইল জমা দেবে, এটি $ _FILES ['আপলোড'] এ যায়। CKEditor আপনার সার্ভারটিকে আউটপুট দিতে চায় এটি একটি সম্পূর্ণ জাভাস্ক্রিপ্ট ব্লক:
$output = '<html><body><script type="text/javascript">window.parent.CKEDITOR.tools.callFunction('.$callback.', "'.$url.'","'.$msg.'");</script></body></html>';
echo $output;
আবার, আপনার এটি কলব্যাক প্যারামিটার, ফাইলের URL এবং allyচ্ছিকভাবে একটি বার্তা দেওয়া দরকার। বার্তাটি যদি খালি স্ট্রিং হয় তবে কিছুই প্রদর্শিত হবে না; যদি বার্তাটি একটি ত্রুটি হয় তবে url একটি খালি স্ট্রিং হওয়া উচিত।
সরকারী সি কেইডিটর ডকুমেন্টেশন এই সমস্তগুলিতে অসম্পূর্ণ, তবে আপনি যদি উপরের বিষয়টি অনুসরণ করেন তবে এটি চ্যাম্পের মতো কাজ করবে।
পুরানো FCKEditor এ উপলব্ধ ফাইলব্রোজারকে CKEditor এ সংহত করার বিষয়ে একটি ছোট টিউটোরিয়াল পোস্ট করেছি।
http://www.mixedwaves.com/2010/02/integrating-fckeditor-filemanager-in-ckeditor/
এটিতে এটির জন্য ধাপে ধাপে নির্দেশনা রয়েছে এবং এটি খুব সহজ। আমি আশা করি এর অনুসন্ধানে যে কেউ এই টিউটোরিয়ালটি সহায়ক বলে মনে করবে।
আমি নিজে শিখার প্রক্রিয়াটি পেরিয়েছি। আমি এটি বের করেছিলাম, তবে আমি সম্মত হই যে ডকুমেন্টেশনটি এমনভাবে লেখা হয়েছিল যা আমার কাছে ভয় দেখানোর মতো ছিল। আমার জন্য বড় "আহা" মুহুর্তটি বুঝতে পেরেছিল যে ব্রাউজিংয়ের জন্য, সমস্ত সি কেডিটর একটি নতুন উইন্ডো খোলার এবং ইউআরএলে কয়েকটি পরামিতি সরবরাহ করে। এটি আপনাকে অতিরিক্ত প্যারামিটার যুক্ত করার অনুমতি দেয় তবে আপনাকে পরামর্শ দেওয়া উচিত যে আপনার মানগুলিতে এনকোডিউআরআইসি কম্পোনেন্ট () ব্যবহার করতে হবে।
আমি সাথে ব্রাউজার এবং আপলোডার কল
CKEDITOR.replace( 'body',
{
filebrowserBrowseUrl: 'browse.php?type=Images&dir=' +
encodeURIComponent('content/images'),
filebrowserUploadUrl: 'upload.php?type=Files&dir=' +
encodeURIComponent('content/images')
}
জন্য ব্রাউজার , খোলা উইন্ডো (browse.php) আপনার onclick সরবরাহকৃত হ্যান্ডলার উপর তারপর পিএইচপি ও JS ব্যবহার বিকল্পের তালিকা সরবরাহ এবং, আপনি দুটি আর্গুমেন্ট, URL / পথ সঙ্গে একটি CKeditor ফাংশন নির্বাচিত চিত্রে কল এবং ইউ কে-তে ইউকে-তে CKeditor দ্বারা সরবরাহ করা CKEditorFuncNum:
function myOnclickHandler(){
//..
window.opener.CKEDITOR.tools.callFunction(<?php echo $_GET['CKEditorFuncNum']; ?>, pathToImage);
window.close();
}
সিমারলি, আপলোডার কেবল আপনার সরবরাহ করা ইউআরএলকে কল করুন, যেমন, আপলোড.এফপি এবং আবার সরবরাহ করে $ _GET ['CKEditorFuncNum']। টার্গেটটি একটি আইফ্রেম তাই, আপনি $ _FILES থেকে ফাইলটি সংরক্ষণ করার পরে আপনি নিজের প্রতিক্রিয়া সি কেডিটারের কাছে এভাবে পাঠিয়ে দিন:
$funcNum = $_GET['CKEditorFuncNum'];
exit("<script>window.parent.CKEDITOR.tools.callFunction($funcNum, '$filePath', '$errorMessage');</script>");
নীচে কাস্টম ব্রাউজার স্ক্রিপ্ট বোঝার জন্য একটি সহজ। যদিও এটি ব্যবহারকারীদের সার্ভারে চলাচল করতে দেয় না, এটি আপনাকে ব্রাউজারে কল করার সময় কোন ডিরেক্টরি থেকে চিত্র ফাইলগুলি টানতে হবে তা নির্দেশ করতে দেয়।
এটি সমস্ত বরং মূল কোডিং তাই এটি তুলনামূলকভাবে আধুনিক ব্রাউজারগুলিতে কাজ করা উচিত।
CKeditor কেবলমাত্র url সরবরাহ করে একটি নতুন উইন্ডো খুলবে op
/*
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>
আমি এটিকে বের করার চেষ্টা করার জন্য কিছুটা সময় ব্যয় করেছি এবং আমি যা করেছি তা এখানে। আমি এটি খুব সহজভাবে ভেঙে ফেলেছি যা আমার প্রয়োজন ছিল।
সরাসরি আপনার সেক্টিটার পাঠ্যের ক্ষেত্রের নীচে, আপলোড ফাইলটি এই >>>> লিখুন
<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>
'এবং তারপরে আপনার আপলোড ফাইল যুক্ত করুন, এটি আমার যা এএসপিতে লেখা আছে। আপনি যদি পিএইচপি ইত্যাদি ব্যবহার করেন তবে আপনার আপলোড স্ক্রিপ্টটি কেবল এএসপিকে প্রতিস্থাপন করুন তবে নিশ্চিত করুন যে পৃষ্ঠাটি একই জিনিসটি আউটপুট দেয়।
<%@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
%>
এটিই আমি ব্যবহার করেছি। এটি বেশ সোজা, এবং ঠিক কাজ করে।
সিকে সম্পাদক রুট ডিরেক্টরিতে কনফিগারেশন নামের একটি ফাইল রয়েছে
আমি এটি যুক্ত করেছি (আপনার ক্যোরিস্টিং স্টাফের দরকার নেই, এটি কেবল আমাদের ফাইল ম্যানেজারের জন্য)। আমি দেখানো ডিফল্ট বোতামগুলির কিছু ত্বক ও পরিবর্তন অন্তর্ভুক্ত করেছি:
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');
সিকিউডিটার 3.0.০-তে কাস্টম ফাইলব্রোজার কলব্যাক্স শিরোনামে জিরোস্পট-এ একটি নিবন্ধ এটি পরিচালনা করে। সর্বাধিক প্রাসঙ্গিক বিভাগটি নীচে উদ্ধৃত করা হয়েছে:
সুতরাং আপনার যখন ফাইল নির্বাচন করা হবে তখন ফাইল ব্রাউজার থেকে আপনাকে যা করতে হবে তা হ'ল ডান কলব্যাক নম্বর (সাধারণত 1) এবং নির্বাচিত ফাইলটির URL সহ এই কোডটি কল করা:
window.opener.CKEDITOR.tools.callFunction(CKEditorFuncNum,url);দ্রুত-আপলোডারের জন্য প্রক্রিয়াটি বেশ অনুরূপ। প্রথমে আমি ভেবেছিলাম সম্পাদক সম্ভবত 200 টি এইচটিপি রিটার্ন কোড শুনছেন এবং সম্ভবত আপলোড করা ফাইলটির অবস্থান নির্ধারণের জন্য কোনও শিরোলেখের ক্ষেত্র বা এর মতো কোনও কিছু সন্ধান করবেন, তবে তারপরে - কিছু ফায়ারব্যাগ পর্যবেক্ষণের মাধ্যমে - আমি লক্ষ্য করেছি যে যা ঘটেছিল তা ঘটে all একটি আপলোডের পরে নিম্নলিখিত কোড:
<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) এবং আপলোড ফাইলটি আপনার প্রকল্পের মূল ডীরের উপরে রাখুন।
// 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>';
কাস্টম ফাইল আপলোডের জন্য প্রচুর পরিমাণে গবেষণা ও উন্নয়ন করার পরে সিকে-এডিটর ডকুমেন্টেশন পরিষ্কার হয় না অবশেষে আমি এই সমাধানটি খুঁজে পেয়েছি। এটি আমার পক্ষে কাজ করে এবং আমি আশা করি এটি অন্যদের জন্যও সহায়ক হবে।
সার্ভলেট / জেএসপি বাস্তবায়নের বিষয়ে ভাবছেন এমন লোকদের জন্য আপনি কীভাবে এটি চালিয়ে যাচ্ছেন তা এখানে ... আমি নীচে আপলোডমেজটিও ব্যাখ্যা করব।
1) প্রথমে নিশ্চিত হয়ে নিন যে আপনি নিজের কনফিগ.জেএস ফাইলটিতে ফাইল ব্রাউজার এবং আপলোডমেজ ভেরিয়েবল যুক্ত করেছেন । প্লাগিনস ফোল্ডারের ভিতরে আপনার আপলোডমিজ এবং ফাইলব্রোজার ফোল্ডারটিও তৈরি করুন ।
2) এই অংশটি যেখানে এটি আমাকে ছড়িয়ে দিয়েছে:
সেক্টিটার ওয়েবসাইট ডকুমেন্টেশন বলছে আপনাকে এই দুটি পদ্ধতি ব্যবহার করতে হবে:
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();
}
তারা যা উল্লেখ করে না তা হ'ল এই পদ্ধতিগুলি অন্য পৃষ্ঠায় থাকতে হবে এবং আপনি যে পৃষ্ঠা থেকে ব্রাউজার সার্ভার বোতামটি ক্লিক করছেন সে পৃষ্ঠায় নয় ।
সুতরাং আপনি যদি পেজ এডিটর.জেএসপি-তে সিকিডিটার সূচনা করেছেন তবে আপনাকে পৃষ্ঠা ফাইলব্রোজার.জেএসপিতে একটি ফাইল ব্রাউজার তৈরি করতে হবে (বেসিক এইচটিএমএল / সিএসএস / জাভাস্ক্রিপ্ট সহ) ।
edit.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) ফাইল ব্রাউজার সার্লেট
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) আপলোড ইমেজ সার্লেট
সেকিডিটারের জন্য আপনার কনফিগার.জেএস ফাইলটিতে ফিরে যান এবং নিম্নলিখিত লাইনটি যুক্ত করুন:
//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);
}
}
এবং এটি সব ভাবেন। আশা করি এটি কাউকে সাহায্য করবে।