Odpowiedzi:
Zacznij od zarejestrowania swojej niestandardowej przeglądarki / programu do przesyłania podczas tworzenia wystąpienia CKEditor. Możesz wyznaczyć inne adresy URL dla przeglądarki obrazów niż dla ogólnej przeglądarki plików.
<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>
Twój kod niestandardowy otrzyma parametr GET o nazwie CKEditorFuncNum. Zapisz to - to twoja funkcja zwrotna. Powiedzmy, że to włożyłeś $callback.
Kiedy ktoś wybierze plik, uruchom ten JavaScript, aby poinformować CKEditor, który plik został wybrany:
window.opener.CKEDITOR.tools.callFunction(<?php echo $callback; ?>,url)
Gdzie „url” to adres URL pliku, który wybrali. Opcjonalnym trzecim parametrem może być tekst, który ma być wyświetlany w standardowym oknie dialogowym ostrzeżenia, na przykład „nielegalny plik” lub coś podobnego. Ustaw adres URL na pusty ciąg, jeśli trzeci parametr jest komunikatem o błędzie.
Zakładka „upload” CKEditora prześle plik w polu „upload” - w PHP, który trafi do $ _FILES ['upload']. To, co CKEditor chce, aby Twój serwer wyświetlał, to pełny blok JavaScript:
$output = '<html><body><script type="text/javascript">window.parent.CKEDITOR.tools.callFunction('.$callback.', "'.$url.'","'.$msg.'");</script></body></html>';
echo $output;
Ponownie, musisz podać mu parametr wywołania zwrotnego, adres URL pliku i opcjonalnie wiadomość. Jeśli wiadomość jest pustym ciągiem, nic nie zostanie wyświetlone; jeśli komunikat jest błędem, adres URL powinien być pustym ciągiem.
Oficjalna dokumentacja CKEditor jest niekompletna w tym wszystkim, ale jeśli zastosujesz się do powyższego, będzie działać jak mistrz.
Opublikowałem jeden mały poradnik dotyczący integracji FileBrowser dostępnego w starym FCKEditor z CKEditor.
http://www.mixedwaves.com/2010/02/integrating-fckeditor-filemanager-in-ckeditor/
Zawiera instrukcje krok po kroku, jak to zrobić i jest całkiem proste. Mam nadzieję, że każdy, kto tego szuka, uzna ten poradnik za pomocny.
Po prostu sam przeszedłem przez proces uczenia się. Rozgryzłem to, ale zgadzam się, że dokumentacja jest napisana w sposób, który mnie onieśmielał. Wielkim momentem „aha” było dla mnie zrozumienie, że podczas przeglądania CKeditor tylko otwiera nowe okno i podaje kilka parametrów w adresie URL. Pozwala na dodanie dodatkowych parametrów, ale pamiętaj, że będziesz musiał użyć metody encodeURIComponent () na swoich wartościach.
Dzwonię do przeglądarki i przesyłającego
CKEDITOR.replace( 'body',
{
filebrowserBrowseUrl: 'browse.php?type=Images&dir=' +
encodeURIComponent('content/images'),
filebrowserUploadUrl: 'upload.php?type=Files&dir=' +
encodeURIComponent('content/images')
}
W przypadku przeglądarki , w otwartym oknie (Browse.php) używasz php & js, aby dostarczyć listę opcji, a następnie po dostarczonym programie obsługi onclick, wywołujesz funkcję CKeditor z dwoma argumentami, adresem url / ścieżką do wybranego obrazu i CKEditorFuncNum dostarczone przez CKeditor w adresie URL:
function myOnclickHandler(){
//..
window.opener.CKEDITOR.tools.callFunction(<?php echo $_GET['CKEditorFuncNum']; ?>, pathToImage);
window.close();
}
Podobnie, program do przesyłania po prostu wywołuje podany adres URL, np. Upload.php i ponownie dostarcza $ _GET ['CKEditorFuncNum']. Celem jest iframe, więc po zapisaniu pliku z $ _FILES przekazujesz swoją opinię do CKeditor w następujący sposób:
$funcNum = $_GET['CKEditorFuncNum'];
exit("<script>window.parent.CKEDITOR.tools.callFunction($funcNum, '$filePath', '$errorMessage');</script>");
Poniżej znajduje się prosty do zrozumienia niestandardowy skrypt przeglądarki. Chociaż nie pozwala użytkownikom poruszać się po serwerze, umożliwia wskazanie katalogu, z którego mają pobierać pliki obrazów podczas wywoływania przeglądarki.
To dość podstawowe kodowanie, więc powinno działać we wszystkich stosunkowo nowoczesnych przeglądarkach.
CKeditor po prostu otwiera nowe okno z podanym adresem 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>
Spędziłem chwilę próbując to rozgryźć i oto co zrobiłem. Złożyłem to bardzo prosto, bo właśnie tego potrzebowałem.
Bezpośrednio pod obszarem tekstowym ckeditor wprowadź plik do przesłania w ten sposób >>>>
<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>
'a następnie dodaj plik do przesłania, oto mój, który jest napisany w ASP. Jeśli używasz PHP itp., Po prostu zastąp ASP swoim skryptem wysyłania, ale upewnij się, że strona wyświetla to samo.
<%@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
%>
To jest podejście, którego użyłem. Jest to dość proste i działa dobrze.
W katalogu głównym edytora CK znajduje się plik o nazwie config.js
Dodałem to (nie potrzebujesz kwerend, to jest tylko dla naszego menedżera plików). Dołączyłem również trochę skórowania i zmiany pokazanych domyślnych przycisków:
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']
];
};
Następnie nasz menedżer plików nazywa to:
opener.SetUrl('somefilename');
Artykuł na zerokspocie zatytułowany Niestandardowe wywołania zwrotne przeglądarki plików w CKEditor 3.0 rozwiązuje ten problem. Najbardziej odpowiednią sekcję zacytowano poniżej:
Więc wszystko, co musisz zrobić z przeglądarki plików, gdy masz wybrany plik, to wywołać ten kod z odpowiednim numerem wywołania zwrotnego (zwykle 1) i adresem URL wybranego pliku:
window.opener.CKEDITOR.tools.callFunction(CKEditorFuncNum,url);W przypadku szybkiego ładowania proces jest dość podobny. Na początku myślałem, że edytor może nasłuchiwać kodu powrotu 200 HTTP i być może zajrzeć do jakiegoś pola nagłówka lub czegoś podobnego, aby określić lokalizację przesłanego pliku, ale potem - poprzez monitorowanie Firebuga - zauważyłem, że to wszystko się dzieje po przesłaniu jest następujący kod:
<script type="text/javascript">
window.parent.CKEDITOR.tools.callFunction(CKEditorFuncNum,url, errorMessage);</script>Jeśli przesyłanie nie powiodło się, ustaw
errorMessageciąg znaków o niezerowej długości i opróżnij adres URL, a po pomyślnym zakończeniu na odwrót.
Zacznij od zarejestrowania swojej niestandardowej przeglądarki / programu do przesyłania podczas tworzenia wystąpienia CKEditor.
<script type="text/javascript">
CKEDITOR.replace('content', {
filebrowserUploadUrl: "Upload File Url",//http://localhost/phpwork/test/ckFileUpload.php
filebrowserWindowWidth : 800,
filebrowserWindowHeight : 500
});
</script>
Kod pliku do przesłania (ckFileUpload.php) i umieść plik do przesłania w katalogu głównym projektu.
// 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>';
Dokumentacja edytora Ck nie jest jasna po wykonaniu wielu prac badawczo-rozwojowych w celu przesłania niestandardowych plików w końcu znalazłem to rozwiązanie. To działa dla mnie i mam nadzieję, że będzie pomocne również dla innych.
Dla osób, które zastanawiają się nad implementacją Servlet / JSP, oto jak to zrobić ... Poniżej również wyjaśnię przesyłanie obrazu.
1) Najpierw upewnij się, że dodałeś przeglądarkę plików i zmienną uploadimage do pliku config.js. Upewnij się, że masz również folder uploadimage i filebrowser w folderze wtyczek.
2) Ta część mnie potknęła:
Dokumentacja witryny Ckeditor mówi, że musisz użyć tych dwóch metod:
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();
}
Nie wspominają o tym, że te metody muszą znajdować się na innej stronie, a nie na stronie, na której klikasz przycisk przeglądania serwera .
Więc jeśli masz ckeditor zainicjowany w page editor.jsp , musisz stworzyć przeglądarkę plików (z podstawowym html / css / javascript) na stronie filebrowser.jsp .
editor.jsp (wszystko czego potrzebujesz to to w swoim tagu skryptu) Ta strona otworzy filebrowser.jsp w mini oknie po kliknięciu przycisku przeglądania serwera.
CKEDITOR.replace( 'editor', {
filebrowserBrowseUrl: '../filebrowser.jsp', //jsp page with jquery to call servlet and get image files to view
filebrowserUploadUrl: '../UploadImage', //servlet
});
filebrowser.jsp (to niestandardowa przeglądarka plików, którą zbudowałeś, która będzie zawierać metody wymienione powyżej)
<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) Serwlet FileBrowser
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) Serwlet UploadImage
Wróć do pliku config.js dla ckeditor i dodaj następujący wiersz:
//https://docs.ckeditor.com/ckeditor4/latest/guide/dev_file_upload.html
config.uploadUrl = '/UploadImage';
Następnie możesz również przeciągać i upuszczać pliki:
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);
}
}
I to wszystko ludzie. Mam nadzieję, że to komuś pomoże.