[plxEditor 1.1] [5.1.3] Comment ajouter des classes persos ?

Deevad

Bonjour,

Superbe travail sur cette 5.1.3 , je me régale du WYSIWYG grâce au plugin plxEditor 1.1 bien fort pratique après quelques années de redaction de post en html , aussi le front-end en anglais est top , j'avais pour habitudes de le traduire dans le code à chaque pluxml. Félicitation aux developeurs !
( j'en ai fait un blog post : http://www.davidrevoy.com/index.php?article93/pluxml-get-updated )

Aussi, sur mon ancienne version, j'avais bricoler facilement les boutons de la plxtoolbar pour leur faire ajouter des 'div' avec des class personalisés, que mon CSS reprennait en front-end.
J'aimerai faire de même avec la nouvelle version en abusant du menu déroulant 'style' , pour faire un peu près ceci :



pour entrer ceci :

<div class="warning"> ... </div>
<div class="update"> ... </div>

( pour mon ancienne balise 'code', la balise 'pre' me semble bien mieux )
Est-ce possible ? Merci d'avance


exemple des balises en front end en action ( warning et update ) :
http://www.davidrevoy.com/?article31/installing-gimp-painter-on-windows

ermina

Bonjour à tous,

je me permets de faire remonter cette question car cette possibilité m'intéresse, et je n'ai pas trouvé de solution.
Avant la mise à jour vers 5.1.4, j'utilisais l'éditeur whizzywig, qui permettait, lors de l'insertion d'une image, de lui donner des attributs de style (margin, float:left ou right, etc..) de façon bien pratique.

Je me demande donc comment faire (si cela est faisable) pour ajouter dans le menu "Style" de plxEditor une entrée qui appliquerait ce genre de propriétés pour l'image que j'aurais sélectionée dans mon article en cours d'édition.

Stéphane

Bonjour ermina

je n'ai pas de réponse à te donner car je ne me suis pas pencher sur la demande.
je ne sais donc pas dire si c'est faisable facilement.
je me note ça dans un coin pour regarder quand ça me sera possible

bg62

@Deevad
attention, tu es chez ovh et tu as des ID de sessions genre :
"blog.php?PHPSESSID=e4ec0ba6dbe53c87bacce15fc37c59e7"
qu'il vaudrait mieux éviter, surtout pour la prise en compte par les moteurs
la solution :
http://blog.unesourisetmoi.info/?article422/url-etrange-generee-sur-un-serveur-ovh
@+

Jerry Wham

bg62 a écrit:

@Deevad
attention, tu es chez ovh et tu as des ID de sessions genre :
"blog.php?PHPSESSID=e4ec0ba6dbe53c87bacce15fc37c59e7"
qu'il vaudrait mieux éviter, surtout pour la prise en compte par les moteurs
la solution :
http://blog.unesourisetmoi.info/?article422/url-etrange-generee-sur-un-serveur-ovh
@+

Euh, je pense que ça n'a rien avoir. C'est un problème de php.ini qui fait passer les identifiants de session dans l'url plutôt que dans un cookie.

Pour répondre à la question initiale de Deevad, il y a une solution mais elle est un peu bancale.
Je m'explique :
Lorsqu'on sélectionne une option dans la liste déroulante de plxeditor, javascript exécute la commande "formatblock", native à javascript, qui n'accepte que certaines balises de type block : p, pre, h*, div et address (si j'ai bien compris). Les listes de type ul ou ol, ne sont pas toutes prises en charge en fonction du navigateur utilisé.

Cela nous laisse que peu d'alternatives pour insérer de nouvelles balises avec de nouvelles classes.
Mais on peut gruger, en jouant sur les balises h*, sachant que l'on utilise que peu souvent (voire jamais) des indices supérieurs à 3.
Je vais donc utiliser cette astuce pour insérer une balise div ayant la classe "important".
Ainsi, à la ligne 85 de plxeditor.js, j'ajoute :

<option value="<h4>">important</option>

après l'option "pre" et la balise </select>.
Ensuite, dans la fonction getFrameHtml, après la ligne 175, j'ajoute la ligne suivante :

        html += '<style type="text/css">h4, div.important { background-color: #edeb84; padding: 0.75em 1.5em; border: 1px solid #dddddd; }</style>';

qui permet de mettre en forme la balise ayant la classe important ainsi que le block de type h4.
Puis, dans la fonction toXhtml, j'ajoute les lignes suivantes, après la ligne 283 :

v=v.replace(/<h4>/gi,'<div class="important">');
v=v.replace(/<\/h4>/gi,'<\/div>');

Enfin dans la fonction formatHtml, j'ajoute juste avant le return html les lignes suivantes :

html = html.replace("<span class=\"tag\">&lt;h4&gt;</span>", "<span class=\"tag\">&lt;div class=\"important\"&gt;</span>");
html = html.replace("<span class=\"tag\">&lt;/h4&gt;</span>", "<span class=\"tag\">&lt;/div&gt;</span>");

Au final, tous les blocks de type <h4></h4> seront remplacés par la balise <div class="important"></div>.
On pourra ensuite faire de même pour les block h5 à h6.