Jak możesz zintegrować niestandardową przeglądarkę / przesyłanie plików z CKEditor?

112

Oficjalna dokumentacja jest mniej niż jasna - jaki jest prawidłowy sposób integracji niestandardowej przeglądarki plików / programu do przesyłania plików z CKEditor? (v3 - nie FCKEditor)

ckeditor Don Jones
źródło

175

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.

Don Jones
źródło

29

Nie mogę uwierzyć, że dokumentacja deweloperska dotycząca tego procesu jest tak rzadka. Dziękuję za wypełnienie szczegółów.

4

To była świetna informacja! Czekaj lepiej niż oficjalna dokumentacja.

Jon Romero,

2

Wielkie dzięki! Ale to CKEditorFunNum, a nie Name = P

emzero

2

@emzero, myślę, że to prawdopodobnie CKEditorFuncName, być może im więcej CKEditor używa teraz CKEditorFuncNum. W każdym razie odpowiedź jest na miejscu!

Rosdi Kasim,

1

Jeśli chcesz ukryć zakładkę „Prześlij”, aby zezwolić tylko na przesyłanie obrazu, możesz użyć: CKEDITOR.on ('dialogDefinition', function (ev) {// Weź nazwę okna dialogowego i jego definicję ze zdarzenia / / data. var dialogName = ev.data.name; var dialogDefinition = ev.data.definition; // Sprawdź, czy definicja pochodzi z okna, które // nas interesuje (okno dialogowe Link and Image). if (dialogName = = 'link' || dialogName == 'image') {// usuń zakładkę Prześlij dialogDefinition.removeContents ('Prześlij');}});

Kristijan,

14

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.

Penuel
źródło

10

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

// ========= uzupełnij poniższy kod dla 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
źródło

9

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

elliott benzle
źródło

8

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

ScottE
źródło

7

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.

cykli
źródło

1

mogłeś podać adres URL -> zerokspot.com/weblog/2009/09/09/…

Jon Romero

1

O ile doceniam to, że znalazłeś mojego bloga, clops, mogłeś przynajmniej utworzyć do niego link lub w ogóle do niego link, zamiast kopiować / wklejać mój post na blogu.

Horst Gutmann

1

@Jon & @Horst: Dziękuję za zwrócenie uwagi. Jeśli usunę coś istotnego, co należy ponownie włożyć, daj mi znać.

Bill the Lizard,

4

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.

rahul sharma
źródło

1

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.

Jonathan Laliberte
źródło

Jak możesz zintegrować niestandardową przeglądarkę / przesyłanie plików z CKEditor?

Odpowiedzi:

// ========= uzupełnij poniższy kod dla Browse.php