Wie können Sie einen benutzerdefinierten Dateibrowser / Uploader in CKEditor integrieren?

112

Die offizielle Dokumentation ist nicht klar - wie kann ein benutzerdefinierter Dateibrowser / Uploader korrekt in CKEditor integriert werden? (v3 - nicht FCKEditor)

ckeditor Don Jones
quelle

Antworten:

175

Registrieren Sie zunächst Ihren benutzerdefinierten Browser / Uploader, wenn Sie CKEditor instanziieren. Sie können verschiedene URLs für einen Bildbrowser im Vergleich zu einem allgemeinen Dateibrowser festlegen.

<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>

Ihr benutzerdefinierter Code erhält einen GET-Parameter namens CKEditorFuncNum. Speichern Sie es - das ist Ihre Rückruffunktion. Nehmen wir an, Sie setzen es ein $callback.

Wenn jemand eine Datei auswählt, führen Sie dieses JavaScript aus, um CKEditor darüber zu informieren, welche Datei ausgewählt wurde:

window.opener.CKEDITOR.tools.callFunction(<?php echo $callback; ?>,url)

Wobei "url" die URL der ausgewählten Datei ist. Ein optionaler dritter Parameter kann Text sein, der in einem Standard-Warndialog angezeigt werden soll, z. B. "unzulässige Datei" oder ähnliches. Setzen Sie die URL auf eine leere Zeichenfolge, wenn der dritte Parameter eine Fehlermeldung ist.

Auf der Registerkarte "Upload" von CKEditor wird eine Datei im Feld "Upload" gesendet - in PHP an $ _FILES ['upload']. CKEditor möchte, dass Ihr Server einen vollständigen JavaScript-Block ausgibt:

$output = '<html><body><script type="text/javascript">window.parent.CKEDITOR.tools.callFunction('.$callback.', "'.$url.'","'.$msg.'");</script></body></html>';
echo $output;

Auch hier müssen Sie den Rückrufparameter, die URL der Datei und optional eine Nachricht angeben. Wenn die Nachricht eine leere Zeichenfolge ist, wird nichts angezeigt. Wenn die Nachricht ein Fehler ist, sollte die URL eine leere Zeichenfolge sein.

Die offizielle CKEditor-Dokumentation ist in all dem unvollständig, aber wenn Sie die obigen Anweisungen befolgen, funktioniert sie wie ein Champion.

Don Jones
quelle
28
Ich kann nicht glauben, dass die Entwicklerdokumentation für diesen Prozess so spärlich ist. Vielen Dank für das Ausfüllen der Details.
4
Das war eine tolle Info! Warten Sie besser als die offizielle Dokumentation.
Jon Romero
2
Vielen Dank! Aber es ist CKEditorFunNum, nicht Name = P
emzero
2
@emzero, ich denke, es war wahrscheinlich CKEditorFuncName, vielleicht verwendet CKEditor jetzt mehr CKEditorFuncNum. Auf jeden Fall ist die Antwort genau richtig!
Rosdi Kasim
1
Wenn Sie die Registerkarte "Hochladen" ausblenden müssen, damit Sie nur das Hochladen von Bildern zulassen, können Sie Folgendes verwenden: CKEDITOR.on ('dialogDefinition', function (ev) {// Den Dialognamen und seine Definition aus dem Ereignis / übernehmen / data. var dialogName = ev.data.name; var dialogDefinition = ev.data.definition; // Überprüfen Sie, ob die Definition aus dem Dialog stammt, // an dem wir interessiert sind (Dialogfeld Link und Bild). if (dialogName = = 'link' || dialogName == 'image') {// Registerkarte Upload entfernen dialogDefinition.removeContents ('Upload');}});
Kristijan
10

Ich habe den Lernprozess einfach selbst durchlaufen. Ich habe es herausgefunden, aber ich stimme zu, dass die Dokumentation so geschrieben ist, dass sie mich irgendwie einschüchtert. Der große "Aha" -Moment für mich war zu verstehen, dass CKeditor zum Surfen lediglich ein neues Fenster öffnet und einige Parameter in der URL bereitstellt. Sie können zusätzliche Parameter hinzufügen. Beachten Sie jedoch, dass Sie für Ihre Werte encodeURIComponent () verwenden müssen.

Ich rufe den Browser und den Uploader mit an

CKEDITOR.replace( 'body',  
{  
    filebrowserBrowseUrl: 'browse.php?type=Images&dir=' +  
        encodeURIComponent('content/images'),  
    filebrowserUploadUrl: 'upload.php?type=Files&dir=' +  
        encodeURIComponent('content/images')  
}

Für den Browser verwenden Sie im geöffneten Fenster (browse.php) php & js, um eine Liste mit Auswahlmöglichkeiten bereitzustellen, und rufen dann auf Ihrem bereitgestellten Onclick-Handler eine CKeditor-Funktion mit zwei Argumenten auf, der URL / dem Pfad zum ausgewählten Bild und CKEditorFuncNum bereitgestellt von CKeditor in der URL:

function myOnclickHandler(){  
//..    
    window.opener.CKEDITOR.tools.callFunction(<?php echo $_GET['CKEditorFuncNum']; ?>, pathToImage);  
    window.close();
}

In ähnlicher Weise ruft der Uploader einfach die von Ihnen angegebene URL auf, z. B. upload.php , und liefert erneut $ _GET ['CKEditorFuncNum']. Das Ziel ist ein Iframe. Nachdem Sie die Datei aus $ _FILES gespeichert haben, geben Sie Ihr Feedback wie folgt an CKeditor weiter:

$funcNum = $_GET['CKEditorFuncNum'];  
exit("<script>window.parent.CKEDITOR.tools.callFunction($funcNum, '$filePath', '$errorMessage');</script>");

Unten finden Sie ein einfach zu verstehendes benutzerdefiniertes Browserskript. Während Benutzer nicht auf dem Server navigieren können, können Sie beim Aufrufen des Browsers angeben, aus welchem ​​Verzeichnis Bilddateien abgerufen werden sollen.

Es ist alles eher eine einfache Codierung, daher sollte es in allen relativ modernen Browsern funktionieren.

CKeditor öffnet lediglich ein neues Fenster mit der angegebenen 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') 
        });

// ========= vollständiger Code unten für browse.php

<?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>
Tim
quelle
9

Ich habe eine Weile versucht, dies herauszufinden, und hier ist, was ich getan habe. Ich habe es sehr einfach aufgeschlüsselt, da ich es brauchte.

Geben Sie direkt unter Ihrem ckeditor-Textbereich die Upload-Datei wie folgt ein >>>>

<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>

'und dann füge deine Upload-Datei hinzu, hier ist meine, die in ASP geschrieben ist. Wenn Sie PHP usw. verwenden, ersetzen Sie einfach den ASP durch Ihr Upload-Skript, stellen Sie jedoch sicher, dass die Seite dasselbe ausgibt.

<%@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
%>
Elliott Benzle
quelle
8

Dies ist der Ansatz, den ich verwendet habe. Es ist ganz einfach und funktioniert gut.

Im Stammverzeichnis des CK-Editors befindet sich eine Datei mit dem Namen config.js

Ich habe dies hinzugefügt (Sie benötigen das Querystring-Zeug nicht, dies ist nur für unseren Dateimanager). Ich habe auch einige Skins und Änderungen der angezeigten Standardschaltflächen hinzugefügt:

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']
    ];

};

Dann nennt unser Dateimanager Folgendes:

opener.SetUrl('somefilename');
ScottE
quelle
7

Ein Artikel bei zerokspot mit dem Titel Benutzerdefinierte Dateibrowser-Rückrufe in CKEditor 3.0 behandelt dies. Der relevanteste Abschnitt wird unten zitiert:

Wenn Sie eine Datei ausgewählt haben, müssen Sie im Dateibrowser lediglich diesen Code mit der richtigen Rückrufnummer (normalerweise 1) und der URL der ausgewählten Datei aufrufen:

window.opener.CKEDITOR.tools.callFunction(CKEditorFuncNum,url);

Für den Schnell-Uploader ist der Prozess ziemlich ähnlich. Zuerst dachte ich, dass der Editor möglicherweise auf einen 200-HTTP-Rückkehrcode wartet und vielleicht in ein Header-Feld oder ähnliches schaut, um den Speicherort der hochgeladenen Datei zu bestimmen, aber dann bemerkte ich durch eine Firebug-Überwachung, dass all das passiert Nach einem Upload ist der folgende Code:

<script type="text/javascript">
window.parent.CKEDITOR.tools.callFunction(CKEditorFuncNum,url, errorMessage); </script>

Wenn der Upload fehlgeschlagen ist, setzen Sie die errorMessageZeichenfolge auf eine Länge ungleich Null, leeren Sie die URL und bei Erfolg umgekehrt.

Clops
quelle
1
Sie hätten die URL -> zerokspot.com/weblog/2009/09/09/…
Jon Romero
1
So sehr ich es auch schätze, dass Sie mein Blog gefunden haben, Clops, Sie hätten zumindest wieder darauf verlinken oder einfach nur darauf verlinken können, anstatt meinen Blog-Beitrag zu kopieren / einzufügen.
Horst Gutmann
1
@ Jon & @ Horst: Danke, dass du darauf hingewiesen hast. Wenn ich etwas Relevantes herausschneide, das wieder eingesetzt werden muss, lass es mich einfach wissen.
Bill the Lizard
4

Registrieren Sie zunächst Ihren benutzerdefinierten Browser / Uploader, wenn Sie CKEditor instanziieren. 

<script type="text/javascript">
CKEDITOR.replace('content', {
    filebrowserUploadUrl: "Upload File Url",//http://localhost/phpwork/test/ckFileUpload.php
    filebrowserWindowWidth  : 800,
    filebrowserWindowHeight : 500
});
</script>

Code für die Upload-Datei (ckFileUpload.php) und legen Sie die Upload-Datei im Stammverzeichnis Ihres Projekts ab.

// 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>';

Die Dokumentation zum Ck-Editor ist nicht klar, nachdem ich eine Menge F & E für das Hochladen von benutzerdefinierten Dateien durchgeführt habe. Endlich habe ich diese Lösung gefunden. Es funktioniert für mich und ich hoffe, es wird auch anderen helfen.

Rahul Sharma
quelle
1

Für Leute, die sich über eine Servlet / JSP-Implementierung wundern, gehen Sie wie folgt vor ... Ich werde das Upload-Bild auch unten erläutern.

1) Stellen Sie zunächst sicher, dass Sie den Dateibrowser und die Uploadimage- Variable zu Ihrer Datei config.js hinzugefügt haben . Machen Sie auch die haben upload und Dateibrowser Ordner innerhalb der Plug - in zu Ordner.

2) In diesem Teil bin ich gestolpert:

In der Dokumentation der Ckeditor-Website heißt es, dass Sie diese beiden Methoden anwenden müssen:

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();
}

Was sie nicht erwähnen, ist, dass sich diese Methoden auf einer anderen Seite befinden müssen und nicht auf der Seite, auf der Sie auf die Schaltfläche Server durchsuchen klicken .

Wenn Sie also ckeditor in page editor.jsp initialisiert haben, müssen Sie einen Dateibrowser (mit grundlegendem HTML / css / javascript) auf der Seite filebrowser.jsp erstellen .

editor.jsp (alles, was Sie brauchen, ist dies in Ihrem Skript-Tag) Diese Seite öffnet filebrowser.jsp in einem Mini-Fenster, wenn Sie auf die Schaltfläche Server durchsuchen klicken.

CKEDITOR.replace( 'editor', {
    filebrowserBrowseUrl: '../filebrowser.jsp', //jsp page with jquery to call servlet and get image files to view
    filebrowserUploadUrl: '../UploadImage', //servlet

});

filebrowser.jsp (ist der von Ihnen erstellte benutzerdefinierte Dateibrowser, der die oben genannten Methoden enthält)

<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) Das 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

Gehen Sie zurück zu Ihrer config.js-Datei für ckeditor und fügen Sie die folgende Zeile hinzu:

//https://docs.ckeditor.com/ckeditor4/latest/guide/dev_file_upload.html
config.uploadUrl = '/UploadImage';

Dann können Sie auch Dateien ziehen und ablegen:

   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);
                    }
                }

Und das ist alles Leute. Hoffe es hilft jemandem.

Jonathan Laliberte
quelle