¿Cómo se puede integrar un buscador / cargador de archivos personalizado con CKEditor?

La documentación oficial no está nada clara: ¿cuál es la forma correcta de integrar un buscador / cargador de archivos personalizado con CKEditor? (v3 – no FCKEditor)

Comience por registrar su navegador / cargador personalizado al instanciar CKEditor. Puede designar diferentes URL para un navegador de imágenes frente a un navegador de archivos general.

 

Su código personalizado recibirá un parámetro GET llamado CKEditorFuncNum. Guárdelo: esa es su función de callback. Digamos que lo pones en $callback .

Cuando alguien selecciona un archivo, ejecute este JavaScript para informar a CKEditor qué archivo fue seleccionado:

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

Donde “url” es la URL del archivo que eligieron. Un tercer parámetro opcional puede ser texto que desee que se muestre en un cuadro de diálogo de alerta estándar, como “archivo ilegal” o algo así. Establezca url en una cadena vacía si el tercer parámetro es un mensaje de error.

La pestaña de “carga” de CKEditor enviará un archivo en el campo “cargar” – en PHP, que va a $ _FILES [‘subir’]. Lo que CKEditor quiere que muestre su servidor es un bloque completo de JavaScript:

 $output = ''; echo $output; 

Nuevamente, debe darle ese parámetro de callback, la URL del archivo y, opcionalmente, un mensaje. Si el mensaje es una cadena vacía, no se mostrará nada; si el mensaje es un error, entonces url debe ser una cadena vacía.

La documentación oficial de CKEditor está incompleta en todo esto, pero si sigues lo anterior, funcionará como un campeón.

He publicado un pequeño tutorial sobre la integración del FileBrowser disponible en el viejo FCKEditor en CKEditor.

http://www.mixedwaves.com/2010/02/integrating-fckeditor-filemanager-in-ckeditor/

Contiene instrucciones paso a paso para hacerlo y es bastante simple. Espero que cualquiera que esté buscando esto encuentre útil este tutorial.

Acabo de pasar por el proceso de aprendizaje yo mismo. Lo descubrí, pero estoy de acuerdo en que la documentación está escrita de una manera que me resulta intimidante. El gran momento “ajá” para mí fue comprender que para navegar, todo lo que hace CKeditor es abrir una nueva ventana y proporcionar algunos parámetros en la url. Le permite agregar parámetros adicionales, pero tenga en cuenta que deberá usar encodeURIComponent () en sus valores.

Llamo al navegador y al cargador con

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

Para el navegador , en la ventana abierta (browse.php) usa php & js para proporcionar una lista de opciones y luego en el controlador onclick provisto, llama a una función CKeditor con dos argumentos, la url / ruta a la imagen seleccionada y CKEditorFuncNum proporcionado por CKeditor en la url:

 function myOnclickHandler(){ //.. window.opener.CKEDITOR.tools.callFunction(, pathToImage); window.close(); } 

Simultáneamente, el cargador simplemente llama a la url que usted suministra, por ejemplo, upload.php , y de nuevo suministra $ _GET [‘CKEditorFuncNum’]. El objective es un iframe, por lo que, después de guardar el archivo de $ _FILES, pasas tus comentarios a CKeditor de la siguiente manera:

 $funcNum = $_GET['CKEditorFuncNum']; exit(""); 

A continuación se muestra un script de navegador personalizado fácil de entender. Si bien no permite a los usuarios navegar en el servidor, sí permite indicar de qué directorio extraer los archivos de imagen al llamar al navegador.

Es una encoding bastante básica, por lo que debería funcionar en todos los navegadores relativamente modernos.

CKeditor simplemente abre una nueva ventana con la url proporcionada

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

// ========= código completo a continuación para browse.php

  if not using thumbNails then use empty string */ ?>    browse file      $_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('', $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" . implode('', array_fill(0, $cols, '')) . "\n\n"; ?> 

Pasé un tiempo tratando de resolver esto y esto es lo que hice. Lo he roto muy simple, ya que eso es lo que necesitaba.

Directamente debajo de su área de texto de ckeditor, ingrese el archivo de carga de esta manera >>>>

 





‘y luego agregue su archivo de carga, aquí está el mío que está escrito en ASP. Si está utilizando PHP, etc. simplemente reemplace el ASP con su script de carga, pero asegúrese de que la página muestre lo mismo.

 <%@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." & "
" Response.write "You can only upload .jpg or .bmp files." & "
" & "
" End if Else File.SaveAs Server.MapPath(("/senate/legislation") & "/" & File.fileName) f1=File.fileName End If Next End if fnm="/senate/legislation/"&f1 imgop = ";" 'imgop="callFunction('1','"&fnm&"',"");" Response.write imgop %>

Este es el enfoque que he usado. Es bastante sencillo, y funciona bien.

En el directorio raíz del editor CK hay un archivo llamado config.js

Agregué esto (no necesitas las cosas de la querystring, esto es solo para nuestro administrador de archivos). También incluí algunos cambios y cambio de los botones predeterminados que se muestran:

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

Entonces, nuestro administrador de archivos llama a esto:

 opener.SetUrl('somefilename'); 

Un artículo en zerokspot titulado Llamadas de devolución de archivos personalizadas en CKEditor 3.0 maneja esto. La sección más relevante se cita a continuación:

Entonces, todo lo que tiene que hacer desde el explorador de archivos cuando tiene un archivo seleccionado es llamar a este código con el número de callback correcto (normalmente 1) y la URL del archivo seleccionado:

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

Para el cargador rápido el proceso es bastante similar. Al principio pensé que el editor podría estar buscando un código de retorno de HTTP 200 y tal vez buscar en algún campo de encabezado o algo así para determinar la ubicación del archivo cargado, pero luego – a través de un monitoreo de Firebug – noté que todo eso sucede después de una carga es el siguiente código:


window.parent.CKEDITOR.tools.callFunction(CKEditorFuncNum,url, errorMessage);

Si la carga falló, configure errorMessage en alguna errorMessage que no sea de longitud cero y vacíe la url, y viceversa en caso de éxito.

Comience por registrar su navegador / cargador personalizado al instanciar CKEditor.

  

Codifique el archivo de carga (ckFileUpload.php) y coloque el archivo de carga en el directorio raíz de su proyecto.

 // 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(\'\', \'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 ''; 

La documentación de Ck-editor no está clara después de hacer una gran cantidad de I + D para la carga de archivos personalizados, finalmente he encontrado esta solución. Funciona para mí y espero que sea útil para otros también.

Para las personas que se preguntan acerca de la implementación de Servlet / JSP, aquí se explica cómo hacerlo … Explicaré la carga de imágenes a continuación también.

1) Primero asegúrese de haber agregado el archivador de archivos y cargar la variable a su archivo config.js. Haga que también tenga la carpeta uploadimage y filebrowser dentro de la carpeta de complementos también.

2) Esta parte es donde me hizo tropezar:

La documentación del sitio web de Ckeditor dice que debe usar estos dos métodos:

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

Lo que no mencionan es que estos métodos tienen que estar en una página diferente y no en la página desde la que hace clic en el botón del servidor de exploración.

Entonces, si tiene ckeditor inicializado en page editor.jsp, entonces necesita crear un buscador de archivos (con html / css / javascript básico) en la página filebrowser.jsp .

editor.jsp (todo lo que necesita es esto en su etiqueta de secuencia de comandos) Esta página abrirá filebrowser.jsp en una mini ventana cuando haga clic en el botón de examinar el servidor.

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

filebrowser.jsp (es el explorador de archivos personalizado que ha creado y que contendrá los métodos mencionados anteriormente)

       

3) El servlet FileBrowser

 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { Images i = new Images(); List 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) Servlet UploadImage

Regrese a su archivo config.js para ckeditor y agregue la siguiente línea:

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

Luego puede arrastrar y soltar archivos también:

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

Y eso es todo amigos. Espero que ayude a alguien.

    Intereting Posts