Les dernières versions de CKEditor et CKFinder peuvent être téléchargées depuis le site officiel (http://cksource.com).
Mettez les deux ressources ci-dessus dans le répertoire racine du site : /CKEditor (ici dans la version 3.6.2, vous devez mettre le dossier _Samples\ckeditor dans le dossier compressé) et /CKFinder (insensible aux majuscules, vous pouvez mettre le dossier ici directement). )
Notez qu’ici il y a parfois une erreur dans la génération. Par exemple, il existe des balises AssemblyTitle en double, principalement parce que le site web a plus d’un AssemblyInfo.cs pour supprimer le fichier téléchargé. Ou supprimez le dossier _source. Si vous avez des questions ici, vous pouvez me contacter : my QQ : 515072775
Utiliser CKEditor sur une page :
<textarea cols="80 » id="prcontent » nom="content » lignes="50"> Bonjour, votre utilisation a été réussie ! </textarea>
<scrip remove ttype="text/javascrip remove t » >
CKEDITOR.replace('content', { height :200, width : 520 }) ;
. .</scrip去掉t>
CKEditor ne propose pas de fonction d’upload, il doit donc être téléchargé avec CKFinder
Étape 1 : Le site doit référencer la dll de CKFinder (annuaire : /CKFinder/bin/Release/CKFinder.dll)
Étape 2 : Configurez le config.js du CKEditor (répertoire : /CKEditor/config.js) dans la fonction CKEDITOR.editorConfig, et les fonctions inutiles peuvent être supprimées
CKEDITOR.editorConfig = function(config) {
config.filebrowserBrowseUrl = 'ckfinder/ckfinder.html' ; N’écrivez pas « ~/ckfinder/... » ou « /ckfinder/... »
config.filebrowserImageBrowseUrl = 'ckfinder/ckfinder.html ? Type=Images' ;
config.filebrowserFlashBrowseUrl = 'ckfinder/ckfinder.html ? Type=Flash' ;
config.filebrowserUploadUrl = 'ckfinder/core/connector/aspx/connector.aspx ?command=QuickUpload&type=Files' ;
config.filebrowserImageUploadUrl = 'ckfinder/core/connector/aspx/connector.aspx ?command=QuickUpload&type=Images' ;
config.filebrowserFlashUploadUrl = 'ckfinder/core/connector/aspx/connector.aspx ?command=QuickUpload&type=Flash' ;
config.filebrowserWindowWidth = '800' ; Le réglage de taille de la fenêtre contextuelle Naviguer Server
config.filebrowserWindowHeight = '500' ;
}
CKFinder.setupCKEditor(null, '.. /détecteur de l’eau/') ; Notez que le chemin du détecteur correspond à la position réelle
Configuration de CKFinder :
Ouvrez le contrôle utilisateur config.ascx sous « ckfinder\ » et changez son chemin BaseUrl :
BaseUrl = « ~/ckfinder/userfiles/ » ; ou BaseUrl = « ckfinder/userfiles/ » ;
Voici un point supplémentaire : il est utile de tester en IIS. Sinon, si le téléchargement échoue, vous penserez qu’il y a un problème avec la configuration.
CKEditor dispose d’une fonction de téléchargement après la fin de la configuration, mais que se passe-t-il si le fichier image est le nom original de l’image et veut le changer pour un nom de fichier aléatoire ? Puis regardez la troisième étape.
Étape 3 : Modifier le code source de CKFinder. CKFinder est livré avec son propre code source, répertoire : /CKFinde/_source
Créez un nouveau projet actuel dans VS vers CKFinde/_source/CKFinder.Net.sln, le fichier de solution téléchargé ici peut ne pas s’ouvrir dans VS2008, vous pouvez choisir d’ajouter un nouveau projet ou d’utiliser une version plus récente de VS pour l’ouvrir.
1) Ouvrir le fichier /Settings/ConfigFile.cs
Localiser 27 lignes et ajouter un attribut : public bool RandomReName ; Renommer aléatoirement
Localiser 67 lignes et attribuer une valeur à la propriété tout de suite : RandomReName = vrai ; La valeur par défaut est vraie
Enregistrer le fichier fermé
2) Ouvrir le fichier /Connector/Config.cs
Localiser les 62 lignes, ajouter un attribut :
public bool RandomReName
{
get { returnSettings.ConfigFile.Current.RandomReName ; }
}
Enregistrer le fichier fermé
3) Ouvrir le fichier /Connector/CommandHandlers/FileUploadCommandHandler.cs
Localisez la ligne 64 et ajoutez un code de jugement :
if ( Config.Current.RandomReName) // Utilise un nom aléatoire
sFileName =DateTime.Now.ToString(« yyyyMMddHHmmssfff « ) + « . » +sExtension ;
Enregistrer le fichier fermé
4) Régénérer le projet, écraser /ckfinder/_source/bin/Debug/CKFinder.dll /ckfinder/bin/Release/CKFinder.dll ou supprimer les références précédemment ajoutées au projet web et retirer à nouveau la dll du projet CKFinder.Net
Dernière étape : Ouvrir /ckfinder/config.ascx
Localiser 40 lignes et ajouter un attribut : (En fait, vous pouvez l’ajouter ou non, car il y avait une valeur par défaut définie auparavant, mais elle doit être mise sur false lors de l’utilisation du nom d’origine)
//上传完毕后使用随机文件名
RandomReName = vrai ;
Sauvegarde fermée
D’accord, maintenant que la configuration a fonctionné, CKEditor peut avoir une fonction de téléversement. Les réglages des autres fonctions continueront d’être étudiés quand vous aurez le temps~
Un rappel de plus : les dossiers CKEditor et CKFinder contiennent beaucoup de choses inutiles, comme des noms avec des sous-traits, les projets .net n’ont pas besoin de php, asp.
S’il y a une erreur lors du téléchargement d’un fichier : le fichier ne peut pas être consulté pour des raisons de sécurité. Veuillez contacter votre administrateur système et consulter le profil CKFinder.
Vous devez modifier le fichier config.ascx
Outre publique bool CheckAuthentication()
{
reture faux ;
}
Modifié en :
Outre publique bool CheckAuthentication()
{
Validation de la forme
returnRequest.IsAuthenticated ;
}
3. Appliquer le contrôle CKEditor sur la page [deux méthodes, a et b]
[R : Citation de la INSTALL.html dans le paquet compressé]
Si vous souhaitez intégrer CKEditor à votre page ASP.NET, suivez les étapes décrites ci-dessous.
1. Rendez-vous sur le site officiel de téléchargement de CKEditor et téléchargez les dernières versions de CKEditor 3.x et de CKEditor for ASP.NET Control.
2. Décompresser les deux packages d’installation à l’emplacement souhaité Supprimer n.
3. Ajoutez une référence au CKEditor for ASP.NET Control sur votre site web.
Dans Visual Studio, utilisez la commande Add Reference et parcourez le fichier bin\Release\CKEditor.NET.dll depuis le package d’installation décompressé CKEditor for ASP.NET. Vous pouvez aussi copier manuellement le fichier DLL dans le dossier bin de votre application.
4. Copiez les fichiers éditeurs décompressés du paquet d’installation CKEditor 3.x et collez-les dans le répertoire applicatif de votre site web.
5. Inscrivez le CKEditor pour ASP.NET Control sur votre page :
< %@ Register assembly="CKEditor.NET » Namespace="CKEditor.NET » TagPrefix="CKEditor » %>
6. Insérer une instance CKEditor dans le corps de la page :
<CKEditor :CKEditorControlID="CKEditor1 » runat="server"></CKEditor :CKEditorControl>
【b】
1. <head>Ajouter la référence js correspondante à la page :
<scrip remove t type="text/javascrip remove t » langage = javascrip remove t » src="ckfinder/ckfinder.js"></scrip去掉t>
<scrip remove t type="text/javascrip remove t » langage = javascrip remove t » src="ckeditor/ckeditor.js"></scrip去掉t>
2. Ensuite, <body>ajoutez le code suivant à l’emplacement où le contrôle doit être placé, et il existe les méthodes d’utilisation suivantes :
(1) Ajouter l’attribut de classe spécifié au contrôle
<textarea id = = textarea1 » nom = « éditeur 1 » classe = « ckeditor »>bonjour !</textarea>
Contrôles serveur :
<asp :TextBox ID="TextBox1 » runat="server » TextMode="MultiLine » CssClass="ckeditor"></asp :TextBox>
(2) Injecter du code js – ici, le code js est mieux écrit après le contrôle, ou <head>à l’intérieur de celui-ci
<textarea id = « textarea1 » nom = « éditeur 1 »>bonjour !</textarea>
<scrip remove t type="text/javascrip remove t » >
CKEDITOR.replace('editor1', { hauteur :400, largeur :800 }) ;
. .</scrip去掉t>
Contrôles serveur :
<asp :TextBox ID="mckeditor » runat="server » TextMode="MultiLine"></asp :TextBox>
<scrip remove t type="text/javascrip remove t » >
CKEDITOR.replace('< %=mckeditor. ClientID %>') ;
. .</scrip去掉t>
=============================================================================================================
Deuxième référence :
asp.net la méthode de configuration de ckeditor 3.0.1 et ckfinder_aspnet_1.4.1.1
Selon les invites du http://ckeditor.com.cn/docs/, CKEditor est configuré sur la page web, et lorsqu’il est consulté dans le navigateur, je trouve que l’interface de CKEditor est vraiment très belle, mais quand j’ai voulu essayer la fonction de téléversement d’image, je n’ai pas vu le bouton pour télécharger l’image.
En poursuivant la recherche en ligne, la conclusion fut que « CKEditor ne possède pas de fonction d’upload en soi, et elle doit être intégrée à CKFinder pour atteindre cette fonction ».
Ensuite, téléchargez CKFinder 1.4.1.1 pour Asp.net, décompressez-le, et placez le dossier ckfinder dans le répertoire racine du projet – car de nombreuses sources sur Internet disent qu’il vaut mieux placer CKEditor et CKFinder dans le même répertoire de niveau. Et de cette façon, nous aurons deux dossiers supplémentaires dans notre projet sans raison. Moi-même, j’ai un fétichisme pour la propreté des codes, je pense,
Laissez un dossier en signe de respect pour l’auteur, cela suffira. En garder deux me mettrait très mal à l’aise.
Avant d’intégrer CKFinder dans CKEditor, il faut aussi configurer un peu CKFinder. Les amis avisés devraient facilement penser que, puisqu’il s’agit d’un plug-in pour télécharger des fichiers, la plupart des éléments à configurer sont les chemins pour téléverser les fichiers.
Le chemin de téléversement par défaut de CKFinder est le dossier userfiles dans son propre répertoire, mais j’ai mis CKFinder dans le dossier CKEditor ; si je stocke l’image dans les fichiers utilisateur, le système doit contourner le dossier à trois couches pour trouver le fichier ou l’image, donc je prévois de téléverser l’image dans le dossier upFile dans le répertoire racine du projet.
Pour implémenter cette fonction, vous devez modifier le fichier config.ascx sous CKFinder pour changer BaseUrl = « /ckfinder/userfiles/ » en BaseUrl = « ~/upFile/ « . Ensuite, découpez les fichiers CKFinder.dll du dossier CKFinder/bin dans le dossier bin du projet système. Ou introduisez CKFinder.dll dans le projet en ajoutant des références.
Ensuite, nous pouvons utiliser CKEditor pour le téléchargement de fichiers :
Mettez le dossier CKFinder dans le dossier CKEditor, et dans la page, importez les fichiers js des deux :
<scrip remove tsrc="http://www.cnblogs.com/ckeditor/ckeditor.js » type="text/javascrip remove t"></scrip去掉t>
<scrip remove t src="http://www.cnblogs.com/ckeditor/ckfinder/ckfinder.js » type="text/javascrip remove t"></scrip去掉t>
Il existe deux façons de référer l’éditeur à un contrôle :
L’une d’elles est d’utiliser la zone de contrôle du client :
<lignes="20 » cols="40 » nom="txtContent » id="txtContent"></textarea>
<scrip remove t type="text/javascrip remove t » >
var editor = CKEDITOR.replace('txtContent') ;
CKFinder.SetupCKEditor (éditeur, 'http://www.cnblogs.com/ckeditor/ckfinder/') ;
. .</scrip去掉t>
La seconde consiste à utiliser la boîte de texte de contrôle côté serveur :
<asp :TextBox id="txtContent » TextMode="MultiLine » Text='< %# Bind(« info ») %>' runat="server"></asp :TextBox>
<scrip remove t type="text/javascrip remove t » >
var editor = CKEDITOR.replace('txtContent') ;
CKFinder.SetupCKEditor (éditeur, 'http://www.cnblogs.com/ckeditor/ckfinder/') ;
</scrip去掉t>Personnellement, je pense que puisque c’est un programme asp.net, il faut utiliser les contrôles côté serveur. Bien qu’il tourne un peu plus lentement que les contrôles client, le développement est un peu plus rapide. Et, en tant que programmeurs, nous aimons toujours essayer toutes les possibilités avant de choisir celle que nous aimons.
En fait, vous pouvez aussi attribuer des valeurs au contrôle sans utiliser Text='< %# Bind(« info ») %>', et l’utiliser directement dans le backcode
this.txtContent.Text="Valeur initiale »
C’est aussi possible. Vous pouvez également utiliser directement le code suivant pour obtenir la valeur :
CKFinder et code CKEditor. Lorsque j’exécute la page directement avec l’éditeur, le compilateur donne l’erreur suivante :
chaîne content=this.txtContent.Text
Note : L’attribut TextMode="MultiLine » est essentiel, sinon la valeur sera nulle.
Je n’avais pas simplifié avant de déboguer le programme
Le type ou le nom d’espace de noms « ControlDesigner » n’existe pas dans l’espace de noms « System.Web.UI.Design » (manque-t-il une référence assembleur ?)
L’erreur se trouve à la ligne 19 de ckeditor\ckfinder\_source\FileBrowserDesigner.cs, donc simplifiez simplement le fichier :
La première étape consiste à simplifier le ckeditor : supprimez les dossiers _samples et _source, et seuls trois fichiers linguistiques peuvent être conservés dans le répertoire lang : en.js, zh.js et zh-cn.js ;
La deuxième étape consiste à simplifier ckfinder : supprimer les dossiers _samples et _source, et ne garder que les fichiers en.js, zh.js et zh-cn.js langues dans le répertoire lang.
Notez la deuxième ligne de code js ici : CKFinder.SetupCKEditor(editor, 'http://www.cnblogs.com/ckeditor/ckfinder/') ; , où le « http://www.cnblogs.com/ckeditor/ckfinder/ » est le chemin relatif du ckfinder vers la page courante,
Veuillez ne pas copier-coller directement le code, sinon l’erreur suivante peut apparaître lors du téléchargement des images :
Description : HTTP 404. La ressource que vous cherchez (ou l’une de ses dépendances) peut avoir été supprimée, ou son nom a changé, ou elle est temporairement indisponible. Veuillez vérifier l’URL suivante et vous assurer qu’elle est correctement orthographiée.
URL demandée : /admin/ckeditor/ckfinder/core/connector/aspx/connector.aspx
Donc, si vous ne voulez pas mettre le ckfinder dans le dossier ckeditor comme je l’ai fait, ce n’est pas grave, tant que vous remplissez correctement le chemin ici.
Je pensais que cela serait considéré comme tout le travail, mais lorsque j’ai téléchargé l’image, la demande suivante est apparue :
Pour des raisons de sécurité, le fichier ne peut pas être consulté. Veuillez contacter votre administrateur système et consulter le profil CKFinder.
Il n’y a aucune chance, comme on dit, que les bonnes choses soient difficiles à manger. Je ne peux demander qu’au meilleur professeur - Baidu. Copiez les informations de la demande ci-dessus dans la barre de recherche Baidu, et après être entré dans la voiture, j’ai trouvé un post sur l’intégration PHP ckeditor. Voici comment faire :
Modifiez le fichier config.ascx sous CKFinder pour changer la valeur de retour de la fonction publique de remplacement bool CheckAuthentication() de return false à return true.
Testé à nouveau, l’image a été téléchargée avec succès ! |
Publié sur 18/04/2015 19:11:55
|
|
|
