Özel bir dosya tarayıcısını / yükleyicisini CKEditor ile nasıl entegre edebilirsiniz?


112

Resmi belgeler net değil - özel bir dosya tarayıcısını / yükleyicisini CKEditor ile entegre etmenin doğru yolu nedir? (v3 - FCKEditor değil)

Yanıtlar:


175

CKEditor'ı başlattığınızda özel tarayıcınızı / yükleyicinizi kaydettirerek başlayın. Bir resim tarayıcısı için genel bir dosya tarayıcısı için farklı URL'ler atayabilirsiniz.

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

Özel kodunuz CKEditorFuncNum adlı bir GET parametresi alacaktır. Kaydedin - bu sizin geri arama işlevinizdir. Diyelim ki içine koydunuz $callback.

Biri bir dosya seçtiğinde, CKEditor'a hangi dosyanın seçildiğini bildirmek için bu JavaScript'i çalıştırın:

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

"Url", seçtikleri dosyanın URL'sidir. İsteğe bağlı üçüncü bir parametre, "geçersiz dosya" veya başka bir şey gibi standart bir uyarı iletişim kutusunda görüntülenmesini istediğiniz metin olabilir. Üçüncü parametre bir hata mesajı ise url'yi boş bir dizeye ayarlayın.

CKEditor'ın "yükleme" sekmesi, PHP'de "yükleme" alanına bir dosya gönderecektir - bu dosya $ _FILES ['yükleme'] bölümüne gider. CKEditor sunucunuzun çıktı vermesini istediği şey tam bir JavaScript bloğudur:

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

Yine, ona geri çağırma parametresini, dosyanın URL'sini ve isteğe bağlı olarak bir mesajı vermeniz gerekir. Mesaj boş bir dizeyse, hiçbir şey görüntülenmez; mesaj bir hataysa, url boş bir dize olmalıdır.

Resmi CKEditor belgeleri tüm bunlarda eksiktir, ancak yukarıdakileri takip ederseniz bir şampiyon gibi çalışacaktır.


29
Bu işlem için geliştirici belgelerinin bu kadar seyrek olduğuna inanamıyorum. Ayrıntıları doldurduğunuz için teşekkürler.

4
Bu harika bir bilgiydi! Resmi belgelerden daha iyi bekle.
Jon Romero

2
Çok teşekkürler! Ama bu CKEditorFunNum değil, İsim = P
emzero

2
@emzero, sanırım muhtemelen CKEditorFuncName idi, belki de CKEditor şimdi CKEditorFuncNum kullanıyor. Her neyse, cevap yerinde!
Rosdi Kasim

1
Ayrıca, yalnızca resim yüklemeye izin vermek için "Yükle sekmesini" gizlemeniz gerekiyorsa şunu kullanabilirsiniz: CKEDITOR.on ('dialogDefinition', function (ev) {// İletişim kutusunun adını ve tanımını olaydan alın / / data. var dialogName = ev.data.name; var dialogDefinition = ev.data.definition; // Tanımın ilgilendiğimiz // iletişim kutusundan (Bağlantı ve Resim iletişim kutusu) olup olmadığını kontrol edin. if (dialogName = = 'link' || dialogName == 'image') {// Upload tab dialogDefinition.removeContents'i kaldır ('Upload');}});
Kristijan


10

Sadece öğrenme sürecinden kendim geçtim. Anladım, ama belgelerin beni korkutacak şekilde yazıldığını kabul ediyorum. Benim için en büyük "aha" anı, göz atmak için CKeditor'un yaptığı tek şeyin yeni bir pencere açmak ve url'de birkaç parametre sağlamak olduğunu anlamaktı. Ek parametreler eklemenize izin verir, ancak değerleriniz üzerinde encodeURIComponent () kullanmanız gerekeceği hatırlatılır.

Tarayıcıyı ve yükleyiciyi ararım

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

İçin tarayıcısı , açık pencerenin (browse.php) Eğer onclick verilen işleyicisi üzerine daha sonra bir seçenekler listesi tedarik php & js kullanmak ve içinde, seçilen resme iki argüman, url / yol ile CKEditor işlevi çağırmak ve CKeditor tarafından url'de sağlanan CKEditorFuncNum:

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

Aynı şekilde, yükleyici sağladığınız url'yi, örneğin, upload.php'yi çağırır ve tekrar $ _GET ['CKEditorFuncNum'] sağlar. Hedef bir iframe olduğundan, dosyayı $ _FILES dosyasından kaydettikten sonra geri bildiriminizi şu şekilde CKeditor'a iletirsiniz:

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

Aşağıda, anlaşılması basit bir özel tarayıcı komut dosyası verilmiştir. Kullanıcıların sunucuda gezinmesine izin vermezken, tarayıcıyı çağırırken görüntü dosyalarını hangi dizinden çekeceğini belirtmenize izin verir.

Hepsi oldukça basit bir kodlama olduğundan, nispeten modern tüm tarayıcılarda çalışması gerekir.

CKeditor yalnızca sağlanan url ile yeni bir pencere açar

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

// ========= browse.php için aşağıdaki kodu tamamlayın

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

9

Bunu anlamaya çalışırken bir süre harcadım ve işte yaptığım şey. İhtiyacım olduğu için çok basit bir şekilde parçaladım.

Sorumlu metin alanınızın hemen altında, yükleme dosyasını şu şekilde girin >>>>

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

've sonra yükleme dosyanızı ekleyin, işte ASP'de yazılmış benimki. PHP vb. Kullanıyorsanız, ASP'yi yükleme komut dosyanızla değiştirin, ancak sayfanın aynı şeyi çıkardığından emin olun.

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

8

Kullandığım yaklaşım bu. Oldukça basit ve gayet iyi çalışıyor.

CK düzenleyici kök dizininde config.js adında bir dosya vardır.

Bunu ekledim (sorgu dizesine ihtiyacınız yok, bu sadece dosya yöneticimiz için). Ayrıca, gösterilen varsayılan düğmelerin bazı görünümlerini ve değiştirilmesini de dahil ettim:

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

};

Ardından, dosya yöneticimiz bunu şöyle adlandırır:

opener.SetUrl('somefilename');

7

Zerokspot'ta, CKEditor 3.0'daki Özel dosya tarayıcısı geri aramaları başlıklı bir makale bunu ele alır. En alakalı bölüm aşağıda alıntılanmıştır:

Dolayısıyla, bir dosya seçtiğinizde dosya tarayıcısından yapmanız gereken tek şey, bu kodu doğru geri arama numarasıyla (normalde 1) ve seçilen dosyanın URL'siyle çağırmaktır:

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

Hızlı yükleyici için süreç oldukça benzer. İlk başta, editörün 200 HTTP dönüş kodunu dinlediğini ve yüklenen dosyanın konumunu belirlemek için belki bir başlık alanına veya buna benzer bir şeye bakabileceğini düşündüm, ancak sonra - bazı Firebug izleme yoluyla - tüm bunların olduğunu fark ettim bir yüklemeden sonra aşağıdaki koddur:

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

Yükleme başarısız olursa, errorMessagesıfır olmayan uzunlukta bir dizeye ayarlayın ve url'yi boşaltın ve başarı durumunda bunun tersi de geçerlidir.


1
URL'yi vermiş olabilirsiniz -> zerokspot.com/weblog/2009/09/09/…
Jon Romero

1
Blogumu bulduğunuz için minnettar olsam da, blog yazımı kopyalamak / yapıştırmak yerine en azından ona geri bağlanabilir veya hiç bağlantı kurabilirsiniz.
Horst Gutmann

1
@Jon & @Horst: Bunu işaret ettiğiniz için teşekkürler. Geri konulması gereken alakalı herhangi bir şeyi çıkarırsam, bana haber vermen yeterli.
Bill the Lizard

4

CKEditor'ı başlattığınızda özel tarayıcınızı / yükleyicinizi kaydettirerek başlayın.

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

Yükleme dosyası için kod (ckFileUpload.php) ve yükleme dosyasını projenizin kök dizinine koyun.

// 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-editör dokümantasyonu, özel dosya yüklemesi için çok sayıda Ar-Ge yaptıktan sonra net değil, sonunda bu çözümü buldum. Benim için çalışıyor ve umarım başkalarına da yardımcı olur.


1

Bir Servlet / JSP uygulamasını merak edenler için bunu nasıl yapacağınız aşağıda anlatılacaktır ... Ayrıca aşağıdaki uploadimage'i de açıklayacağım.

1) Önce filebrowser ve uploadimage değişkenini config.js dosyanıza eklediğinizden emin olun . Ayrıca eklentiler klasörünün içinde uploadimage ve filebrowser klasörüne sahip olun .

2) Bu kısım beni heyecanlandırdığı yer:

Ckeditor web sitesi belgeleri, şu iki yöntemi kullanmanız gerektiğini söylüyor:

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

Bahsetmedikleri şey, bu yöntemlerin farklı bir sayfada olması gerektiğidir ve sunucuya göz at düğmesini tıkladığınız sayfada değil .

Bu nedenle, ckeditor'u page editor.jsp'de başlattıysanız, filebrowser.jsp sayfasında bir dosya tarayıcısı (temel html / css / javascript ile) oluşturmanız gerekir .

editor.jsp (ihtiyacınız olan tek şey komut dosyası etiketinizdedir) Bu sayfa, sunucuya göz at düğmesine tıkladığınızda filebrowser.jsp dosyasını mini bir pencerede açacaktır.

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

});

filebrowser.jsp (yukarıda belirtilen yöntemleri içeren, oluşturduğunuz özel dosya tarayıcısıdır)

<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

Ckeditor için config.js dosyanıza geri dönün ve aşağıdaki satırı ekleyin:

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

Ardından dosyaları ayrıca sürükleyip bırakabilirsiniz:

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

Ve hepsi bu kadar millet. Umarım birine yardımcı olur.

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.