créer un nouveau bouton

[gtraxx]

Je suppose que beaucoup seront intéresser de le savoir donc je me lance,
J'aimerai créer un nouveau bouton dans la navigation supérieur de wymeditor, celui-ci sous une image d'un grand U ajouterai une class nommé underline.
C'est un premier exemple, mais pour faire plus fort un bouton nommé spec link qui serai en faites un simple lien avec une class bien définie pour ajouter des liens lightbox par exemple.
Vous me suivez ...
je cherche juste le moyen de créer des boutons supplémentaire, une indication de la manière de s'y prendre , fichiers a modifier m'aiderai beaucoup
je suppose que l'ont peux faire un fichier indépendant afin de ne rien toucher au core de wymeditor
si j'y arrive je posterai un sujet qui pourra être épinglé a titre de tutos pour les personnes intéresser

[Xyo]

J'avoue que c'est quelque chose qui m'intéresse fort bien également !

[Gregco]

Hello,

Il y a une démo de comment procéder pour créer des boutons... voilà l'exemple : http://files.wymeditor.org/wymeditor/trunk/src/examples/07-custom-button.html

Pour underline voici en gros a quoi ça devrait ressembler. Pour savoir ou tu dois placer le code que je t'écris, matte le code source de l'exemple linké au dessus

Code: Select all

//construct the button's html
            var html = "<li class='wym_tools_u'>"
                     + "<a name='btn_u' href='#'"
                     + " style='background-image:"
                     + " url(../wymeditor/skins/default/icons.png)'>"
                     + "Underline"
                     + "</a></li>";

            //add the button to the tools box
            jQuery(wym._box)
            .find(wym._options.toolsSelector + wym._options.toolsListSelector)
            .append(html);

            //handle click event
            jQuery(wym._box)
            .find('li.wym_tools_u a').click(function() {
                wym.wrap('<u>', '</u>');
                return(false);
            });


Devrait pas y avoir d'erreur (pas testé mon code, donc sous réserve quand même)

Quand aux styles regarde du coté de la doc: http://trac.wymeditor.org/trac/wiki/0.5/Customization le parametre "styles & stylesheet"

ça te permet de remplir la box "Classes" que tu peux voir sur la droite dans l'exemple (le lien au sommet de mon poste)

++
Greg

[Nexion]

Bonjour,

Ce sujet m'intéresse beaucoup aussi
Merci à Gregco pour son code.

Cependant, j'ai testé et il fonctionne très bien sauf que :

-> après avoir cliqué sur le bouton, du coté wysiwyg, le texte est bien souligné mais dans le code source, il n'y a pas la présence du <u>...</u> de même que lors de la prévisualisation, le texte n'est pas souligné.
-> si je veux retirer le style <u>...</u> je sélectionne le texte et appuie sur ce même nouveau bouton, rien ne se passe. Il n'est en effet prévu que pour ajouter les balises.

J'ai essayé d'aller voir comment était fait les boutons bold, italic, etc mais je dois dire que je suis un peu perdu J'ai épluché les exemples, mais rien qui correspond à ce que je cherche.
A la base, j'aurai même aimé avoir un bouton qui rajoute un style spécifique au texte. Tout comme la boite "classesItems", mais en bouton. J'ai bien réussi à faire la manip et rajouter mes styles dans cette boite, mais j'aurai aimé les rajouter avec des boutons.

Me "casser la tête" ainsi, au lieu de le faire simplement via "classesItems", c'est ma manière de me former aux nouveaux outils ... Si j'arrive a faire qlq chose de compliqué, j'arriverai a faire qlq chose de simple par la suite

Si qlq a une piste, je suis preneur.

Merci

[Nico]

Salut,

Je n'ai pas de réponse exacte à la question (Et pas le temps de développer là tout de suite), mais j'ai peut-être des éléments de réponse.

J'ai essayé d'aller voir comment était fait les boutons bold, italic, etc mais je dois dire que je suis un peu perdu

Les fonctions blod et Italic utilisent des fonctionnalités intégrées du navigateur (execCommand). Du coups, en fouillant le code de wymeditor, c'est un peu déroutant. Pas pratique de voir comment marche le truc.
Et du coup aucune solution pour faire la même chose simplement pour d'autres balises spécifique type span avec class.

Par contre il y a moyen de faire du souligné avec la command execCommand underline, mais je ne saurais pas te dire là comment exactement mettre ça en place dans un bouton wymeditor.


Sinon, pour mettre en place un bouton qui ajoute une balise avec une class "tutu" sur le texte sélectionné, et suppression de la balise lors d'un deuxième clique sur le bouton etc... (comportement normal du bouton gras par exemple)... C'est plutôt galère si tu veux un truc vraiment bien fonctionnel.
J'avais cherché à le faire pour ajouter un span avec une class bidon, et je m'étais arraché les cheuveux.
Malheureusement là dans l'immédiat je n'ai pas trop le temps de me repencher sur le sujet (il est temps de rentrer chez moi), mais en gros j'avais mis en place une solution qui intégrait un lien avec une URL specifique, et ensuite je remplace ce lien par la balise de mon choix. C'est la seule méthode que j'ai trouvé pour à la fois tiré parti des fonctions internes du navigateur (plus simple à mettre en place), et obtenir des balises perso.

Mais j'ai peut-être zappé une solution miracle

++