CKEDITOR, Image Upload (filebrowserUploadUrl)
J'utilise CKEDITOR et j'aimerais pouvoir permettre aux utilisateurs de télécharger et d'incorporer des images dans l'éditeur de texte ...
Le JS suivant est ce qui charge le CKEDITOR:
CKEDITOR.replace( 'meeting_notes',
{
startupFocus : true,
toolbar :
[
['ajaxsave'],
['Bold', 'Italic', 'Underline', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink' ],
['Cut','Copy','Paste','PasteText'],
['Undo','Redo','-','RemoveFormat'],
['TextColor','BGColor'],
['Maximize', 'Image']
],
filebrowserUploadUrl : '/notes/add/ajax/upload-inline-image/index.cfm'
}
);
FilebrowserUploadUrl se trouve là où je suis coincé ... Quelle est cette URL supposée retourner à CKEDITOR pour que ce processus fonctionne?
Merci
L'URL doit pointer vers votre propre URL de navigateur de fichiers que vous pourriez avoir.
Je l'ai déjà fait dans l'un de mes projets et j'ai posté un tutoriel sur ce sujet sur mon blog
http://www.mixedwaves.com/2010/02/integrating-fckeditor-filemanager-in-ckeditor/
Le tutoriel explique pas à pas comment intégrer le FileBrowser intégré de FCKEditor à CKEditor, si vous ne voulez pas créer le nôtre. C'est assez simple.
Peut-être qu'il est trop tard Votre code est correct, veuillez vérifier à nouveau votre URL dans filebrowserUploadUrl.
CKEDITOR.replace( 'editor1', {
filebrowserUploadUrl: "upload/upload.php"
} );
Et le fichier Upload.php
if (file_exists("images/" . $_FILES["upload"]["name"]))
{
echo $_FILES["upload"]["name"] . " already exists. ";
}
else
{
move_uploaded_file($_FILES["upload"]["tmp_name"],
"images/" . $_FILES["upload"]["name"]);
echo "Stored in: " . "images/" . $_FILES["upload"]["name"];
}
CKeditor nouveau n’a pas de gestionnaire de fichiers inclus (CKFinder est payable) . Vous pouvez intégrer un gestionnaire de fichiers gratuit, beau et facile à implémenter dans CKeditor.
http://labs.corefive.com/2009/10/30/an-open-file-manager-for-ckeditor-3-0/
Téléchargez-le, copiez-le dans votre projet . Toutes les instructions sont là mais vous venez de mettre le chemin de la page index.html de filemanager ajoutée dans votre code.
CKEDITOR.replace( 'meeting_notes',
{
startupFocus : true,
toolbar :
[
['ajaxsave'],
['Bold', 'Italic', 'Underline', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink' ],
['Cut','Copy','Paste','PasteText'],
['Undo','Redo','-','RemoveFormat'],
['TextColor','BGColor'],
['Maximize', 'Image']
],
filebrowserUploadUrl : '/filemanager/index.html' // you must write path to filemanager where you have copied it.
});
La plupart des langues sont supportées (php, asp, MVC && aspx - ashx, ...)).
Si vous ne voulez pas acheter CKFinder, comme je ne voulais pas acheter CKFinder, alors j’ai écrit un téléchargeur très fiable pour CKEditor 4. Il consiste en un deuxième formulaire placé juste au-dessus de votre formulaire textarea. iframe hack, qui, malgré son nom, est homogène et discret.
Une fois l'image téléchargée, elle apparaît dans la fenêtre de CKEditor, avec le contenu déjà présent.
editor.php (la page de formulaire):
<?php
set_time_limit ( 3600 )
?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Content Editor</title>
<link href="jquery-ui-1.10.2/themes/vader/ui.dialog.css" rel="stylesheet" media="screen" id="dialog_ui" />
<link href="jquery-ui-1.10.2/themes/vader/jquery-ui.css" rel="stylesheet" media="screen" id="dialog_ui" />
<script src="jquery-ui-1.10.2/jquery-1.9.1.js"></script>
<script src="jquery-ui-1.10.2/jquery.form.js"></script>
<script src="jquery-ui-1.10.2/ui/jquery-ui.js"></script>
<script src="ckeditor/ckeditor.js"></script>
<script src="ckeditor/config.js"></script>
<script src="ckeditor/adapters/jquery.js"></script>
<script src="ckeditor/plugin2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#editor').ckeditor({ height: 400, width:600});
});
function placePic(){
function ImageExist(url){
var img = new Image();
img.src = url;
return img.height != 0;
}
var filename = document.forms['uploader']['uploadedfile'].value;
document.forms['uploader']['filename'].value = filename;
var url = 'http://www.mydomain.com/external/images/cms/'+filename;
document.getElementById('uploader').submit();
var string = CKEDITOR.instances.editor.getData();
var t = setInterval(function(){
var exists = ImageExist(url);
if(exists === true){
if(document.getElementById('loader')){
document.getElementById('loader').parentNode.removeChild(document.getElementById('loader'));
}
CKEDITOR.instances.editor.setData(string + "<img src=\""+url+"\" />");
clearInterval(t);
}
else{
if(! document.getElementById("loader")){
var loader = document.createElement("div");
loader.setAttribute("id","loader");
loader.setAttribute("style","position:absolute;margin:-300px auto 0px 240px;width:113px;height:63px;text-align:center;z-index:10;");
document.getElementById('formBox').appendChild(loader);
var loaderGif = document.createElement("img");
loaderGif.setAttribute("id","loaderGif");
loaderGif.setAttribute("style","width:113px;height:63px;text-align:center;");
loaderGif.src = "external/images/cms/2dumbfish.gif";
document.getElementById('loader').appendChild(loaderGif);
}
}
},100);
}
function loadContent(){
if(document.forms['editorform']['site'].value !== "" && document.forms['editorform']['page'].value !== ""){
var site = document.forms['editorform']['site'].value;
var page = document.forms['editorform']['page'].value;
var url = site+"/"+page+".html";
$.ajax({
type: "GET",
url: url,
dataType: 'html',
success: function (html) {
CKEDITOR.instances.editor.setData(html);
}
});
}
}
</script>
<style>
button{
width: 93px;
height: 28px;
border:none;
padding: 0 4px 8px 0;
font-weight:bold
}
#formBox{
width:50%;
margin:10px auto 0px auto;
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
}
#field{
position:absolute;
top:10px;
margin-left:300px;
margin-bottom:20px;
}
#target{
position:absolute;
top:100px;
left:100px;
width:400px;
height:100px;
display:none;
}
.textField{
padding-left: 1px;
border-style: solid;
border-color: black;
border-width: 1px;
font-family: helvetica, arial, sans serif;
padding-left: 1px;
}
#report{
float:left;
margin-left:20px;
margin-top:10px;
font-family: helvetica, arial, sans serif;
font-size:12px;
color:#900;
}
</style>
</head>
<body>
<?php
if(isset($_GET['r'])){ ?><div id="report">
<?php echo $_GET['r']; ?> is changed.
</div><?php
}
?>
<div id="formBox">
<form id="uploader" name="uploader" action="editaction.php" method="post" target="target" enctype="multipart/form-data">
<input type="hidden" name="MAX_FILE_SIZE" value="50000000" />
<input type="hidden" name="filename" value="" />
Insert image: <input name="uploadedfile" type="file" class="textField" onchange="placePic();return false;" />
</form>
<form name="editorform" id="editorform" method="post" action="editaction.php" >
<div id="field" >Site: <select name="site" class="textField" onchange="loadContent();return false;">
<option value=""></option>
<option value="scubatortuga">scubatortuga</option>
<option value="drytortugascharters">drytortugascharters</option>
<option value="keyscombo">keyscombo</option>
<option value="keywesttreasurehunters">keywesttreasurehunters</option>
<option value="spearfishkeywest">spearfishkeywest</option>
</select>
Page: <select name="page" class="textField" onchange="loadContent();return false;">
<option value=""></option>
<option value="one">1</option>
<option value="two">2</option>
<option value="three">3</option>
<option value="four">4</option>
</select>
</div><br />
<textarea name="editor" id="editor"></textarea><br />
<input type="submit" name="submit" value="Submit" />
</form>
</div>
<iframe name="target" id="target"></iframe>
</body>
</html>
Et voici la page d'action, editaction.php , qui effectue le téléchargement du fichier proprement dit:
<?php
//editaction.php
foreach($_POST as $k => $v){
${"$k"} = $v;
}
//fileuploader.php
if($_FILES){
$target_path = "external/images/cms/";
$target_path = $target_path . basename( $_FILES['uploadedfile']['name']);
if(! file_exists("$target_path$filename")){
move_uploaded_file($_FILES['uploadedfile']['tmp_name'], $target_path);
}
}
else{
$string = stripslashes($editor);
$filename = "$site/$page.html";
$handle = fopen($filename,"w");
fwrite($handle,$string,strlen($string));
fclose($handle);
header("location: editor.php?r=$filename");
}
?>
Mon dernier numéro concernait l'intégration de CKFinder pour le téléchargement d'images dans CKEditor. Voici la solution.
Téléchargez CKEditor et extrayez-le à la racine de votre dossier Web.
Téléchargez CKFinder et extrayez-le dans le dossier ckeditor.
Ajoutez ensuite des références à CKEditor, CKFinder et mettez
<CKEditor:CKEditorControl ID="CKEditorControl1" runat="server"></CKEditor:CKEditorControl>à votre page aspx.
Dans le code derrière la page événement OnLoad ajouter cet extrait de code
protected override void OnLoad(EventArgs e) { CKFinder.FileBrowser _FileBrowser = new CKFinder.FileBrowser(); _FileBrowser.BasePath = "ckeditor/ckfinder/"; _FileBrowser.SetupCKEditor(CKEditorControl1); }Éditez le fichier Confic.ascx.
public override bool CheckAuthentication() { return true; } // Perform additional checks for image files. SecureImageUploads = true;
( la source )
Avec CKeditor version 4, l'éditeur attend JSON en retour du côté serveur. Les versions plus anciennes peuvent nécessiter un type de réponse text/html, contenant un extrait de code javascript. Voir ce lien pour une explication de cela Explication des formats de retour . Côté serveur, et si vous utilisez C #, vous pouvez créer un modèle de données comme celui-ci:
namespace editors.Models
{
public class PostModel
{
public string CKEditor { get; set; } // for older editors
public string CKEditorFuncNum { get; set; } // for older editors
public string langCode { get; set; } // for older editors
public int uploaded { get; set; }
public string filename { get; set; }
}
}
Et retournez le résultat de votre routine de téléchargement avec ceci:
PostModel fez = new PostModel { CKEditor = "TheEditor1", CKEditorFuncNum = "1", langCode = "en", uploaded = 1, filename = "/images/in/" + filenameVariable };
return Ok(fez);
Bien que .net en fasse très probablement automatiquement un json, assurez-vous de retourner le type de contenu application/json.
En tant que note complémentaire pour ceux qui souhaitent vérifier si le fichier téléchargé est vraiment un fichier image; Si vous utilisez Asp.net Core, la bibliothèque system.drawing doit être installée de manière non standard. Voici comment faire cela
Notez également que vous pouvez modifier le type de publication dans le fichier config.js en config.filebrowserUploadMethod = 'form';, par opposition à config.filebrowserUploadMethod = 'xhr';
Pour ceux qui ont le même problème dans Grails ckeditor plugin Give
filebrowserUploadUrl: '/ VotreNomApp/ck/ofm'
pour appeler la fonction qui gère l’image uploade. Si vous souhaitez utiliser votre propre fonction personnalisée, vous pouvez indiquer le chemin d’accès au fichier.
J'ai récemment eu besoin d'une réponse à cette question également, et cela m'a pris plusieurs heures pour la comprendre. J'ai donc décidé de ressusciter cette question avec des informations plus récentes et une réponse complète.
Finalement, je suis tombé sur ce tutoriel qui m’a très bien expliqué. Par souci de stackoverflow, je vais répéter le tutoriel ici au cas où il serait supprimé. J'inclurai également quelques modifications apportées au didacticiel pour en faire une solution plus flexible.
Commencer
Commençons par l’une des versions de ckeditor (Basique, standard, complet, personnalisé). La seule condition est que vous ayez l’addon image et filebrowser
(Au moment de l'écriture, tous les paquets incluent ces 2 addons, à l'exception de celui de base, mais ils peuvent être ajoutés à celui de base.)
Après avoir téléchargé les fichiers ckeditor nécessaires, assurez-vous que votre installation fonctionne.
Assurez-vous de lier votre script de fichier ckeditor.js <script src="ckeditor/ckeditor.js"></script> puis de l’initialiser de la manière suivante:
$(document).ready(function() {
CKEDITOR.replace( 'editor1' );
});
<textarea name="editor1"></textarea>
Configuration de CKEditor
Nous devons maintenant dire à CKEditor que nous voulons activer le téléchargement. Vous pouvez le faire en allant dans votre dossier ckeditor et en éditant `config.js '. Nous devons ajouter cette ligne:
config.filebrowserUploadUrl = '/uploader/upload.php'; quelque part dans la fonction principale E.G
CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
config.filebrowserUploadUrl = '/uploader/upload.php';
};
REMARQUE: cette URL provient de la racine de votre projet. Peu importe où vous chargez ce fichier, il commencera par l’index de votre site. Signification, si votre URL est example.com, cette URL mène à
http://example.com/uploader/upload.php
Après cela, la configuration de CKEditor est terminée! C'était facile hein?
En fait, si vous testez à nouveau votre téléchargement d'images, vous obtiendrez une option de téléchargement, même si cela ne fonctionnera pas encore.
Configuration du serveur
Maintenant, vous remarquerez à l'étape précédente que celle-ci se termine par un fichier upload.php. C’est la partie qui m’a bouleversé, j’ai pensé qu’il y aurait un défaut qui pourrait aller avec cela, mais pour autant que je sache, il n’y en a pas. Heureusement, j’en ai trouvé un qui fonctionne et j’y ai apporté quelques modifications pour permettre plus de personnalisation.
Passons donc au chemin que vous avez fourni à la dernière étape. Pour la continuité de ce tutoriel, je vais utiliser /uploader/upload.php.
À cet emplacement, créez un fichier appelé (vous l’avez deviné) upload.php.
Ce fichier va gérer nos téléchargements de fichiers.
Je vais mettre dans mon cours de téléchargement personnalisé, mais il est basé sur ce github que j'ai trouvé et fourchu.
upload.php:
<?php
// Upload script for CKEditor.
// Use at your own risk, no warranty provided. Be careful about who is able to access this file
// The upload folder shouldn't be able to upload any kind of script, just in case.
// If you're not sure, hire a professional that takes care of adjusting the server configuration as well as this script for you.
// (I am not such professional)
// Configuration Options: Change these to alter the way files being written works
$overwriteFiles = false;
//THESE SETTINGS ONLY MATTER IF $overwriteFiles is FALSE
//Seperator between the name of the file and the generated ending.
$keepFilesSeperator = "-";
//Use "number" or "random". "number" adds a number, "random" adds a randomly generated string.
$keepFilesAddonType = "random";
//Only usable when $keepFilesAddonType is "number", this specifies where the number starts iterating from.
$keepFilesNumberStart = 1;
//Only usable when $keepFilesAddonType is "random", this specifies the length of the string.
$keepFilesRandomLength = 4;
//END FILE OVERWRITE FALSE SETTINGS
// Step 1: change the true for whatever condition you use in your environment to verify that the user
// is logged in and is allowed to use the script
if (true) {
echo("You're not allowed to upload files");
die(0);
}
// Step 2: Put here the full absolute path of the folder where you want to save the files:
// You must set the proper permissions on that folder (I think that it's 644, but don't trust me on this one)
// ALWAYS put the final slash (/)
$basePath = "/home/user/public_html/example/pages/projects/uploader/files/";
// Step 3: Put here the Url that should be used for the upload folder (it the URL to access the folder that you have set in $basePath
// you can use a relative url "/images/", or a path including the Host "http://example.com/images/"
// ALWAYS put the final slash (/)
$baseUrl = "http://example.com/pages/projects/uploader/files/";
// Done. Now test it!
// No need to modify anything below this line
//----------------------------------------------------
// ------------------------
// Input parameters: optional means that you can ignore it, and required means that you
// must use it to provide the data back to CKEditor.
// ------------------------
// Optional: instance name (might be used to adjust the server folders for example)
$CKEditor = $_GET['CKEditor'] ;
// Required: Function number as indicated by CKEditor.
$funcNum = $_GET['CKEditorFuncNum'] ;
// Optional: To provide localized messages
$langCode = $_GET['langCode'] ;
// ------------------------
// Data processing
// ------------------------
// The returned url of the uploaded file
$url = '' ;
// Optional message to show to the user (file renamed, invalid file, not authenticated...)
$message = '';
// in CKEditor the file is sent as 'upload'
if (isset($_FILES['upload'])) {
// Be careful about all the data that it's sent!!!
// Check that the user is authenticated, that the file isn't too big,
// that it matches the kind of allowed resources...
$name = $_FILES['upload']['name'];
//If overwriteFiles is true, files will be overwritten automatically.
if(!$overwriteFiles)
{
$ext = ".".pathinfo($name, PATHINFO_EXTENSION);
// Check if file exists, if it does loop through numbers until it doesn't.
// reassign name at the end, if it does exist.
if(file_exists($basePath.$name))
{
if($keepFilesAddonType == "number") {
$operator = $keepFilesNumberStart;
} else if($keepFilesAddonType == "random") {
$operator = bin2hex(openssl_random_pseudo_bytes($keepFilesRandomLength/2));
}
//loop until file does not exist, every loop changes the operator to a different value.
while(file_exists($basePath.$name.$keepFilesSeperator.$operator))
{
if($keepFilesAddonType == "number") {
$operator++;
} else if($keepFilesAddonType == "random") {
$operator = bin2hex(openssl_random_pseudo_bytes($keepFilesRandomLength/2));
}
}
$name = rtrim($name, $ext).$keepFilesSeperator.$operator.$ext;
}
}
move_uploaded_file($_FILES["upload"]["tmp_name"], $basePath . $name);
// Build the url that should be used for this file
$url = $baseUrl . $name ;
// Usually you don't need any message when everything is OK.
// $message = 'new file uploaded';
}
else
{
$message = 'No file has been sent';
}
// ------------------------
// Write output
// ------------------------
// We are in an iframe, so we must talk to the object in window.parent
echo "<script type='text/javascript'> window.parent.CKEDITOR.tools.callFunction($funcNum, '$url', '$message')</script>";
?>
Les modifications que j'ai apportées à cette classe vous permettent d'activer/de désactiver le remplacement de fichier et vous offrent des options pour vous permettre de ne pas écraser les fichiers. La classe d'origine remplace toujours sans options.
Par défaut, cette classe est configurée pour conserver tous les fichiers, sans les écraser. Vous pouvez jouer avec ces paramètres pour mieux répondre à vos besoins.
Si vous remarquez, il y a une section de code qui est juste une instruction if(true), ce qui est toujours vrai
if (true) {
echo("You're not allowed to upload files");
die(0);
}
C'est pour la sécurité. C’est là que vous devez vérifier si le téléchargement de l’utilisateur est connecté/autorisé à le télécharger. Si cela ne vous inquiète pas, vous pouvez simplement supprimer ces lignes de code ou le définir sur if(false)(NON RECOMMANDÉ).
Vous devrez également éditer les variables $basePath et $baseUrl pour répondre aux besoins de vos serveurs, sinon cela ne fonctionnera pas. Tout ce qui se trouve en dessous peut être laissé seul à moins que vous ne souhaitiez jouer.
Cette classe n'offre pas de protection de fichier. Vous voudrez peut-être travailler avec elle pour la rendre plus sûre, afin que personne ne puisse télécharger de scripts ou de virus sur votre serveur.
J'espère que ce petit tutoriel a aidé quelqu'un, car j'ai travaillé trop longtemps à ce que cela fonctionne pour moi, et j'espère pouvoir sauver quelqu'un d'autre un peu de temps.
Il existe également quelques étapes de dépannage soignées dans ce tutoriel que j'ai lié ci-dessus, qui pourraient vous aider à trouver ce qui ne va pas si quelque chose ne va pas.
Vous pouvez utiliser ce code
<script>
// Replace the <textarea id="editor"> with a CKEditor
// instance, using default configuration.
CKEDITOR.config.filebrowserImageBrowseUrl = '/admin/laravel-filemanager?type=Files';
CKEDITOR.config.filebrowserImageUploadUrl = '/admin/laravel-filemanager/upload?type=Images&_token=';
CKEDITOR.config.filebrowserBrowseUrl = '/admin/laravel-filemanager?type=Files';
CKEDITOR.config.filebrowserUploadUrl = '/admin/laravel-filemanager/upload?type=Files&_token=';
CKEDITOR.replaceAll( 'editor');
</script>
Cette URL pointe vers votre propre action de téléchargement de fichier côté serveur. La documentation n’entre pas beaucoup dans les détails, mais heureusement, Don Jones complète ici quelques blancs:
Comment intégrer un navigateur de fichiers/uploader personnalisé avec CKEditor?
Voir également:
http://zerokspot.com/weblog/2009/09/09/custom-filebrowser-callbacks-ckeditor/