Làm cách nào bạn có thể tích hợp trình duyệt / tải lên tệp tùy chỉnh với CKEditor?


112

Tài liệu chính thức chưa rõ ràng - cách chính xác để tích hợp trình duyệt / trình tải lên tệp tùy chỉnh với CKEditor là gì? (v3 - không phải FCKEditor)

Câu trả lời:


175

Bắt đầu bằng cách đăng ký trình duyệt / trình tải lên tùy chỉnh của bạn khi bạn khởi tạo CKEditor. Bạn có thể chỉ định các URL khác nhau cho trình duyệt hình ảnh so với trình duyệt tệp chung.

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

Mã tùy chỉnh của bạn sẽ nhận được một tham số GET được gọi là CKEditorFuncNum. Lưu nó - đó là chức năng gọi lại của bạn. Giả sử bạn đặt nó vào $callback.

Khi ai đó chọn một tệp, hãy chạy JavaScript này để thông báo cho CKEditor tệp nào đã được chọn:

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

Trong đó "url" là URL của tệp họ đã chọn. Tham số thứ ba tùy chọn có thể là văn bản mà bạn muốn hiển thị trong hộp thoại cảnh báo tiêu chuẩn, chẳng hạn như "tệp bất hợp pháp" hoặc thứ gì đó. Đặt url thành một chuỗi trống nếu tham số thứ ba là thông báo lỗi.

Tab "tải lên" của CKEditor sẽ gửi một tệp trong trường "tải lên" - bằng PHP, tệp đó sẽ được chuyển tới $ _FILES ['upload']. Những gì CKEditor muốn máy chủ của bạn xuất ra là một khối JavaScript hoàn chỉnh:

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

Một lần nữa, bạn cần cung cấp cho nó thông số gọi lại, URL của tệp và tùy chọn một thông báo. Nếu thông báo là một chuỗi rỗng, không có gì sẽ hiển thị; nếu thông báo là một lỗi, thì url phải là một chuỗi trống.

Tài liệu CKEditor chính thức không đầy đủ về tất cả những điều này, nhưng nếu bạn làm theo những điều trên, nó sẽ hoạt động như một nhà vô địch.


28
Tôi không thể tin rằng tài liệu dành cho nhà phát triển cho quá trình này lại quá thưa thớt. Cảm ơn bạn đã điền thông tin chi tiết.

4
Đó là thông tin tuyệt vời! Waay tốt hơn so với tài liệu chính thức.
Jon Romero

2
Cảm ơn rất nhiều! Nhưng đó là CKEditorFunNum, không phải Name = P
emzero 23/02/10

2
@emzero, tôi nghĩ nó có lẽ là CKEditorFuncName, có lẽ bây giờ CKEditor càng sử dụng CKEditorFuncNum nhiều hơn. Dù sao câu trả lời là tại chỗ!
Rosdi Kasim

1
Ngoài ra, nếu bạn cần ẩn "tab Tải lên" để chỉ cho phép tải lên hình ảnh, bạn có thể sử dụng: CKEDITOR.on ('speechDefinition', function (ev) {// Lấy tên hộp thoại và định nghĩa của nó từ sự kiện / / data. var hộp thoạiName = ev.data.name; var hộp thoạiDefinition = ev.data.definition; // Kiểm tra xem định nghĩa có phải từ hộp thoại mà chúng ta // quan tâm hay không (hộp thoại Liên kết và Hình ảnh). if (Hộp thoạiName = = 'link' || voiceName == 'image') {// gỡ bỏ hộp thoại Upload tabDefinition.removeContents ('Upload');}});
Kristijan


10

Tôi chỉ tự mình trải qua quá trình học hỏi. Tôi đã tìm ra nó, nhưng tôi đồng ý rằng tài liệu được viết theo một cách khá đáng sợ đối với tôi. Khoảnh khắc "aha" lớn đối với tôi là hiểu rằng để duyệt, tất cả những gì CKeditor làm là mở một cửa sổ mới và cung cấp một vài tham số trong url. Nó cho phép bạn thêm các tham số bổ sung nhưng được khuyên rằng bạn sẽ cần sử dụng encodeURIComponent () trên các giá trị của mình.

Tôi gọi trình duyệt và trình tải lên bằng

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

Đối với trình duyệt , trong cửa sổ đang mở (Browse.php), bạn sử dụng php & js để cung cấp danh sách các lựa chọn và sau đó trên trình xử lý onclick được cung cấp, bạn gọi một hàm CKeditor với hai đối số, url / đường dẫn đến hình ảnh đã chọn và CKEditorFuncNum do CKeditor cung cấp trong url:

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

Một cách đơn giản , người tải lên chỉ cần gọi url mà bạn cung cấp, ví dụ: upload.php và cung cấp lại $ _GET ['CKEditorFuncNum']. Mục tiêu là iframe, vì vậy, sau khi bạn lưu tệp từ $ _FILES, bạn chuyển phản hồi của mình cho CKeditor như vậy:

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

Dưới đây là một tập lệnh trình duyệt tùy chỉnh đơn giản để hiểu. Mặc dù nó không cho phép người dùng điều hướng xung quanh trong máy chủ, nhưng nó cho phép bạn chỉ ra thư mục nào để lấy các tệp hình ảnh từ khi gọi trình duyệt.

Đó là tất cả mã hóa khá cơ bản nên nó sẽ hoạt động trong tất cả các trình duyệt tương đối hiện đại.

CKeditor chỉ mở một cửa sổ mới với url được cung cấp

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

// ========= hoàn thành mã bên dưới cho 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>            

9

Tôi đã dành một thời gian để cố gắng tìm ra điều này và đây là những gì tôi đã làm. Tôi đã chia nhỏ nó rất đơn giản vì đó là những gì tôi cần.

Ngay bên dưới vùng văn bản ckeditor của bạn, nhập tệp tải lên như sau >>>>

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

'và sau đó thêm tệp tải lên của bạn, đây là tệp của tôi được viết bằng ASP. Nếu bạn đang sử dụng PHP, v.v., chỉ cần thay thế ASP bằng tập lệnh tải lên của bạn nhưng đảm bảo trang xuất ra cùng một thứ.

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

Đây là cách tiếp cận mà tôi đã sử dụng. Nó khá đơn giản và hoạt động tốt.

Trong thư mục gốc của trình soạn thảo CK có một tệp tên là config.js

Tôi đã thêm điều này (bạn không cần nội dung chuỗi truy vấn, điều này chỉ dành cho trình quản lý tệp của chúng tôi). Tôi cũng bao gồm một số giao diện và thay đổi các nút mặc định được hiển thị:

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

};

Sau đó, trình quản lý tệp của chúng tôi gọi điều này:

opener.SetUrl('somefilename');

7

Một bài báo tại zerokspot có tiêu đề Gọi lại trình duyệt tệp tùy chỉnh trong CKEditor 3.0 xử lý vấn đề này. Phần liên quan nhất được trích dẫn dưới đây:

Vì vậy, tất cả những gì bạn phải làm từ trình duyệt tệp khi chọn tệp là gọi mã này với đúng số gọi lại (thường là 1) và URL của tệp đã chọn:

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

Đối với trình tải lên nhanh, quá trình này hoàn toàn tương tự. Lúc đầu, tôi nghĩ rằng trình soạn thảo có thể đang lắng nghe mã trả về 200 HTTP và có thể xem xét một số trường tiêu đề hoặc thứ gì đó tương tự để xác định vị trí của tệp đã tải lên, nhưng sau đó - thông qua một số giám sát Firebug - tôi nhận thấy rằng tất cả những điều đó xảy ra sau khi tải lên là mã sau:

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

Nếu tải lên không thành công, hãy đặt thành errorMessagemột số chuỗi có độ dài khác 0 và làm trống url và ngược lại khi thành công.


1
bạn có thể đã cung cấp url -> zerokspot.com/weblog/2009/09/09/…
Jon Romero

1
Tôi đánh giá cao việc bạn đã tìm thấy blog của tôi, rất tiếc, ít nhất bạn có thể đã liên kết lại với nó hoặc chỉ liên kết với nó, thay vì sao chép / dán bài đăng trên blog của tôi.
Horst Gutmann 19/12/09

1
@Jon & @Horst: Cảm ơn bạn đã chỉ ra điều này. Nếu tôi cắt ra bất cứ điều gì có liên quan cần được điền lại, chỉ cần cho tôi biết.
Bill the Lizard

4

Bắt đầu bằng cách đăng ký trình duyệt / trình tải lên tùy chỉnh của bạn khi bạn khởi tạo CKEditor.

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

Mã cho tệp tải lên (ckFileUpload.php) và đặt tệp tải lên trên dir gốc của dự án của bạn.

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

Tài liệu Ck-editor không rõ ràng sau khi thực hiện rất nhiều R & D để tải lên tệp tùy chỉnh, cuối cùng tôi đã tìm thấy giải pháp này. Nó hiệu quả với tôi và tôi hy vọng nó cũng sẽ hữu ích cho những người khác.


1

Đối với những người thắc mắc về việc triển khai Servlet / JSP, đây là cách bạn thực hiện nó ... Tôi cũng sẽ giải thích hình ảnh tải lên bên dưới.

1) làm đầu tiên chắc chắn rằng bạn đã thêm filebrowseruploadimage biến đến file config.js của bạn. Hãy chắc bạn cũng có uploadimagefilebrowser thư mục bên trong thư mục plugin quá.

2) Phần này là nơi tôi vấp phải:

Tài liệu trang web Ckeditor cho biết bạn cần sử dụng hai phương pháp sau:

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

Những gì họ không đề cập là các phương pháp này phải nằm trên một trang khác chứ không phải trang mà bạn đang nhấp vào nút máy chủ duyệt .

Vì vậy, nếu bạn đã khởi tạo ckeditor trong page editor.jsp thì bạn cần tạo một trình duyệt tệp (với html / css / javascript cơ bản) trong trang filebrowser.jsp .

editor.jsp (tất cả những gì bạn cần là cái này trong thẻ script của bạn) Trang này sẽ mở filebrowser.jsp trong một cửa sổ nhỏ khi bạn nhấp vào nút máy chủ duyệt.

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

});

filebrowser.jsp (là trình duyệt tệp tùy chỉnh mà bạn đã tạo sẽ chứa các phương thức được đề cập ở trên)

<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

Quay lại tệp config.js của bạn cho ckeditor và thêm dòng sau:

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

Sau đó, bạn cũng có thể kéo và thả tệp:

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

Và đó là tất cả mọi người. Hy vọng nó sẽ giúp một ai đó.

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.