alternatives - ckeditor laravel
¿Cómo se puede integrar un buscador/cargador de archivos personalizado con CKEditor? (8)
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)
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(<?php echo $_GET[''CKEditorFuncNum'']; ?>, 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 objetivo 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("<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 a los usuarios navegar en el servidor, sí permite indicar de qué directorio extraer los archivos de imagen al llamar al navegador.
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'')
});
// ========= código completo a continuación para 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>
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.
<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 fue seleccionado:
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 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 = ''<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, 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.
Comience por registrar su navegador / cargador personalizado al instanciar CKEditor.
<script type="text/javascript">
CKEDITOR.replace(''content'', {
filebrowserUploadUrl: "Upload File Url",//http://localhost/phpwork/test/ckFileUpload.php
filebrowserWindowWidth : 800,
filebrowserWindowHeight : 500
});
</script>
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(/'<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 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.
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'');
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.
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)
<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.
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 >>>>
<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
%>
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 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 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:
<script type="text/javascript">
window.parent.CKEDITOR.tools.callFunction(CKEditorFuncNum,url, errorMessage);</script>Si la carga falló, configure
errorMessageen algunaerrorMessageque no sea de longitud cero y vacíe la url, y viceversa en caso de éxito.