Supprimer le panneau de droite

[Perrine]

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]

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]

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 !

[chris972]

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.

[Perrine]

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.

[chris972]

Donc en fait, faire des boutons personnalisés qui reprendront les différentes fonctionnalités de ces items, c'est bien ça ?

[Perrine]

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é

[chris972]

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]

[Perrine]

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

[chris972]

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.

[Perrine]

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

[chris972]

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...

[Perrine]

Euh je sais plus pourquoi j'ai fait ça ^^ Sûrement des restes de tests !

[chris972]

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 ?