Installation de NicEdit Wysiwyg sur Pluxml :p

Réponses

• memento Member

  novembre 2008

  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 Member, Former PluXml Project Manager

  novembre 2008

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

  Consultant PluXml

  Ancien responsable et développeur de PluXml (2010 à 2018)
• Stéphane Member, Former PluXml Project Manager

  novembre 2008

  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

  Consultant PluXml

  Ancien responsable et développeur de PluXml (2010 à 2018)
• Stéphane Member, Former PluXml Project Manager

  novembre 2008

  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à

  Consultant PluXml

  Ancien responsable et développeur de PluXml (2010 à 2018)
• SapinTremblant Member

  novembre 2008 novembre 2008 modifié

  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 Member

  novembre 2008

  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 Member

  novembre 2008

  Intéressant !
• SapinTremblant Member

  novembre 2008

  @ 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 Member

  novembre 2008

  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 Member

  novembre 2008

  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 Member

  novembre 2008

  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 Member

  novembre 2008 décembre 2008 modifié

  merci memento,
  je testet je reviens
  @++
  

  ---

  
  Tester et approuver!!! Merci
• raxpa Member

  mars 2009 mars 2009 modifié

  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 Member

  mars 2009

  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

  
  Cordialement,
  gcyrillus , simple membre du forum et utilisateur de pluxml
  
  Mon site PluXml: https://re7net.com | Plugins: https://ressources.pluxopolis.net/banque-plugins/index.php?all_versions | demos sur free http://gcyrillus.free.fr/new | Thèmes: tester et télécharger @ https://pluxthemes.com
  Indiquez [RESOLU] dans le titre de votre question une fois le soucis réglè, Merci