Forum closed. New forum available at http://community.wymeditor.org/

Supprimer le panneau de droite

For those who prefer to speak French.

Supprimer le panneau de droite

Postby Perrine on Fri Nov 30, 2007 10:14 pm

Bonjour,

Avant tout : beau boulot sur cet éditeur qui est à la hauteur de mes espérances ! :) Depuis le temps que je traine mes guêtres avec TinyMCE, je finissais par croire qu'on ne trouverait pas d'alternative à ce satané mangeur de code valide :p

Est-il possible de positionner le choix des "types de textes" dans la barre de menu haute ?

Si non, est-il possible de ne pas afficher le panel de droite ? J'ai un site en 800x600 avec une belle nav droite et du coup, ça me laisse pas grand chose pour le textarea. De plus, pour l'utilisation que je veux faire de l'éditeur, j'ai juste besoin de la mise en gras, ajout de liens et basta... pas la peine des types de texte ou des sélecteurs de class.

J'ai testé un bête
Code: Select all
        postInit: function(wym) {
            jQuery(wym._box).find(wym._area_main)
                .css('margin-right', '0');
        }

pour voir si je pouvais virer le margin-right du textarea mais marche pas... pas étonnant au vu de mes compétences en js (et de l'heure ! :) )

Si quelqu'un passe par là et a une solution, je serai ravie ;)

Bonne soirée !
Perrine
 
Posts: 10
Joined: Fri Nov 30, 2007 10:06 pm

Postby Perrine on Sat Dec 01, 2007 12:38 pm

Bon, j'ai trouvé un début de réponse grâce à un lien trouvé sur le forum : http://files.wymeditor.org/wymeditor/tr ... ustom.html

Je vais voir ce que j'arrive à en faire ! ;)
Perrine
 
Posts: 10
Joined: Fri Nov 30, 2007 10:06 pm

Postby Perrine on Sat Dec 01, 2007 5:02 pm

Alors là... C'est bluffant tout ce qu'il est possible de faire avec wymeditor en terme de personnalisation ! Chapeau bas messieurs ! :)

Pour ceux que ça intéresse, voici la config à laquelle j'arrive pour afficher quelques tools en button + la liste déroulante des styles de texte.

Code: Select all
var $j = jQuery.noConflict();

$j(function() {
    $j('.wymeditor').wymeditor({
   
        stylesheet: 'styles.css',
        lang: 'fr',

      boxHtml:   "<div class='wym_box'>"
              + "<div class='wym_area_top'>"
              + WYM_TOOLS
              + WYM_CONTAINERS
              + "</div>"
              + "<div class='wym_area_left'></div>"
              + "<div class='wym_area_right'>"
              + "</div>"
              + "<div class='wym_area_main'>"
              + WYM_HTML
              + WYM_IFRAME
              + WYM_STATUS
              + "</div>"
              + "<div class='wym_area_bottom'>"
              + "<a class='wym_wymeditor_link' href='http://www.wymeditor.org/'>WYMeditor</a>"
              + "</div>"
              + "</div>",

        toolsItems: [
        {'name': 'Bold', 'title': 'Strong', 'css': 'wym_tools_strong'},
        {'name': 'Italic', 'title': 'Emphasis', 'css': 'wym_tools_emphasis'},
        {'name': 'Superscript', 'title': 'Superscript', 'css': 'wym_tools_superscript'},
        {'name': 'Supbscript', 'title': 'Subscript', 'css': 'wym_tools_subscript'},
        {'name': 'CreateLink', 'title': 'Link', 'css': 'wym_tools_link'},
        {'name': 'Unlink', 'title': 'Unlink', 'css': 'wym_tools_unlink'},
        {'name': 'InsertImage', 'title': 'Image', 'css': 'wym_tools_image'},
        {'name': 'InsertOrderedList', 'title': 'Ordered_List', 'css': 'wym_tools_ordered_list'},
        {'name': 'InsertUnorderedList', 'title': 'Unordered_List', 'css': 'wym_tools_unordered_list'},
        {'name': 'Indent', 'title': 'Indent', 'css': 'wym_tools_indent'},
        {'name': 'Outdent', 'title': 'Outdent', 'css': 'wym_tools_outdent'},
        {'name': 'Paste', 'title': 'Paste_From_Word', 'css': 'wym_tools_paste'},
        {'name': 'Preview', 'title': 'Preview', 'css': 'wym_tools_preview'}
    ],

        containersItems: [
        {'name': 'P', 'title': 'Paragraph', 'css': 'wym_tools_containers_p'},
        {'name': 'H2', 'title': 'Heading_2', 'css': 'wym_containers_h2'},
        {'name': 'H3', 'title': 'Heading_3', 'css': 'wym_containers_h3'},
        {'name': 'H4', 'title': 'Heading_4', 'css': 'wym_containers_h4'},
        {'name': 'BLOCKQUOTE', 'title': 'Blockquote', 'css': 'wym_containers_pre'},
    ],

         dialogFeatures: "menubar=no,titlebar=no,toolbar=no,scrollbars=yes,resizable=yes,width=750,height=500,top=0,left=0",

      postInit: function(wym) {
        $j(wym._box)
            .find(".wym_area_top .wym_containers")
            .css("width", "130px")
            .css("float", "left")
            .css("margin-left", "10px")
            .find("ul")
            .css("width", "105px");

        $j(this._box).find(".wym_tools, .wym_classes ")
            .find(WYM_H2)
            .append("<span>&nbsp;&gt;</span>");
        }

   
    });
});


On peut aussi prévisualiser le texte tappé avec affichage de la même manière que sur le site grâce à l'appel de la css du dossier skin... Excellent !

Merci encore ! :)
Perrine
 
Posts: 10
Joined: Fri Nov 30, 2007 10:06 pm

Postby chris972 on Tue Dec 04, 2007 2:37 pm

Bonjour,

Je découvre avec bonheur wymeditor. Cependant, j'ai encore un peu de mal avec la customisation.
Dans le même ordre d'idée que ce qui est recherché ici : http://forum.wymeditor.org/forum/viewto ... toolsitems
quelqu'un aurait-il un exemple de paramétrage ?

Mon souhait est également de remplacer les containersItems par des boutons de toolsItems, afin de n'avoir qu'une barre d'outils.

Merci d'avance.
chris972
 
Posts: 6
Joined: Tue Dec 04, 2007 2:31 pm

Postby Perrine on Tue Dec 04, 2007 3:17 pm

Si je ne me trompe pas, la définition du mode d'affichage de chaque fonctionnalité passe par sa class css. Il faut que le div qui contient le container ait la class wym_buttons. Il faut aussi du coup créer l'image H1, H2, etc qui s'affichera à la place de la liste déroulante.
Perrine
 
Posts: 10
Joined: Fri Nov 30, 2007 10:06 pm

Postby chris972 on Tue Dec 04, 2007 4:34 pm

Donc en fait, faire des boutons personnalisés qui reprendront les différentes fonctionnalités de ces items, c'est bien ça ?
chris972
 
Posts: 6
Joined: Tue Dec 04, 2007 2:31 pm

Postby Perrine on Tue Dec 04, 2007 7:47 pm

Dans le package de base, seuls les boutons par défaut sont livrés (B, I, exposant, indice, etc...) mais pas les boutons pour les containers (p, hn, cite, etc...)

J'imagine qu'il est possible de le faire, tout ça en css mais je n'ai pas essayé !

Voilà en tout cas, ce à quoi j'arrive : wymeditor personnalisé
Perrine
 
Posts: 10
Joined: Fri Nov 30, 2007 10:06 pm

Postby chris972 on Fri Dec 07, 2007 2:46 pm

Et bien cela fait un moment que j'étudie ta page, et je ne trouve pas comment tu as réussi à mettre le 2ème bloc à droite du premier. Moi, il va systématiquement au dessous quoique je change. Et pourtant, il me semble faire la même chose que toi, à moins que je n'ai loupé un style quelque part.
[edit]
J'ai finalement réussi en mettant :
Code: Select all
        $jj(wym._box)
            .find(".wym_area_top .wym_containers")
            .css("width", "130px")
            .css("float", "left")
            .css("margin-left", "10px")
            .find("ul")
            .css("width", "105px");
        $jj(wym._box)
            .find(".wym_area_top .wym_tools")
            .css("float", "left")
            .css("margin-left", "10px");

Testé uniquement sous FF
[/edit]
chris972
 
Posts: 6
Joined: Tue Dec 04, 2007 2:31 pm

Postby Perrine on Fri Dec 07, 2007 2:58 pm

Sur le div qui a pour class wym_tools wym_section wym_buttons et qui contient les boutons, j'ai donné un width afin que le div en question ne prenne pas toute la largeur de l'iframe.

Ensuite, je mets un float:right, sur le div qui contient le menu déroulant. Ce float est ajouté via la personnalisation de l'appel de Wymeditor comme ça :

Code: Select all
      postInit: function(wym) {
        $jj(wym._box)
            .find(".wym_area_top .wym_containers")
            .css("width", "130px")
            .css("float", "right")
            .css("margin-right", "7px")
            .find("ul")
            .css("width", "105px");

        $jj(this._box).find(".wym_tools, .wym_classes ")
            .find(WYM_H2)
            .append("<span>&nbsp;&gt;</span>");
        }


Je me suis basée sur un exemple donné sur le lien plus haut.

Dis-moi si tu t'en sors avec ça ;)
Perrine
 
Posts: 10
Joined: Fri Nov 30, 2007 10:06 pm

Postby chris972 on Fri Dec 07, 2007 3:05 pm

Perrine wrote:Sur le div qui a pour class wym_tools wym_section wym_buttons et qui contient les boutons, j'ai donné un width afin que le div en question ne prenne pas toute la largeur de l'iframe.

Ok, mais je n'ai pas vu ou tu as fixé ce width en fait.

Ensuite, je mets un float:right, sur le div qui contient le menu déroulant. Ce float est ajouté via la personnalisation de l'appel de Wymeditor comme ça :

Ça, j'ai bien vu.

Dis-moi si tu t'en sors avec ça ;)

En fait, je m'en sors tel que je l'ai indiqué dans mon edit plus haut. A la limite, je préfère que d'avoir à fixer le width de la partie gauche.
Etape suivante, je cherche à faire que le ul de wym_panel ne soit plus un display block.
Je devrais arriver à mes fins je pense.
Merci en tout cas.
chris972
 
Posts: 6
Joined: Tue Dec 04, 2007 2:31 pm

Postby Perrine on Fri Dec 07, 2007 3:07 pm

Dans ma feuille de style screen.css, ligne 95
Si tu utilises Firefox, je te conseille l'installation de Firebug qui permet de trouver facilement tous les styles appliqués à un élément ;)
Perrine
 
Posts: 10
Joined: Fri Nov 30, 2007 10:06 pm

Postby chris972 on Fri Dec 07, 2007 4:11 pm

Perrine wrote:Dans ma feuille de style screen.css, ligne 95

Ahhh !
Mais pourquoi ne pas faire tout au même endroit alors ?
Pourquoi pas plutôt :
Code: Select all
         $jj(wym._box)
            .find(".wym_area_top .wym_tools")
            .css("width", "320px")
            .css("float", "left")

qui simplifierait la lisibilité du coup ?

Si tu utilises Firefox, je te conseille l'installation de Firebug qui permet de trouver facilement tous les styles appliqués à un élément ;)

Oui, mais bon... :-)
chris972
 
Posts: 6
Joined: Tue Dec 04, 2007 2:31 pm

Postby Perrine on Fri Dec 07, 2007 4:17 pm

Euh je sais plus pourquoi j'ai fait ça ^^ Sûrement des restes de tests !
Perrine
 
Posts: 10
Joined: Fri Nov 30, 2007 10:06 pm

Postby chris972 on Fri Dec 07, 2007 4:28 pm

Ok :-)

Cependant, un truc bien embêtant c'est que tout ça ne passe pas du tout sous konqueror.
C'est bête, c'est le navigateur qui est le plus "IE compliant" sous Linux.
Pfff... obligé de recommencer à lancer vmware.
Quelqu'un a une astuce ?
chris972
 
Posts: 6
Joined: Tue Dec 04, 2007 2:31 pm


Return to French forum

Who is online

Users browsing this forum: No registered users and 1 guest