Installation de NicEdit Wysiwyg sur Pluxml :p

smed79

bonjour,

je veux installer Wysiwyg NicEdit 0.9.0 sur Pluxml-blog beta 4 si qu'elle q un peux me donner un coup de main



j'ai essayer en se basent sur se tuto http://forum.pluxml.org/viewtopic.php?id=785

merci

memento

salut,
je t'expose ma démarche pour l'avoir sous pluxml beta 4.
Tout d'abord, j'ai crée un répertoire intitulé "addons" à la racine du site. Ensuite, j'ai mis dedans un répertoire intitulé "nicedit" contenant le fichier "nicEdit.js" , le fichier "nicEditorIcons.gif" et un fichier "nicEdit_loader.js" que j'ai créé pour charger l'éditeur (voir ci-dessous).
Le code écrit dans le fichier "nicEdit_loader.js" est le suivant :

(function () {	// initialisation
	// Configuration
	var config = {
		article : {
			iconsPath : '../../addons/nicedit/nicEditorIcons.gif'
			,fullPanel : true
		}
	}
	
	/**
	 * addToogleEditor
	 * ajoute un système (case à cocher)  qui permet l'activation et la désactivation de l'éditeur wysiwyg
	 * @param  object  Editor Instance de l'éditeur créé
	 * @param  string  parentId Id du textarea associé à l'éditeur créé
	 * @param  boolean active Editeur wysiwyg actif (true) ou non (false) lors du chargement de la page
	 */
	function addToogleEditor(editor, parentId, active)
	{
		var inputElmt = document.createElement("input");
		inputElmt.type = "checkbox";
		inputElmt.id = "toogle_editor" + parentId;
		inputElmt.name = "toogle_editor" + parentId;
		inputElmt.title = "Activer/Désactiver l'éditeur wysiwyg";
		inputElmt.checked = (active)? true : false;
		inputElmt.onclick = function() {
			if (this.checked) {
				editor = new nicEditor(config.article).panelInstance(parentId);
			} else {
				editor.removeInstance(parentId);
				editor = null;
			}
		};

		var n = document.getElementById(parentId).nextSibling;		
		n.parentNode.insertBefore(inputElmt, n);
		
		// Pour ce putain de IE qui comprend que dalle !!
		if (typeof(document.all) == 'object' && typeof(window.opera) != 'object') {
			document.getElementById("toogle_editor" + parentId).checked = (active)? true : false;
		}
	}

	/**
	 * initialisation
	 */ 
	function init()
	{
		var init_editor = true;
		
		// Chapo
		if (document.getElementById('id_chapo')) {		
			var chapoEditor = (init_editor) ? new nicEditor(config.article).panelInstance('id_chapo') : null;
			addToogleEditor(chapoEditor, 'id_chapo', init_editor);
		}
		
		// Content
		if (document.getElementById('id_content')) {
			var contentEditor = (init_editor) ? new nicEditor(config.article).panelInstance('id_content') : null;
			addToogleEditor(contentEditor, 'id_content', init_editor);
		}
	}

	/**
	 * Ajoute la fonction à l'évènement load de la page
	 */
	function addLoadListener(func)
	{
		if (window.addEventListener) {
			window.addEventListener("load", func, false);
		} else if (document.addEventListener) {
			document.addEventListener("load", func, false);
		} else if (window.attachEvent) {
			window.attachEvent("onload", func);
		}
	}

	// Chargement
	if (nicEditors) {
		addLoadListener(init);
	}
   
})();

Ensuite, j'ai édité le fichier intitulé "top.php" et j'ai rajouté le code suivant à la ligne 9 avant la fermeture du tag </head> :

<script type="text/javascript" src="../../addons/nicedit/nicEdit.js"></script>
<script type="text/javascript" src="../../addons/nicedit/nicEdit_loader.js"></script>

Voilà, c'est fini.
A+

PS : Si tu utilises IE (ce que je ne conseille pas vu que nicEdit buggue avec ce navigateur), tu devras définir une largeur en px et non pas en % pour la balise textarea dans la feuille de style admin.css (ligne 158).

Stéphane

J'aime bien ton commentaire dans ton source à propos de IE qui comprend que dalle !!

Stéphane

Salut

je te conseille même de mettre ce code dans ton loader pour du xhtml

iconsPath : '../../addons/nicedit/nicEditorIcons.gif',
fullPanel : true,
xhtml : true


il faut télécharger sur nicEdit.com le plugin optionnel nicXHTML pour ça

Stéphane

Autre remarque memento

Dans ton code remplace les caractères accentués par leur équivalent html, sinon ça va afficher des caractères bizarres, notamment pour la ligne

inputElmt.title = "Activer/Désactiver l'éditeur wysiwyg";

Voilà

SapinTremblant

bonjour,
je trouve l'inititative très intéressante mais avec les caractères accentués, rien ne fonctionne. La barre ne s'affiche pas. Est-ce qu'un de vous pourrait mettre le code necessaire mais propre ? Je ne suis pas qualifié (quel dommage) et je trouve que Pluxml, sans un WYSIWYG, est quasi inutilisable. Surtout pour des novices.

Merci par avance.

P.S. : peut-être qu'un system WYSIWYG devrait être inclu d'office dans le moteur de la version 4, avec la possiblité de l'activer ou non. Qui utilise Wordpress sans cela, sérieusement ?

MODIF :: en supprimant la fonction "function addToogleEditor" la barre apparait donc c'est cool. Mais le système d'insertion des images et documents de PLUxml ne fonctionnent pas. Savez-vous comment faire, car c'est important je trouve.

gcyrillus

bonjour,

Pour inserer tes images il te faut desactiver l'editeur , ensuite usage classique de la popup image ou document

En repassant en wysiwyg , il te faudra aussi modifier 'images.php' pour qu'il te genere les liens en absolue pour voir tes images dans l'editeur .
(le chemin relatif est bon a partir de l'espace public , mais pas de l'administration).

Dans une version en test public :
http://ks352782.kimsufi.com/~test/demo/core/admin/
log et pass : demo

tu peut en tester l'usage .
Nicedit n'est pas doté d'un gestionnaire de fichier une integration au script de la page image et la page document de pluxml est peut-etre envisageable.

Pour voir (ou tester en local ) les modif effectuées a 'images.php' pour generer les liens en absolue , telecharge : http://ks352782.kimsufi.com/~test/?telechargement/Z2N5cmlsbHV4LnppcCozM2YyMjg,

C'est un pluxml V4 , avec une integration de nicedit et accessoirement des pages statiques pour faire une mini platform mult-pluxml.

Ce qui peut t'interesser se trouve en partie dans core/admin/images.php et dans : core/lib/functions.js , pour une insertion acrobatiques des images en mode editeur
Bien sur la page core/admin/images.php serait aussi a regarder pour l'insertion de l'editeur , mais il semble que tu y soit deja arriver .

GC

celmir

Intéressant !

SapinTremblant

@ gcyrillus : merci pour toutes ces infos. cela m'aide en effet, bien que j'ai un problème avec le chapo qui ne veut pas changer de mode d'édition, mias je verrai cela plus tard.
Aussi, comment puis-je faire pour supprimer le <BR> généré automatiquement par niceedit ? J'ai beaucoup cherché mais je ne vois pas....

Merci

memento

salut stephane,
merci pour l'astuce de l'option xhtml car je ne connais pas bien cet éditeur. C'est un client qui me l'a demandé.

Quand j'aurai du temps, je déveloperai un filemanager pour cet éditeur et je le partagerai.
A+

gcyrillus

SapinTremblant a écrit:

@ gcyrillus : merci pour toutes ces infos. cela m'aide en effet, bien que j'ai un problème avec le chapo qui ne veut pas changer de mode d'édition, mias je verrai cela plus tard.
Aussi, comment puis-je faire pour supprimer le <BR> généré automatiquement par niceedit ? J'ai beaucoup cherché mais je ne vois pas....

Merci

Bonjour,

Il ne faut pas empecher niceedit de generer ce br ou autre tag block par defaut , il sert a initialisé la frame d'edition , en particulier dans firefox.
Cette balise vide (ou <br>) generé permet d'inserer le curseur et donc d'editer !
Par ailleurs , les br intégrer pendant l'edition sont lié au saut de ligne génerer , entre generer un paragraphe ou un br a chaque retour de ligne , le develloppeur a opter pour le br. (tu peut donc délimiter un paragraphe et inserer des br dedans .... )
Tout ces editeurs ont des defaut , ou des mode de fonctionement qui ne ressemble pas forcément a nos habitudes .

Pour le BR , a mon avis :
2 options :
1) corrigé ta fonction toggleEditeur (initilaisé des varaibles differentes pour chaque textarea par exemple , ...) et passé en mode editeur seulement si tu insere quelquechose.
2) modifié pluxml et tester a l'enregistrement si chapo ou content ne contiennent q'un <br> , si oui alors vider ce champ ...

La soluce 1 est en fait la seule valable , a mon sens.

@memento Je n'avais pas remarqué que l'option XHTML fonctionné efficacement (ou je confond avec fckeditor) , a embarquer donc

Merci

Hamtaro

Je pense surtout que le problème c'est que la balise n'est pas valide. Il me semble que la vraie balise comme il faut est <br/> et non <br>.
Ce qui du coup fait une erreur Html lors d'un test, non ?

TCho, Hamtaro.

smed79

merci memento,
je testet je reviens
@++

---

Tester et approuver!!! Merci

raxpa

gcyrillus a écrit:

bonjour,

Pour inserer tes images il te faut desactiver l'editeur , ensuite usage classique de la popup image ou document

Pour voir (ou tester en local ) les modif effectuées a 'images.php' pour generer les liens en absolue , telecharge : http://ks352782.kimsufi.com/~test/?telechargement/Z2N5cmlsbHV4LnppcCozM2YyMjg,

C'est un pluxml V4 , avec une integration de nicedit et accessoirement des pages statiques pour faire une mini platform mult-pluxml.

Ce qui peut t'interesser se trouve en partie dans core/admin/images.php et dans : core/lib/functions.js , pour une insertion acrobatiques des images en mode editeur
Bien sur la page core/admin/images.php serait aussi a regarder pour l'insertion de l'editeur , mais il semble que tu y soit deja arriver .

GC

Salut,
Je suis en train d'ameliorer mon blog et j'ai besoin de la nouvelle version car le link ci-dessus ( http://ks352782.kimsufi.com/~test/?)
est obsolete...
Merci d'avance.

gcyrillus-nomade

bonjour,

en effet el cherubin n'a pas remis cet hebergement provisoire en fonction .

une archive datant de novembre 2008 est disponible ici : http://gcyrillux.gcyrillus.com/?telechargement/Z2N5cmlsbHV4LnppcCozM2YyMjg, Elle contient un pluxml V4 et les 2 pages statiques permettant de creer des sous pluxml , façon platforme de blog . Ce script n'a pas eté repris depuis et n'est encore qu'a l'état de test .

Niceedit est intégré dans cette version ...

GC