Respuestas:
Comience registrando su navegador / cargador personalizado cuando cree una instancia de CKEditor. Puede designar diferentes URL para un navegador de imágenes frente a un navegador de archivos general.
<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>
Su código personalizado recibirá un parámetro GET llamado CKEditorFuncNum. Guárdelo, esa es su función de devolución de llamada. Digamos que lo pones en $callback.
Cuando alguien selecciona un archivo, ejecute este JavaScript para informar a CKEditor qué archivo se seleccionó:
window.opener.CKEDITOR.tools.callFunction(<?php echo $callback; ?>,url)
Donde "url" es la URL del archivo que eligieron. Un tercer parámetro opcional puede ser el texto que desea que se muestre en un cuadro de diálogo de alerta estándar, como "archivo ilegal" o algo así. Establezca la URL en una cadena vacía si el tercer parámetro es un mensaje de error.
La pestaña "cargar" de CKEditor enviará un archivo en el campo "cargar" - en PHP, que va a $ _FILES ['cargar']. Lo que CKEditor quiere que su servidor genere es un bloque completo de JavaScript:
$output = '<html><body><script type="text/javascript">window.parent.CKEDITOR.tools.callFunction('.$callback.', "'.$url.'","'.$msg.'");</script></body></html>';
echo $output;
Nuevamente, debe darle ese parámetro de devolución de llamada, 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, la URL debe ser una cadena vacía.
La documentación oficial de CKEditor está incompleta sobre todo esto, pero si sigue lo anterior, funcionará como un campeón.
He publicado un pequeño tutorial sobre la integración del FileBrowser disponible en el antiguo 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.
Yo solo pasé por el proceso de aprendizaje. Lo descubrí, pero estoy de acuerdo en que la documentación está escrita de una manera que me intimidaba. El gran momento "ajá" para mí fue entender que para navegar, todo lo que CKeditor hace 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 (navegar.php) usa php & js para proporcionar una lista de opciones y luego, en el controlador onclick proporcionado, 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(<?php echo $_GET['CKEditorFuncNum']; ?>, pathToImage);
window.close();
}
De manera similar, el cargador simplemente llama a la URL que proporcionas, por ejemplo, upload.php , y nuevamente proporciona $ _GET ['CKEditorFuncNum']. El objetivo es un iframe, por lo que, después de guardar el archivo de $ _FILES, pasa sus comentarios a CKeditor de la siguiente manera:
$funcNum = $_GET['CKEditorFuncNum'];
exit("<script>window.parent.CKEDITOR.tools.callFunction($funcNum, '$filePath', '$errorMessage');</script>");
A continuación se muestra un script de navegador personalizado fácil de entender. Si bien no permite que los usuarios naveguen por el servidor, sí le permite indicar de qué directorio extraer los archivos de imagen al llamar al navegador.
Todo es una codificación 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')
});
<?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>
Pasé un tiempo tratando de resolver esto y esto es lo que hice. Lo he desglosado de manera muy simple, ya que eso es lo que necesitaba.
Directamente debajo del área de texto de su ckeditor, ingrese el archivo de carga como este >>>>
<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>
'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." & "<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
%>
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 cadenas de consulta, esto es solo para nuestro administrador de archivos). También incluí algunos aspectos y cambios 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 Devoluciones de llamada personalizadas del navegador de archivos 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 devolución de llamada 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 escuchando un código de retorno 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 aparece el siguiente código:
<script type="text/javascript">
window.parent.CKEDITOR.tools.callFunction(CKEditorFuncNum,url, errorMessage);</script>Si la carga falló, establezca el valor
errorMessageen una cadena de longitud distinta de cero y vacíe la URL, y viceversa si se realiza correctamente.
Comience registrando su navegador / cargador personalizado cuando cree una instancia de CKEditor.
<script type="text/javascript">
CKEDITOR.replace('content', {
filebrowserUploadUrl: "Upload File Url",//http://localhost/phpwork/test/ckFileUpload.php
filebrowserWindowWidth : 800,
filebrowserWindowHeight : 500
});
</script>
Código para 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(\'<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>';
La documentación de Ck-editor no está clara después de realizar una gran cantidad de I + D para cargar archivos personalizados, finalmente encontré esta solución. Funciona para mí y espero que también sea útil para otros.
Para las personas que se preguntan acerca de una implementación de Servlet / JSP, así es como lo hacen ... También explicaré la imagen de carga a continuación.
1) Primero asegúrese de haber agregado el navegador de archivos y la variable uploadimage a su archivo config.js. Haga que también tenga la carpeta uploadimage y filebrowser dentro de la carpeta de complementos.
2) Esta parte es donde me hizo tropezar:
La documentación del sitio web de Ckeditor dice que debe utilizar 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 deben estar en una página diferente y no en la página desde la que está haciendo clic en el botón del servidor de búsqueda.
Entonces, si ha inicializado ckeditor en page editor.jsp, entonces necesita crear un navegador de archivos (con html básico / css / javascript) en la página filebrowser.jsp .
editor.jsp (todo lo que necesita es esto en su etiqueta de script) Esta página abrirá filebrowser.jsp en una mini ventana cuando haga clic en el botón de buscar 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 navegador de archivos personalizado que construyó y que contendrá los métodos mencionados anteriormente)
<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) El Servlet 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) 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.