Créer une nouvelle toolbar...

jojaba · novembre 2010

Allez voir sur le wiki (ezHTML) pour trouver les fruits de mon travail sur le sujet

Bonjour,

Je découvre pluxml. Simple, facile à installer et facile à modifier. Vraiment ce que je recherche en général.
J'ai envie de créer une nouvelle barre d'outils pour l'insertion de code HTML dans les différents éditeurs. Je pourrais purement et simplement modifier l'actuelle barre d'outils, c'est d'ailleurs la solution pour laquelle j'opterai s'il n'y a aps une aure alternative. Cependant, j'ai cru comprendre qu'on peut ajouter une barre d'outils différemment puisque dans la page parametres_base.php on a le code suivant :

# On récupère la liste des éditeurs de texte
$editors[''] = 'aucun';
$editors['plxtoolbar'] = 'plxToolbar';
$folders = plxGlob::getInstance(PLX_ROOT.'addons', true);
if($list = $folders->query("/editor.[a-z0-9-_\.\(\)]+/i")) {
	foreach($list as $k=>$v) {
		$name = explode('.',$v);
		$editors[$name[1]]=$name[1];
	}

D'après ce code, si j'ai bien compris, on peut ajouter une barre d'outils dans un dossier "addons".
Est-ce que je crée un dossier "editor.xxx" dans lequel je place mes fichiers de la barre outils, ou puis-je appeler ce dossier différemment, ...

Merci d'avance pour votre aide.

Stéphane · novembre 2010

Bonjour jojaba

Effectivement il faut que ton dossier s'appelle editor.xxxx et qu'il soit dans le dossier /addons
Il te faudra également un fichier xxxx.php dans le dossier editor.xxxx

Exemple:
/addons
editor.test
test.php

test.php doit obligatoirement contenir le code suivant:

<?php
/**
 * Classe plxEditor responsable de l'affichage de l'éditeur xxxxx
 *
 * @package PLX 5.+
 * @author	Stéphane F
 * @version 1.0
 **/
class plxEditor {

	private $path_editor; # chemin vers le dossier de l'éditeur

	/**
	 * Constructeur qui initialise la variable de classe
	 *
	 * @param	path_editor		chemin vers le dossier de l'éditeur
	 * @return	null
	 * @author	Stephane F
	 **/
	public function __construct($path_editor) {
		$this->path_editor = $path_editor;
	}

	/**
	 * Méthode qui ajoute les déclarations nécessaires dans la partie <head> de la page top.php de l'administration
	 *
	 * @param	null
	 * @return	stdout
	 * @author	Stephane F
	 **/
	public function addHeader() {
	}

	/**
	 * Méthode qui ajoute les déclarations nécessaires à la fin de la page foot.php de l'administration
	 *
	 * @param	null
	 * @return	stdout
	 * @author	Stephane F
	 **/
	public function addFooter() {
	}
}
?>

Les 2 méthodes où tu peux intervenir sont addHeader() et addFooter() qui permettent d'ajouter le code nécessaires aux déclarations de la nouvelle barre. Le code sera ajouté automatiquement dans la partie <head>...</head> et avant </body>

Je t'invite à regarder comment sont fait les 2 addons CKEditor et Whizzywig dans le wiki
http://wiki.pluxml.org/index.php?page=CKEditor
http://wiki.pluxml.org/index.php?page=Whizzywig

jojaba · novembre 2010

Waouh, réponse ultra-rapide !
Merci beaucoup Stéphane, je vais jeter un oeil à ces deux toolbar

jojaba · novembre 2010

Bon ben, voilà, j'ai enfin réussi à faire quelque chose qui devrait tenir la route...
J'ai appelé ma barre d'outils ezHTML. Elle s'adresse plus particulièrement à ceux qui ont une notion sur le codage xhtml et qui, comme moi, n'aiment pas travailler avec des éditeurs wysiwyg, qui en général vous détruisent votre structure de code dès que vous modifiez quelque chose. Je l'ai organisée de la manière suivante :

[*]Première ligne comportant les balises "bloc"
[*]Deuxième ligne contenant les balises "inline"
[*]Dernière ligne : les émoticônes

Je vous laisse découvrir/tester cette barre d'outils qui s'inspire fortement de la barre d'outils développée par Stéphane je suppose

:

[*]Téléchargement de ezHTML

Bien entendu j'attends des retours concernant l'utilisation, il subsiste sûrement des bogues, des choses à améliorer,... Je n'ai pas le temps de développer toutes les fonctionnalités, mais pour vous donner une idée, je détaille comment on peut créer des listes. Si vous ne sélectionnez rien et que vous cliquez sur un des boutons liste, on vous demandera les éléments successifs de la liste. Si vous sélectionnez plusieurs lignes, chaque ligne sera considérée comme étant un élément de liste.

Pour information, je me suis également inspiré de ma barre d'outils pour FluxBB : EZBBC Toolbar.

Etape suivante prévue (mais avec les maigres compétences que j'ai en Javascript, ça risque d'être chaud !) : intégration de codemirror Pour obtenir une coloration syntaxique du code, le seul élément qui me manque pour retrouver un code plus "lisible".

[edit]
Oups, j'oubliais de vous dire comment l'installer ! Il faut décompresser le contenu de l'archive (2 dossiers : addons et data) et envoyer ça vers la racine de votre installation pluxml puis aller dans l'administration pour choisir ma barre dans les paramètres.
[/edit]

Stéphane · novembre 2010

Bonjour jojoba

Très joli travail. Je viens d'installer la barre. ça fonctionne sans problème avec chrome.
J'ai regardé le code rapidement: c'est propre.
Bravo et merci de partager ton travail.
N'hésite pas à le mettre sur le wiki

jojaba · novembre 2010

Stéphane a écrit:

Bonjour jojoba
Très joli travail. Je viens d'installer la barre. ça fonctionne sans problème avec chrome.
J'ai regardé le code rapidement: c'est propre.
Bravo et merci de partager ton travail.
N'hésite pas à le mettre sur le wiki

Merci pour tes mots de soutien, ça fait toujours plaisir !!!
Cependant, il me semble avoir oublié d'intégrer la prise en charge d'insertion d'images distantes, il va falloir que je fasse ça dès que j'ai plus de temps...
Je préfère attendre des réactions d'autres beta-testeurs avant de mettre sur le wiki. D'ailleurs, si tu trouves un dysfonctionnement, n'hésite pas à m'en faire part ici

Il faudra aussi que j'explique comment fonctionne la barre et ce qu'on peu en faire. Comme dit, dès que j'ai un peu plus de temps...

jojaba · novembre 2010

Bonsoir,

Nouvelle version avec fonctionnalité un peu plus avancées... Entre autres :
¤ chiffrement hexadécimal des adresses électronique avant insertion du code "mailto"
¤ transformation des < et > en entités html avant insertion du code pre
¤ lifting du code de prise en charge des fonctions
¤ ajout de petits plus dont je ne me souviens plus...

Il faut à présent que je me mette à l'écriture d'une aide sur le wiki. Une question avant de commencer, où dois-je faire cela ? J'ai vu qu'il y a une rubrique pour les éditeurs CKEditor et Whizzywig intitulée "Editeurs de texte" or cette barre d'outils n'est pas vraiment un éditeur de texte mais bien une barre d'outils d'insertion de code. D'autre part, comment je fais pour créer une nouvelle page ?

Je vous donne le lien pointant vers la nouvelle version que je vous propose :
ezHTML 0.91

Merci d'avance pour vos remarques

jojaba · novembre 2010

Pfiou, quel boulot !!!
Je viens de terminer un premier jet de page sur le wiki. Il va falloir que je relise (ou que vous relisiez) ça à tête reposée...
Voici l'adresse de la page : http://wiki.pluxml.org/index.php?page=ezHTML

Vous constaterez que j'en suis à la version 0.92 pour la toolbar, en effet, en écrivant la page d'aide, j'ai pu encore constaté, lors de mes tests, quelque bogues...

A+

super_g2 · novembre 2010

énorme cette barre, je viens de la mettre en place, vraiment excellente !!

jojaba · novembre 2010

super_g2 a écrit:

énorme cette barre, je viens de la mettre en place, vraiment excellente !!

Ah ben je suis content qu'elle te plaise !
Si tu l'utilises, merci de faire tes remarques, commentaires, suggestions ici

cyril · novembre 2010

Super! Elle est terrible merci

!

jojaba · novembre 2010

Encore trouvé un petit bogue d'affichage pour le bouton blockquote...
Version 0.93 prête pour téléchargement

http://code.google.com/p/jojaba-code/downloads/detail?name=ezhtml-0.93-26-11-2010.zip

jojaba · novembre 2010

Nouvelle version disponible :
http://code.google.com/p/jojaba-code/downloads/detail?name=ezhtml-0.94-28-11-2010.zip

J'avais envie de la rendre plus "modulable"/personnalisable. J'ai donc créé un fichier de configuration qui simplifie les manipulations que je note dans le changelog suivant :

# Possibilité de choisir les boutons affichés dans la barre, du thème utilisé et du fait que les émoticônes sont affichées dans la barre ou non (en éditant et modifiant le fichier config.php)
# Ajout d'un thème (en fait j'ai renommé le thème "simple" en "grey" et ai ajouté un thème "simple" différent)

Bonne utilisation

super_g2 · novembre 2010

énorme, je verrais bien cette barre remplacée la plxtoolbar

jojaba · décembre 2010

Bonjour,

Je souhaiterais ajouter 3 boutons à cette barre d'outils permettant d'insérer le code pour intégrer une vidéo, du son au format mp3 et un Diaporama. L'insertion d'une vidéo youtube étant relativement simple à partir du code proposé par youtube, je ne me suis pas lancé dans cette direction-là. En revanche, l'insertion d'une vidéo hébergée sur mon serveur et en utilisant un code valide, c'est quelque chose qui me parlais davantage. J'ai donc décidé, en partie parce que je connaissais déjà dewplayer, d'utiliser les 3 application flash que dew propose sur son site :
======================================
¤ Dewplayer (lecteur mp3)
¤ Dewplayer (lecteur flv et f4v)
¤ Dewslider (Flash pour voir des images en diaporama)
======================================
C'est relativement simple à mettre en place, mais je vais prendre un peu de temps pour préparer les lignes JS qui vont permettre d'insérer le code de manière valide par rapport au standard Web mais également de manière à pouvoir être pris en compte par IE qui ne sait pas afficher correctement des objets quand on utilise du code valide...
Dew préconise d'utiliser swfobject pour l'intégration de ses lecteurs. J'ai trouvé une explication en français pour utiliser ce petit javascript (j'ai opté pour la méthode de publication statique). C'est là que je ne sais pas trop comment faire. Il faut que je place la ligne suivante dans la partie <head> de chaque page :

<script type="text/javascript" src="swfobject.js"></script>

Or, je ne sais pas s'il y a une méthode comme celle disponible pour intégrer la ligne js de la toolbar dans le <head> des pages de l'administration qui permette de faire la même chose pour les pages du theme. Peut-être qu'on peut faire ça autrement, je suis ouvert à toute proposition pour aborder cela. Si ce genre de fonction n'existe pas dans Pluxml ou si je n'arrive pas à trouver un moyen de faire ça dynamiquement, il faudra effectuer la manipulation manuellement... ce serait dommage de ne pas pouvoir installer ça de manière plus simple afin que tous les utilisateurs (y compris ceux qui n'ont pas beaucoup de connaissance en codage) puisses installer ces nouvelles fonctionnalités rapidement et facilement

Merci pour votre attention et votre éventuelle aide.

gcyrillus-nomade · décembre 2010

bonjour,

pour integrer ce script:
Je vois 2 soluces

1) dans le head du template/theme ou un autre fichier du theme (dans le footer avant </body> par exemple).
2) dans le chapo de l'article lui même.

Une balise script peut-être inserer dans le contenu d'une page. (balise link : dans le head )

++

jojaba · décembre 2010

Merci pour ces propositions

Donc, oui, on peut mettre ça (mais de manière manuelle) dans le fichier "head.php" du template utilisé. C'est mon idée initiale mais je ne sais pas comment je pourrai faire pour que cela se fasse sans intervention de celui qui installe la barre d'outils.
Par contre, si j'ai bien compris tes propos, on pourrait ajouter la ligne qu'il faut mettre normalement dans la partie <head> de chaque fichier n'importe où, même dans le <body> ? On peut mettre du javascript dans les formulaires de création d'article ? Le souci, si on procède de cette manière, est que lors de l'insertion du code du lecteur, on pourra insérer la ligne js requise mais lorsqu'on insérera un deuxième lecteur dans la même page, on aura à nouveau cette ligne js (donc une deuxième fois), ce qui à mon avis, n'est pas bon...

jojaba · décembre 2010

Bpn ça avance, doucement, mais je commence à mieux comprendre comment je pourrai faire pour mettre tout ce beau monde en place. J'ai fait différents tests et il s'avère qu'il faut que je donne le chemin absolu vers mon fichier Flash et le fichier flv pour que ça fonctionne et dans l'admin et sur la partie publique du site (je parle du lecteur vidéo là). Il me faudr, je n'arrive pas ait donc récupérer la racine du site (quelque chose du genre "http://mondomaine.fr/". J'ai essayer de trouver ça dans les bibliothèques mais rien à faire.
Voici ce que j'ai réussi à obtenir de mieux :

$site_root = plxUtils::getRacine();

Mais ce code me donne la valeur suivante :"http://localhost/pluxml/core/admin/article.php"; (mon domaine ici c'est "http://localhost/pluxml/"

Je peux retraiter cette chaîne en supprimant ce qui n'est pas utile mais je me demandais si on ne pouvait pas retrouver la racine directement...
Merci

[edit]
Je pense que la meilleure solution serait de récupérer l'adresse de la racine dans le fichier xml "../data/configuration/parametres.xml". J'ai vu ça :

<parametre name="racine"><![CDATA[http://localhost/pluxml/]]></parametre>

Je n'ai jamais fait ça, récupérer des données dans un fichier xml. Une petite explication svp

[/edit]

jojaba · décembre 2010

jojaba a écrit:
[edit]
Je pense que la meilleure solution serait de récupérer l'adresse de la racine dans le fichier xml "../data/configuration/parametres.xml". J'ai vu ça :
<parametre name="racine"><![CDATA[http://localhost/pluxml/]]></parametre>
Je n'ai jamais fait ça, récupérer des données dans un fichier xml. Une petite explication svp
[/edit]

Eh bien mon explication, je l'ai eu sur le site du Zéro : http://www.siteduzero.com/forum-83-589963-p1-recuperer-donnees-dans-xml-avec-php.html#

Dès que j'ai plus de temps, je me remets dans le boulot et vous propose ça en test...

fightsoul · décembre 2010

Salut,
si tu veux simplement récupérer la racine du site je te conseille d'utiliser la classe plxAdmin qui te permet de la récupérer très facilement.

$plxAdmin->aConf['racine'];

pour la p'tite info, la tableau aConf te permet de récupérer la configuration du site

jojaba · décembre 2010

fightsoul a écrit:
Salut,
si tu veux simplement récupérer la racine du site je te conseille d'utiliser la classe plxAdmin qui te permet de la récupérer très facilement.
$plxAdmin->aConf['racine'];
pour la p'tite info, la tableau aConf te permet de récupérer la configuration du site

Ah ben voilà ce que je recherchais ! Merci beaucoup, ça va simplifier les choses ça

jojaba · décembre 2010

ah ben non, ça ne marche pas, ça me donne une valeur "vide"...

Je suis désolé, je en suis pas très à l'aise avec la notion d'objet. Je suis sûr qu'il y a possibilité de récupérer cette racine, mais je n'arriverai pas à trouver seul...

Stéphane · décembre 2010

<?php echo $plxAdmin->aConf['racine']; ?>

jojaba · décembre 2010

Stéphane a écrit:

<?php echo $plxAdmin->aConf['racine']; ?>

Merci pour ça Stéphane, mais ça ne résout pas mon problème. Voici ce que je fais en réalité...
Dans un fichier nommé "config.php" je défini cette valeur ainsi :

$site_root = $plxAdmin->aConf['racine'];

Dans le fichier "ezhtml.php" situé dans le même dossier que "config.php" j'ai ça :

public function addFooter() {
	        # Récupération des données de configuration
	        include ('config.php');
		# Initialisation de ezhtml avec chargement des valeurs de configuration
		echo "\n".'<script type="text/javascript">'."\n";
		[...]
		/* Lecteurs */
		echo "\t".'//valeurs par défaut des lecteurs'."\n";
		echo "\t".'var site_root = "'.$site_root.'";'."\n";
		[...]
		//initialisation ezHTML
		echo "\t".'ezHTML.init();'."\n";
		echo '</script>'."\n";
	}

(j'ai enlevé les choses non pertinentes pour le problème actuel).

Dans la source de la page je vois ça :

[...]
//valeurs par défaut des lecteurs
	var site_root = "";
[...]

Voilà, je pense que là vous avez toutes les données utiles pour m'aiguiller.
Merci de votre patience.

fightsoul · décembre 2010

Salut,
en effet au temps pour moi, voici le code qui devrais marcher :

<?php 
global $plxAdmin;

echo $plxAdmin->aConf['racine'];
?>

jojaba · décembre 2010

fightsoul a écrit:
Salut,
en effet au temps pour moi, voici le code qui devrait marcher :
<?php 
global $plxAdmin;
echo $plxAdmin->aConf['racine'];
?>

Merci beaucoup. J'ai testé ça marche !

jojaba · décembre 2010

Me revoici, enfin !
Je viens de boucler a nouvelle barre. Voici les améliorations apportées :

* Installation automatique du dossier des émoticônes dans le dossier iamge défini dans les paramètres avancés dasn l'administration
* ajout de 3 boutons permettant d'insérer un des trois lecteurs de Dew (Dewslide, Dewtube, Dewplayer)

Téléchargement de cette nouvelle version (0.99) :
http://code.google.com/p/jojaba-code/downloads/detail?name=ezhtml-0.99-29-12-2010.zip
[Attention, veuillez d'abord supprimer le dossier /addons/editor.ezhtml/ avant d'installer cette nouvelle version !]

Pas le temps d'expliquer comment ça marche, il va falloir découvrir par vous-même.
Les lecteurs proposés par Dew fonctionnent mais restent "imparfaits" :
* Pas d'affichage de boutons pour le slideshow
* Pas de possibilité de passer une vidéo en plein écran
* Quelques options ne fonctionnent pas

Sachez que j'ai opté de ne pas utiliser le paramétrage par fichier xml, comme cela est proposé sur les pages des lecteurs Dew.
Pour comprendre comment fonctionnent les lecteurs :
* Dewplayer (lecteur mp3)
* Dewslider (diaporama)
* Dewplayer (lecteur vidéo)
J'aurais pu chosiir d'autres lecteurs, comme ceux de neolao que j'ai également déjà utilisé et qui fonctionnent bien (FLVPlayer et lecteur mp3). Peut-être dans la prochaine version, à moins que vous me conseilliez un lecteur opensource...

Voilà, j'attends vos réactions.
En attendant, je vous souhaite une bonne et heureuse année 2011 !

jojaba · février 2011

Ah ben je vois que la version 5.1 de Pluxml est sortie...
Je l'ai installée sans encombre sur mon installation de test en local en mettant à jour la version 5.0.2.
Par contre, il va falloir que je place ezhtml Toolbar à un autre emplacement apparemment.
J'ai vite jeté un oeil à plxToolbar... La mise à jour consiste en quoi ?
Merci d'avance

Stéphane · février 2011

jojaba a écrit:

Ah ben je vois que la version 5.1 de Pluxml est sortie...
Je l'ai installée sans encombre sur mon installation de test en local en mettant à jour la version 5.0.2.
Par contre, il va falloir que je place ezhtml Toolbar à un autre emplacement apparemment.
J'ai vite jeté un oeil à plxToolbar... La mise à jour consiste en quoi ?
Merci d'avance

plxToolbar est maintenant un plugin. Le code respect la structure des plugins. Il y a aussi des petites changements dans le code des custom boutons pour qu'ils soient reconnus par le plugin.

jojaba · février 2011

Stéphane a écrit:

plxToolbar est maintenant un plugin. Le code respect la structure des plugins. Il y a aussi des petites changements dans le code des custom boutons pour qu'ils soient reconnus par le plugin.

J'ai trouvé dans le code source de pluxml 5.1 tout un pdf sur le développemeent de plugins (sacré boutot Stéphane !!!). J'y ai trouvé tous les renseignements pour pouvoir adapter ezhtml à cette nouvelle version. Je pense même que je pourrai adapter le thème pour l'administration que j'avais développé pour le transformer en plugins...
Merci pour le travail fournit.

Stéphane · février 2011

Oui effectivement il y a le pdf qui explique les plugins

Créer une nouvelle toolbar...

Réponses