La documentation officielle n'est pas très claire - quelle est la bonne façon d'intégrer un navigateur/chargeur de fichiers personnalisé avec CKEditor ? (v3 - pas FCKEditor)
Réponses
Trop de publicités?
Commencez par enregistrer votre navigateur/téléchargeur personnalisé lorsque vous instanciez CKEditor. Vous pouvez désigner des URL différentes pour un navigateur d'images et un navigateur de fichiers 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-le : c'est votre fonction de rappel. Disons que vous la mettez dans $callback .
Lorsque quelqu'un sélectionne un fichier, exécutez ce JavaScript pour indiquer à CKEditor quel fichier a été 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 facultatif peut être un texte que vous voulez afficher dans une boîte de dialogue d'alerte standard, comme "fichier illégal" ou autre. Définissez url comme 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, cela va à $_FILES['upload']. Ce que CKEditor veut que votre serveur produise 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;Là encore, vous devez lui fournir le paramètre de rappel, l'URL du fichier et, éventuellement, un message. Si le message est une chaîne vide, rien ne s'affichera ; si le message est une erreur, alors url doit être une chaîne vide.
La documentation officielle de CKEditor est incomplète à ce sujet, mais si vous suivez les instructions ci-dessus, tout fonctionnera comme sur des roulettes.
Penuel
Points
737
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 c'est assez simple. J'espère que toute personne à la recherche d'un tel outil trouvera ce tutoriel utile.
elliott benzle
Points
51
J'ai passé un certain temps à essayer de résoudre ce problème et voici ce que j'ai fait. Je l'ai décomposé très simplement car c'est ce dont j'avais besoin.
Directement sous la zone de texte de votre ckeditor, entrez le fichier à télécharger 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>et ensuite ajoutez votre fichier de téléchargement, voici le mien qui est écrit en ASP. Si vous utilisez PHP, etc., remplacez simplement l'ASP par votre script de téléchargement, mais assurez-vous que la page produit 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
%>
ScottE
Points
11633
Voici l'approche que j'ai utilisée. C'est assez simple, et ça marche 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 du truc de la chaîne de requête, c'est juste pour notre gestionnaire de fichiers). J'ai également inclus un peu d'habillage et de modification 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']
];
};Ensuite, notre gestionnaire de fichiers appelle ça :
opener.SetUrl('somefilename');
clops
Points
1722
Un article de zerokspot intitulé Rappels personnalisés du navigateur de fichiers dans CKEditor 3.0 gère ça. La section la plus pertinente est citée ci-dessous :
Donc tout ce que vous avez à faire depuis le navigateur de fichiers lorsque vous avez sélectionné un fichier est d'appeler ce code avec le bon numéro de rappel (normalement 1) et l URL du fichier sélectionné :
window.opener.CKEDITOR.tools.callFunction(CKEditorFuncNum,url);Pour le téléchargeur rapide, le processus est assez similaire. Au début, je pensais que l'éditeur pourrait écouter un 200 HTTP return code et peut-être regarder dans un champ d'en-tête ou quelque chose comme ça comme ça pour déterminer l'emplacement de le fichier téléchargé, mais ensuite, grâce à quelques contrôles de Firebug - j'ai remarqué 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é, définissez la valeur
errorMessageen une chaîne de longueur non nulle et vider l'url, et vice versa en cas de versa en cas de succès.
