Intégrer CKEditor

Satanas · 09/03/2010 23:50:35

Bonsoir,

j'ai cherché à intégrer CKEditor en remplacement de FCKEditor dans Zite+ et j'ai quelques pistes à vous soumettre.

Après avoir chargé ckeditor et l'avoir décompresser à la racine de mon site (en local), j'ai créé un dossier ckeditor.php dans le répertoire Zite.

j'ai renseigné mon fichier ckeditor.php comme suit :

<script type="text/javascript" src="/AdresseDeMonSite/ckeditor/ckeditor.js"></script>
<textarea name="source"><?php echo str_replace($r_in, $r_out, $content) ?></textarea>
<script type="text/javascript">
CKEDITOR.replace( 'source' );
</script>

Et cela semble marcher en local (pas testé en ligne pour l'instant).

Maintenant, il ne me reste plus qu'à ajouter CKFinder pour pouvoir Uploader les images.

J'en suis là, je continue à bidouiller pour trouver la soluce, car CKEditor est vraiment agréable et souple à utiliser.

Bonne soirée.

Dernière modification par Satanas (10/03/2010 01:22:04)

michael79 · 10/03/2010 14:03:23

Satanas a écrit :

Bonsoir,
j'ai cherché à intégrer CKEditor en remplacement de FCKEditor dans Zite+ et j'ai quelques pistes à vous soumettre.
Après avoir chargé ckeditor et l'avoir décompresser à la racine de mon site (en local), j'ai créé un dossier ckeditor.php dans le répertoire Zite.
j'ai renseigné mon fichier ckeditor.php comme suit :
<script type="text/javascript" src="/AdresseDeMonSite/ckeditor/ckeditor.js"></script>
<textarea name="source"><?php echo str_replace($r_in, $r_out, $content) ?></textarea>
<script type="text/javascript">
CKEDITOR.replace( 'source' );
</script>
Et cela semble marcher en local (pas testé en ligne pour l'instant).
Maintenant, il ne me reste plus qu'à ajouter CKFinder pour pouvoir Uploader les images.
J'en suis là, je continue à bidouiller pour trouver la soluce, car CKEditor est vraiment agréable et souple à utiliser.
Bonne soirée.

Salut,

Tout à fait. CKEditor sera l'éditeur supporté de ZiteCMS 0.7
J'espère pouvoir finaliser cela dans les jours à venir.
Je participerai un peu à ZitePlus en le fournissant sous les
deux formes: script et greffon.

CKFinder ne sera pas utilisé car il utilise beaucoup de JavaScript
(chose que Zite essaie d'éviter au maximum). Je travailler
sur un greffon de gestion des fichiers. ZitePlus a-t-il déjà un
gestionnaire de fichiers améliorés? Il faudrait donc adapter
CKEditor pour qu'il gère le gestionnaire de fichier de Zite.

A bientôt,

Michaël

Satanas · 12/03/2010 16:10:11

Bonjour,
j'ai fini le travail d'intégration de CKeditor et de CKfinder.
Après tests en local et en ligne, tout semble marcher, même le dictionnaire.
Il est vrai que CKeditor utilise pas mal de script, mais l'interface est agréable et fonctionnelle. De plus il est assez facile de le personnaliser (en dimension et par rapport aux éléments de la barre d'outils).
Je mettrai un tuto d'installation si cela intéresse quelqu'un ... le cas échéant, non.
Merci de me le faire savoir si quelqu'un est intéressé.

michael79 a écrit :

ZitePlus a-t-il déjà un gestionnaire de fichiers améliorés?

Qu'entends-tu par là ? Je ne veux pas faire mon Blond, mais je ne comprends pas la question.
Pour la gestion des fichiers, perso, je gère soit par ftp et soit par CKFinder (désormais), pour ce qui est images, flash, pdf et .doc.

Bonne journée.

Dernière modification par Satanas (12/03/2010 21:59:58)

davyk · 13/03/2010 14:33:21

Satanas a écrit :

Je mettrai un tuto d'installation si cela intéresse quelqu'un ... le cas échéant, non.
Merci de me le faire savoir si quelqu'un est intéressé.
.

yes!

snypi · 13/03/2010 16:14:00

je dis oui !! car cela peut servir les utilisateurs actuel mais aussi futur de zite+
merci

jpg · 13/03/2010 20:00:16

Satanas a écrit :

michael79 a écrit :
ZitePlus a-t-il déjà un gestionnaire de fichiers améliorés?
Qu'entends-tu par là ? Je ne veux pas faire mon Blond, mais je ne comprends pas la question.
Pour la gestion des fichiers, perso, je gère soit par ftp et soit par CKFinder (désormais), pour ce qui est images, flash, pdf et .doc.
Bonne journée.

ZitePlus utilise un gestionnaire de documents intégré, gérant la notion de droits utilisateurs (et bientôt de rubrique )

Lorsqu'on utilise tinymce pour insérer une page ou une image, seul les documents accessibles à l'utilisateur qui rédige la page sont présentés (notion de droit sur un document dans un CMS).

L'intégration d'un autre éditeur comme CKeditor ou CKfinder doit tenir compte de cette gestion des droits pour être pleinement intégré à Ziteplus

a+
Jean-Paul

Satanas · 23/03/2010 15:32:36

Pour terminer ce post, j'ai donc intégrer ckfinder dans ckeditor.
-----
1 - Télécharger CKeditor et CKfinder
2 - Décompresser ckeditor à la racine du site
3 - Décompresser CKfinder dans le dossier CKeditor.
4 - Créer un fichier nommé ckeditor.php dans le dossier Zite, avec le code suivant :

<script type="text/javascript" src="./ckeditor/ckeditor.js"></script>
<textarea name="source"><?php echo str_replace($r_in, $r_out, $content) ?></textarea>
<script type="text/javascript">
	CKEDITOR.replace( 'source', 
 {
  toolbar : //configuration de la barre outils
        [
		['Source','-','Save','NewPage','Preview','-'],//'Templates'], element commenté
    		['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
    		['Undo','Redo','-','Find','Replace','-'],//,'SelectAll','RemoveFormat'], elements commenté
   		// Formulaire ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],//
   		 '/',
    		['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
    		['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
    		['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
   		 ['Link','Unlink','Anchor'],
    		['Image','Flash','Table','HorizontalRule','Smiley','-','SpecialChar','PageBreak'],
    		'/',
    		['Styles','Format','Font','FontSize'],
    		['TextColor','BGColor'],
    		['Maximize', 'ShowBlocks','-'],//,'About'],element commente
        ],

        uiColor : '#F1CA7F', // couleur de fond modifiable
	height:"600", //hauteur CKeditor
	filebrowserBrowseUrl : './ckeditor/ckfinder/ckfinder.html',
 	filebrowserImageBrowseUrl : './ckeditor/ckfinder/ckfinder.html?type=Images',
 	filebrowserFlashBrowseUrl : './ckeditor/ckfinder/ckfinder.html?type=Flash',
 	filebrowserUploadUrl : './ckeditor/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',
 	filebrowserImageUploadUrl : './ckeditor/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images',
 	filebrowserFlashUploadUrl : './ckeditor/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash',
 	filebrowserWindowWidth : '1000', //hauteur CKfinder
 	filebrowserWindowHeight : '700' //largeur CKfinder
 } 
 );
</script>

5 - Ensuite, éditer le fichier config.php de CKfinder (se trouvant dans CKeditor => CKfinder => config.php)
6 - Ligne 61, remplacer :

$baseUrl = '/ckfinder/userfiles/';

par

$baseUrl = '';

7 - Ligne 179 à 203, remplacer :

$config['ResourceType'][] = Array(
		'name' => 'Files',				// Single quotes not allowed
		'url' => $baseUrl . 'files',
		'directory' => $baseDir . 'files',
		'maxSize' => 0,
		'allowedExtensions' => '7z,aiff,asf,avi,bmp,csv,doc,fla,flv,gif,gz,gzip,jpeg,jpg,mid,mov,mp3,mp4,mpc,mpeg,mpg,ods,odt,pdf,png,ppt,pxd,qt,ram,rar,rm,rmi,rmvb,rtf,sdc,sitd,swf,sxc,sxw,tar,tgz,tif,tiff,txt,vsd,wav,wma,wmv,xls,zip',
		'deniedExtensions' => '');

$config['ResourceType'][] = Array(
		'name' => 'Images',
		'url' => $baseUrl . 'images',
		'directory' => $baseDir . 'images',
		'maxSize' => 0,
		'allowedExtensions' => 'bmp,gif,jpeg,jpg,png',
		'deniedExtensions' => '');

$config['ResourceType'][] = Array(
		'name' => 'Flash',
		'url' => $baseUrl . 'flash',
		'directory' => $baseDir . 'flash',
		'maxSize' => 0,
		'allowedExtensions' => 'swf,flv',
		'deniedExtensions' => '');

par

$config['ResourceType'][] = Array(
		'name' => 'Files',				// Single quotes not allowed
		'url' => $baseUrl, // . 'files', aspect commenté afin de se retrouver a la racine du site
		'directory' => $baseDir, // . 'files', aspect commenté afin de se retrouver a la racine du site
		'maxSize' => 0,
		'allowedExtensions' => '7z,aiff,asf,avi,bmp,csv,doc,fla,flv,gif,gz,gzip,jpeg,jpg,mid,mov,mp3,mp4,mpc,mpeg,mpg,ods,odt,pdf,png,ppt,pxd,qt,ram,rar,rm,rmi,rmvb,rtf,sdc,sitd,swf,sxc,sxw,tar,tgz,tif,tiff,txt,vsd,wav,wma,wmv,xls,zip',
		'deniedExtensions' => '');

$config['ResourceType'][] = Array(
		'name' => 'Images',
		'url' => $baseUrl, //. 'images', aspect commenté afin de se retrouver a la racine du site
		'directory' => $baseDir, // . 'images', aspect commenté afin de se retrouver a la racine du site
		'maxSize' => 0,
		'allowedExtensions' => 'bmp,gif,jpeg,jpg,png',
		'deniedExtensions' => '');

$config['ResourceType'][] = Array(
		'name' => 'Flash',
		'url' => $baseUrl, //. 'flash', aspect commenté afin de se retrouver a la racine du site
		'directory' => $baseDir, //. 'flash', aspect commenté afin de se retrouver a la racine du site
		'maxSize' => 0,
		'allowedExtensions' => 'swf,flv',
		'deniedExtensions' => '');

8 - Enfin, dans la zone Admin de votre Zite+, aller à Configurer et choisir ckeditor comme éditeur
----

Concernant les étapes 6 et 7 : ceci permet de se retrouver à la racine de son site plutôt que dans le fichier images par défaut de CKFinder.
Pour ma part, c'est fonctionnel en ligne.
Par contre, en local, on se retrouve à la racine du serveur local. Mais bon ça fonctionne quand même. Ceci doit être dû à un chemin relatif que j'ai raté quelque part.

Etant plus un bidouilleur qu'un informaticien, si vous avez une meilleure solution, merci de me la proposer.

Par contre, en adoptant cette méthode, je squizze complètement la gestion des fichiers par Zite, c'est vrai et je ne tiens pas compte de la gestion des droits intégrés à Ziteplus

jpg a écrit :

L'intégration d'un autre éditeur comme CKeditor ou CKfinder doit tenir compte de cette gestion des droits pour être pleinement intégré à Ziteplus

Espérant ne rien avoir oublié.

Bonne journée à vous.

Dernière modification par Satanas (23/03/2010 16:13:14)

davyk · 26/03/2010 19:44:02

ça c'est un tuto comme je les aime
merci satanas

++ vYk

jpg · 29/03/2010 16:33:11

Bonjour,
et bravo à toi pour ce travail, Satanas.
Pour une intégration à ZitePLUS, il manque effectivement l'intégration de la gestion des documents...
Il n'est pas exclu que je la réalise ... mais pour cela j'ai besoin d'informations supplémentaire pour décider si ZitePLUS basculera vers cet éditeur.

En deux mots:
- Actuellement, toutes les versions de ZitePLUS utilisent tinyMCE en version 2.x
- La nouvelle version en préparation (la 0.9.1) va utiliser tinyMCE en version 3 et les particularités de ZitePLUS ont été portées sous cette version
- je suis en train d'essayer de développer des extensions sous tiniMCE et en particulier une gestion de galerie photos basées sur la gestion des documents et les rubriques et du code PHP

MAIS: tinyMCE, même en version 3, n'aime pas trop le code PHP intégré aux pages .... même très très simple

D'ou ma question aux utilisateurs de CKEditor:

Avez vous déjà testé l'inclusion de code PHP dans une page via cet éditeur ?
et si oui, le résultat est il "fiable"

a+
jean-paul

ps: si vous avez une astuce pour le code PHP et tinyMCE ... je suis preneur

michael79 · 29/03/2010 19:09:38

jpg a écrit :

Bonjour,
et bravo à toi pour ce travail, Satanas.
Pour une intégration à ZitePLUS, il manque effectivement l'intégration de la gestion des documents...
Il n'est pas exclu que je la réalise ... mais pour cela j'ai besoin d'informations supplémentaire pour décider si ZitePLUS basculera vers cet éditeur.
En deux mots:
- Actuellement, toutes les versions de ZitePLUS utilisent tinyMCE en version 2.x
- La nouvelle version en préparation (la 0.9.1) va utiliser tinyMCE en version 3 et les particularités de ZitePLUS ont été portées sous cette version
- je suis en train d'essayer de développer des extensions sous tiniMCE et en particulier une gestion de galerie photos basées sur la gestion des documents et les rubriques et du code PHP
MAIS: tinyMCE, même en version 3, n'aime pas trop le code PHP intégré aux pages .... même très très simple
D'ou ma question aux utilisateurs de CKEditor:
Avez vous déjà testé l'inclusion de code PHP dans une page via cet éditeur ?
et si oui, le résultat est il "fiable"
a+
jean-paul
ps: si vous avez une astuce pour le code PHP et tinyMCE ... je suis preneur

Bonjour,

CKEditor supporte parfaitement le PHP, avec l'astuce de Zite bien entendu, c'est-à-dire
le PHP dans des commentaires, et surtout ne touche pas à ce qu'il ne comprend pas.

Un simple test sur les démonstrations en ligne montre clairement que CKEditor est bien
meilleur de TinyMCE et l'intégration d'un sélecteur d'images, fichiers ou pages est très
simple. (CKFinder est payant).

Entrée: <!--? php if( true && true ) echo "C'est bientôt l'été"; ?-->

Sortie CKEditor: <!--? php echo "C'est bientôt l'été"; ?-->
Sortie TinyMCE: <!--? php echo "C'est bientôt l'été"; ?-->

Pourquoi TinyMCE convertit-il en entités dans les commentaires!?

Entrée: <anytag anyoption="test">Content of any tag</anytag>

Sortie CKEditor: <anytag anyoption="test">Content of any tag</anytag>
Sortie TinyMCE: Content of any tag

Pourquoi TinyMCE touche-t-il à ce qu'il ne comprend pas!?

Entrée: <script language="JavaScript"><!--//
alert("C'est l'été");
//--></script>

Sortie CKEditor: <script language="JavaScript"><!--//
alert("C'est l'été");
//--></script>
Sortie TinyMCE: <script type="text/javascript">// <![CDATA[
//
alert("C'est l'été");
// ]]></script>

Voilà

A+

Michaël

jpg · 29/03/2010 19:36:23

Bonjour,

michael79 a écrit :

CKEditor supporte parfaitement le PHP, avec l'astuce de Zite bien entendu, c'est-à-dire
le PHP dans des commentaires

J'ai essayé ton exemple, mais je vois pas trop en quoi le PHP dans les commentaires résout la problématique.
Le PHP est conservé, mais plus interprété: j'ai du raté un truc important ...

michael79 a écrit :

, et surtout ne touche pas à ce qu'il ne comprend pas.

C'est sur que tinyMCE fait exactement l'inverse: tout ce qui n'est pas prévu est supprimé.
Peut-être un plus pour la sécurité en évitant d'injecter n'importe quoi comme code HTML, à voir.
Mais c'est sur que ça surprend la première fois et agace plus ou moins fortement les suivantes

michael79 a écrit :

Un simple test sur les démonstrations en ligne montre clairement que CKEditor est bien
meilleur de TinyMCE et l'intégration d'un sélecteur d'images, fichiers ou pages est très
simple. (CKFinder est payant).

Ceci étant, j'ai intégré tinybrowser pour Ziteplus (merci davyk), c'est pas non plus trop compliqué, surtout à partir de la version 3.

a+
Jean-Paul

jpg · 29/03/2010 20:58:47

jpg a écrit :

michael79 a écrit :
CKEditor supporte parfaitement le PHP, avec l'astuce de Zite bien entendu, c'est-à-dire
le PHP dans des commentaires
J'ai essayé ton exemple, mais je vois pas trop en quoi le PHP dans les commentaires résout la problématique.
Le PHP est conservé, mais plus interprété: j'ai du raté un truc important ...

Ah oui, tu veux peut-être parler de ce code de zite de page_editor():
$r_in = array('<?', '<?php', '?'.'>', '<?=');
$r_out = array('', '<!--?=');
...
$source = str_replace($r_out, $r_in, stripslashes($_POST['source']));

C'est le code utilisé avec tinnymce vu qu'il ne supporte pas le PHP !
Est-ce à dire que CKEditor ne le supporte pas plus ?

a+
Jean-Paul

michael79 · 29/03/2010 21:15:48

jpg a écrit :

jpg a écrit :
michael79 a écrit :
CKEditor supporte parfaitement le PHP, avec l'astuce de Zite bien entendu, c'est-à-dire
le PHP dans des commentaires
J'ai essayé ton exemple, mais je vois pas trop en quoi le PHP dans les commentaires résout la problématique.
Le PHP est conservé, mais plus interprété: j'ai du raté un truc important ...
Ah oui, tu veux peut-être parler de ce code de zite de page_editor():
$r_in = array('<?', '<?php', '?'.'>', '<?=');
$r_out = array('', '<!--?=');
...
$source = str_replace($r_out, $r_in, stripslashes($_POST['source']));
C'est le code utilisé avec tinnymce vu qu'il ne supporte pas le PHP !
Est-ce à dire que CKEditor ne le supporte pas plus ?
a+
Jean-Paul

Oui, ce code. Mais il fonctionne très mal avec TinyMCE car celui-ci
modifie le contenu des commentaires!

Non, CKEditor ne supporte pas le PHP et je comprends l'aspect "sécurité" de TinyMCE.
On peut néanmoins utiliser le tag SCRIPT (script language="PHP") sans crainte
si l'hébergement le supporte. Sur TinyMCE, ça devient du JavaScript (?)

TinyMCE n'a pas les définitions de tags suffisantes pour fonctionner normalement.
Exemples: datetimepicker (code source JavaScript) utilise une option
datepicker="true", elle est supprimée; un tag object devient automatiquement
un objet video flash et autres (?); ...

C'est vrai que la version 3 de TinyMCE est une nette amélioration par rapport
à la version 2 mais CKEditor est aussi capable de gérer les formulaires, ce qui
est plus.

A+

Michaël

(?) = pourquoi?

davyk · 05/04/2010 21:09:20

ne pas oublier de mettre "return true;" au lieu de false à function CheckAuthentication() (au début du fichier config.php)
sinon:
L'interface de gestion des fichiers est désactivé. Contactez votre administrateur et vérifier le fichier de configuration de CKFinder.

j'ai réussi à utiliser tinybrowser (because 684 ko contre 2,5 mo pour ckfinder) mais pour l'instant, je ne peux pas vraiment l'utiliser.
il se lance, on peut naviguer, uploader etc mais on ne peux pas choisir de fichier (le dble clic ne fonctionne pas).
autre truc super utile qu'il serait bon d'implémenter dans ckeditor (qui est définitivement très bien) c'est la link_list de ziteplus.

enfin, on a encore du boulot

++ vYk

Satanas · 05/04/2010 21:18:30

Bonsoir,
c'est vrai que cette link_list est indispensable, car pour les liens internes, c'est peu pratique de tout faire par copier-coller.
Il va falloir encore creuser.
Par contre ckfinder + ckeditor n'ont pas le don d'alléger zite+, bien au contraire ! environ 7.5Mo pour l'ensemble. Lourd, très lourd !

Dernière modification par Satanas (05/04/2010 21:20:44)

davyk · 05/04/2010 22:01:46

et ben si t'enlève ce qui sert à rien, t'en sera à 4,3 mo, comme moi
et si on remplace ckfinder par tinybrowser, on gagne en core 2,2 mo

allez zou, au boulot

++ vYk

et merci pour ton implication

Dernière modification par davyk (05/04/2010 22:02:47)

davyk · 07/04/2010 22:23:02

et ben c'est pas facile et ça va pas être du gâteau,.
Je suis allé voir du côté de plusieurs communautés dont celle de drupal mais je ne suis arrivé à aucun résultat.
c'est chaud les gars, je vous le dis, c'est chaud.

davyk · 09/04/2010 06:04:24

T'as trouvé quelque chose satanas?

Satanas · 09/04/2010 10:11:32

Salut davyk,

non je n'a rien trouvé pour l'instant. Alors je patiente quelque peu.
Pour l'instant je suis en train d'essayer d'intégrer un forum sans Base De Données.
J'ai trouvé deux projets :
un super sympa : µforum (20 ko ), facilement paramétrable et facilement skinnable.
et un autre, en anglais, plus complet, assez facilement skinnable, mais plus lourd (1,5 Mo) : c'est myUPB News : je suis en train d'en faire la traduction, mais y'a du boulot.

Forum ZitePLUS

#1 09/03/2010 23:50:35

Intégrer CKEditor

#2 10/03/2010 14:03:23

Re : Intégrer CKEditor

#3 12/03/2010 16:10:11

Re : Intégrer CKEditor

#4 13/03/2010 14:33:21

Re : Intégrer CKEditor

#5 13/03/2010 16:14:00

Re : Intégrer CKEditor

#6 13/03/2010 20:00:16

Re : Intégrer CKEditor

#7 23/03/2010 15:32:36

Re : Intégrer CKEditor

#8 26/03/2010 19:44:02

Re : Intégrer CKEditor

#9 29/03/2010 16:33:11

Re : Intégrer CKEditor

#10 29/03/2010 19:09:38

Re : Intégrer CKEditor

#11 29/03/2010 19:36:23

Re : Intégrer CKEditor

#12 29/03/2010 20:58:47

Re : Intégrer CKEditor

#13 29/03/2010 21:15:48

Re : Intégrer CKEditor

#14 05/04/2010 21:09:20

Re : Intégrer CKEditor

#15 05/04/2010 21:18:30

Re : Intégrer CKEditor

#16 05/04/2010 22:01:46

Re : Intégrer CKEditor

#17 07/04/2010 22:23:02

Re : Intégrer CKEditor

#18 09/04/2010 06:04:24

Re : Intégrer CKEditor

#19 09/04/2010 10:11:32

Re : Intégrer CKEditor

Pied de page des forums