Comment intégrer un navigateur/uploader de fichier personnalisé avec CKEditor?
8 réponses
commencez par enregistrer votre navigateur personnalisé/uploader lorsque vous instanciez CKEditor. Vous pouvez désigner différentes URLs pour un navigateur d'image par rapport à un navigateur de fichier général.
<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>
votre code personnalisé recevra un paramètre GET appelé CKEditorFuncNum. Enregistrez - c'est votre fonction de rappel. Disons que tu l'as mis dans $callback .
lorsque quelqu'un sélectionne un fichier, lancez ce JavaScript pour informer CKEditor du fichier sélectionné:
window.opener.CKEDITOR.tools.callFunction(<?php echo $callback; ?>,url)
où " url " est L'URL du fichier qu'ils ont choisi. Un troisième paramètre optionnel peut être un texte que vous voulez voir affiché dans une boîte de dialogue d'alerte standard, comme "fichier illégal" ou quelque chose. Définir l'url est une chaîne vide si le troisième paramètre est un message d'erreur.
L'onglet" upload "de CKEditor soumettra un fichier dans le champ" upload " - en PHP, qui va à $_FILES['upload']. Ce que CKEditor veut que votre serveur affiche est un bloc JavaScript complet:
$output = '<html><body><script type="text/javascript">window.parent.CKEDITOR.tools.callFunction('.$callback.', "'.$url.'","'.$msg.'");</script></body></html>';
echo $output;
encore une fois, vous devez lui donner ce paramètre de rappel, L'URL du fichier, et éventuellement un message. Si le message est une chaîne vide, rien ne va s'afficher; si le message est une erreur, alors l'url doit être une chaîne vide.
la documentation officielle de CKEditor est incomplète sur tout cela, mais si vous suivez ce qui précède, il fonctionne comme un champion.
j'ai posté un petit tutoriel sur l'intégration du FileBrowser disponible dans l'ancien FCKEditor dans CKEditor.
http://www.mixedwaves.com/2010/02/integrating-fckeditor-filemanager-in-ckeditor /
il contient des instructions étape par étape pour le faire et son assez simple. J'espère que quiconque à la recherche de ce tutoriel trouvera ce tutoriel utile.
je viens de passer par le processus d'apprentissage moi-même. J'avais compris ça, mais je suis d'accord la documentation est écrite d'une manière qui était sorta intimidant pour moi. Le grand moment "aha" pour moi était de comprendre que pour la navigation, tout ce que CKeditor fait est d'ouvrir une nouvelle fenêtre et de fournir quelques paramètres dans l'url. Il vous permet d'ajouter des paramètres supplémentaires mais sachez que vous devrez utiliser encodeURIComponent() sur vos valeurs.
j'appelle le navigateur et l'uploader avec
CKEDITOR.replace( 'body',
{
filebrowserBrowseUrl: 'browse.php?type=Images&dir=' +
encodeURIComponent('content/images'),
filebrowserUploadUrl: 'upload.php?type=Files&dir=' +
encodeURIComponent('content/images')
}
Pour le navigateur , dans la fenêtre ouverte (parcourir.php) vous utilisez php & js pour fournir une liste de choix et ensuite sur votre handler fourni onclick, vous appelez une fonction CKeditor avec deux arguments, l'url / chemin vers l'image sélectionnée et CKEditorFuncNum fourni par CKeditor dans l'url:
function myOnclickHandler(){
//..
window.opener.CKEDITOR.tools.callFunction(<?php echo $_GET['CKEditorFuncNum']; ?>, pathToImage);
window.close();
}
tout comme le uploader appelle simplement l'url que vous fournissez, par exemple, télécharger.php , et fournit à nouveau $_GET['CKEditorFuncNum']. La cible est ainsi, après avoir sauvegardé le fichier à partir de $_FILES, vous transmettez vos commentaires à CKeditor comme suit:
$funcNum = $_GET['CKEditorFuncNum'];
exit("<script>window.parent.CKEDITOR.tools.callFunction($funcNum, '$filePath', '$errorMessage');</script>");
ci-dessous est un simple pour comprendre le script personnalisé du navigateur. Bien qu'il ne permette pas aux utilisateurs de naviguer dans le serveur, il vous permet d'indiquer quel répertoire pour tirer des fichiers image à partir lors de l'appel du navigateur.
c'est un codage assez basique donc il devrait fonctionner dans tous les navigateurs relativement modernes.
CKeditor ouvre simplement une nouvelle fenêtre avec l'url fournie
/*
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')
});
// ========= code complet ci-dessous pour parcourir.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>
j'ai passé un certain temps à essayer de comprendre ça et voici ce que j'ai fait. J'ai décomposé très simplement que c'est ce dont j'avais besoin.
directement sous votre zone de texte ckeditor, entrez le fichier de téléchargement comme ceci > > > >
<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>
'puis ajouter votre fichier de téléchargement, voici le mien qui est écrit en ASP. Si vous utilisez PHP, etc. il suffit de remplacer L'ASP par votre script de téléchargement, mais assurez-vous que la page affiche la même chose.
<%@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
%>
C'est l'approche que j'ai utilisée. C'est assez simple, et fonctionne très bien.
dans le répertoire racine de l'éditeur CK, il y a un fichier nommé config.js
j'ai ajouté ceci (vous n'avez pas besoin de la substance querystring, c'est juste pour notre gestionnaire de fichiers). J'ai aussi inclus quelques retouches et changements des boutons par défaut affichés:
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']
];
};
alors, notre gestionnaire de fichiers appelle cela:
opener.SetUrl('somefilename');
un article de zerokspot intitulé Custom filebrowser callbacks in CKEditor 3.0 traite de cette question. La section la plus pertinente est citée ci-dessous:
Donc tout ce que vous avez à faire à partir du fichier navigateur lorsque vous avez un fichier sélectionné est d'appeler ce code avec le droit numéro de rappel (normalement 1) et le URL du fichier sélectionné:
window.opener.CKEDITOR.tools.callFunction(CKEditorFuncNum,url);pour le téléchargement rapide le processus est assez similaire. Au début, je pensais que le rédacteur pourrait être à l'écoute 200 Code de retour HTTP et peut-être regarder dans certains champ d'en-tête ou quelque chose comme que pour déterminer l'emplacement de le fichier téléchargé, mais ensuite-à travers j'ai remarqué une surveillance de la pyromane. que tout ce qui se passe après un téléchargement est le code suivant:
<script type="text/javascript">
window.parent.CKEDITOR.tools.callFunction(CKEditorFuncNum,url, errorMessage);</script>si le téléchargement a échoué,
errorMessageà une longueur non nulle string et vider l'url, et vice versa sur la réussite.
commencez par enregistrer votre navigateur personnalisé/uploader lorsque vous instanciez CKEditor.
<script type="text/javascript">
CKEDITOR.replace('content', {
filebrowserUploadUrl: "Upload File Url",//http://localhost/phpwork/test/ckFileUpload.php
filebrowserWindowWidth : 800,
filebrowserWindowHeight : 500
});
</script>
Code pour télécharger le fichier(ckFileUpload.php) & mettez le fichier de téléchargement sur le répertoire racine de votre projet.
// 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-editor documentation n'est pas clair après avoir fait beaucoup de R&D pour le téléchargement de fichier personnalisé enfin j'ai trouvé cette solution. Il fonctionne pour moi et j'espère qu'elle sera utile à d'autres personnes.
pour les personnes qui s'interrogent sur une implémentation Servlet/JSP voici comment procéder... Je serai expliquant uploadimage ci-dessous.
1) Assurez-vous D'abord d'avoir ajouté la variable filebrowser et uploadimage à votre config.fichier js. Faites que vous ayez aussi le dossier uploadimage et filebrowser à l'intérieur du dossier plugins aussi.
2) cette partie est où il m'a fait trébucher:
la documentation du site Web de Ckeditor indique que vous devez utiliser ces deux méthodes:
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();
}
ce qu'ils ne mentionnent pas est que ces méthodes doivent être sur un page différente et pas la page où vous cliquez sur le bouton browse server .
donc si vous avez ckeditor paraphé à la page éditeur.jsp ensuite, vous devez créer un navigateur de fichier (avec html/css/javascript de base) en page filebrowser.jsp .
de l'éditeur.jsp (tous vous avez besoin est présent, dans votre balise de script) Cette page va s'ouvrir filebrowser.jsp dans une mini-fenêtre lorsque vous cliquez sur le serveur de navigation bouton.
CKEDITOR.replace( 'editor', {
filebrowserBrowseUrl: '../filebrowser.jsp', //jsp page with jquery to call servlet and get image files to view
filebrowserUploadUrl: '../UploadImage', //servlet
});
filebrowser.jsp (est le navigateur de fichier personnalisé que vous avez construit qui contiendra les méthodes mentionnées ci-dessus)
<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) The 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
retournez à votre configuration.JS pour ckeditor et ajouter la ligne suivante:
//https://docs.ckeditor.com/ckeditor4/latest/guide/dev_file_upload.html
config.uploadUrl = '/UploadImage';
alors vous pouvez faire glisser et déposer des fichiers aussi:
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);
}
}
et c'est tout. Espérons que cela aide quelqu'un.