[nielad]

#~~~~~ NE PAS SUPPRIMER CE BLOC ~~~~~
#~ Version du CMS: 1.9.2
#~ Nom de l'hébergeur : Sur ordinateur perso
#~ Informations Système :
#~ Linux Debian Lenny 5.05 Kernel: 2.6.33.7
#~ Apache Server version: Apache/2.2.11 (Unix)
#~ PHP 5.2.16 (cli) (built: Dec 25 2010 12:58:07) Compilé et testé sur la machine.
#~~~~~ NE PAS SUPPRIMER CE BLOC ~~~~~

Bonjour.
J'ai un soucis avec l'éditeur Wisigwig de CMSMS pour l'insertion des espaces insécables.
Je n'arrive pas à les insérer : la transformation wisigwig => HTML les supprime.

Je confirme car je le constate en regardant le code HTML.

Je dois insérer plusieurs espaces consécutifs pour indenter du code.
A noter que j'utilise mes propres styles et non la balise code et les styles
donnés en exemple.

Certes, je peux les insérer en HTML avec les balise nbsp
mais ce n'est vraiment pas pratique, pour la façon dont je travaille puisque
je fait des copier/coller en provenance d'un autre site.

La solution de faire les copier/coller en HTML pur fonctionne mais
elle est beaucoup plus laborieuse.

Je peux aussi visualiser mon contenu en HTML ET le modifier,
mais alors, le code HTML est agglutiné (en fait sans retour ligne)
pour la visualisation et rend très difficil l'ajout ou la modification
de code car il faut retrouver l'endroit.

Je sait qu'il y a déja eu des posts sur le sujet mais je n'ai pas vu de solution
probante à ma connaissance.

Cela m'embetterai de devoir faire des extractions/modification/réinsertions dans
la base, car à ce moment là, je ne vois plus l'intérêt d'une gestion de contenu.

Si tel était le cas, je ne vois plus vraiment l'intéret d'utiliser un CMS.

Donc pourquoi l'éditeur Wisigwig supprime les espaces insécables?

Ou quelle solution pour les ajouter quand-même.

Par avance, je vous remercie.

[Jean le Chauve]

Une div ou une image transparente...

[bess]

pas mieux...

[Jean le Chauve]

Mieux : utilisation de la propriété css white-space (http://www.w3.org/TR/CSS2/text.html#white-space-prop).

[nielad]

Bon, j'ai regardé la doc mais c'est un peu flou pour l'instant.
Est-ce que cela veut dire que si j'ajoute la propriété white-space à mon style
"exemple" que j'ai définit dans mon fichier css avec la bonne valeur
à mon style tous les espaces seront visibles, y compris une suite d'espaces consécutifs?
Merci.

pas encore déterminé ce que serait la bonne valeur
Bon, Je tente de faire le test, mais si vous pouvez me guider ....

[nielad]

Alors c'est à peine mieux.
J'ai utilisé la propriété pre-wrap pour white-space.
Mais le problème principal est l'éditeur wisigwig de cmsms
me supprime une suite d'espace pour les transformer en 1 seul espace.
Yourait-til un moyen de changer ce comportement?
Pourrait-ton par exemple modifier les styles à ce niveau?
Donc ça marche en html mais dés que je repasse par le wisigwig,
ca me transforme mes suites d'espaces en 1 seul,et pour des raison
de convifvialité, je dois passer par l'éditeur wisigwig.
Merci.

[Jean le Chauve]

Tu crées une nouvelle classe dans ta feuille de style :

Code :

.espace {white-space: pre}

Cette classe va alors apparaître dans l'éditeur wysiwyg sous l'onglet styles.
Tu écris ton texte avec les espaces consécutifs.
Tu sélectionnes ce texte et tu lui appliques le style "espace".
Cela va automatiquement entourer le texte par un <span class="espace">blabla bla bla</span> et le tour est joué.

[nielad]

Bonsoir et merci pour tes propositions qui me font avancer.
J'ai essayé avec cette solution et malheureusement,
si les espaces consécutifs entre 2 mots sont possibles, les espaces en début de
ligne sont supprimés.
J'ai essayé avec pre-wrap et alors les espaces en début de ligne sont réduits
à 1 seule espace.
Autrement dit dans ton exemple, comment ajouter plusieurs espaces devant "blabla".
Donc cela ne me convient pas pour l'instant.
Merci.

[nielad]

c'est l'éditeur WYSIWYG qui me supprime les espaces devant.

[Jean le Chauve]

Ce n'est pas le wisiwig qui enlève les espaces en début de ligne, c'est le navigateur.
Il te reste à ajouter { text-indent: nbPixelspx } à ton span.
C'est compliqué, ton histoire ! Si c'est pour copier un autre site, insère-le avec <object>.
On ne comprend pas très bien ce que tu veux afficher, tu peux nous mettre un exemple, histoire de mieux cerner ton besoin et trouver la solution la plus adéquate.

[Jean le Chauve]

Trouvé : modifie la configuration de tiny : Extensions » Editeur TinyMCE WYSIWYG onglet "encodage des entités" : tu choisis "encodage des caractères".
Ainsi, Tiny remplacera les espaces par &nbsp;

[nielad]

Je souhaite juste afficher du code et l'indenter comme sur ce lien de mon encien site:
http://jeanyves.daniel.free.fr/teck/info...html#H2_22
donc ce n'est pas compliqué.
Sur ce site initial, ce sont bien des nbsp que j'ai en guise d'espace, et ta dernière solution devrait donc fonctionner.
Je vais essayer et si ça marche je clos l'indique et je clos le dossier.
Merci beaucoup.

[Jean le Chauve]

L'indentation dans les blocs de code ou dans les paragraphes ?

[Jean le Chauve]

Il y a une balise html spécifique pour afficher du code ET son indentation : <pre>code et les espaces</pre>
Voir : http://www.w3schools.com/tags/tag_pre.asp

[Jean le Chauve]

Le plus rapide :
Si tu ne l'as pas encore remis : Extensions » Editeur TinyMCE WYSIWYG onglet "encodage des entités" : tu choisis "raw" (sinon tous les espaces deviendront insécables).
Retour dans la page : clique sur le bouton html (2ème ligne à droite barre d'outils du wysiwyg).
Dans la nouvelle fenêtre, écris <pre> {literal}{/literal}</pre> ( literal pour empêcher cmsms d'évaluer le code).
Positionne le curseur entre les 2 literal et colle ton code.
Cela devra donner ceci :
ex :

Code :

<pre>{literal}<span style="color: #cc6600;">my</span><span style="color: #000000;">&nbsp;</span><span style="color: #00dddd;">$file</span><span style="color: #000000;">&nbsp;</span><span style="color: #000000;">=&nbsp;</span><span style="color: #990000;">'c:/mesprogrammes/essai.pl'</span><span style="color: #000000;">;<br /></span><span style="color: #cc6600;">if</span><span style="color: #000000;">&nbsp;</span><span style="color: #000000;">(&nbsp;</span><span style="color: #cc6600;">-d</span><span style="color: #000000;">&nbsp;</span><span style="color: #990000;">'c:/mesprogrammes'</span><span style="color: #000000;">&nbsp;</span><span style="color: #000000;">)&nbsp;{<br />&nbsp;&nbsp;&nbsp;</span><span style="color: #cc6600;">if</span><span style="color: #000000;">&nbsp;</span><span style="color: #000000;">(</span><span style="color: #cc6600;">-e</span><span style="color: #000000;">&nbsp;</span><span style="color: #990000;">'c:/mesprogrammes/essai.pl'</span><span style="color: #000000;">)&nbsp;{<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="color: #cc6600;">print</span><span style="color: #000000;">&nbsp;&nbsp;</span><span style="color: #990000;">"Le&nbsp;fichier&nbsp;existe&nbsp;OK"</span><span style="color: #000000;">;<br />&nbsp;&nbsp;...<br />&nbsp;&nbsp;}<br />&nbsp;&nbsp;</span><span style="color: #cc6600;">else</span><span style="color: #000000;">&nbsp;</span><span style="color: #000000;">{<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="color: #cc6600;">print</span>{/literal}</pre>

Problème, tu perds les couleurs.

Donc solution plus longue en gardant identités html dans la config du wysiwyg :
Tu vas dans les paramètres de Tiny : onglet avancé;
Formatage dans "Bloc de texte" : h1,h2,h3,h4,h5,h6,blockquote,dt,dd,code,samp,pre
Validation
Retour dans la page : écris {literal}{/literal} (pour empêcher cmsms d'évaluer le code).
Sélectionne le tout et applique le format : Preformatté.
Positionne le curseur entre les 2 literal et colle ton code.
Cela devra donner ceci après avoir décoché le wysiwyg :
ex :

Code :

<pre>{literal}<span style="color: #cc6600;">my</span><span style="color: #000000;">&nbsp;</span><span style="color: #00dddd;">$file</span><span style="color: #000000;">&nbsp;</span><span style="color: #000000;">=&nbsp;</span><span style="color: #990000;">'c:/mesprogrammes/essai.pl'</span><span style="color: #000000;">;<br /></span><span style="color: #cc6600;">if</span><span style="color: #000000;">&nbsp;</span><span style="color: #000000;">(&nbsp;</span><span style="color: #cc6600;">-d</span><span style="color: #000000;">&nbsp;</span><span style="color: #990000;">'c:/mesprogrammes'</span><span style="color: #000000;">&nbsp;</span><span style="color: #000000;">)&nbsp;{<br />&nbsp;&nbsp;&nbsp;</span><span style="color: #cc6600;">if</span><span style="color: #000000;">&nbsp;</span><span style="color: #000000;">(</span><span style="color: #cc6600;">-e</span><span style="color: #000000;">&nbsp;</span><span style="color: #990000;">'c:/mesprogrammes/essai.pl'</span><span style="color: #000000;">)&nbsp;{<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="color: #cc6600;">print</span><span style="color: #000000;">&nbsp;&nbsp;</span><span style="color: #990000;">"Le&nbsp;fichier&nbsp;existe&nbsp;OK"</span><span style="color: #000000;">;<br />&nbsp;&nbsp;...<br />&nbsp;&nbsp;}<br />&nbsp;&nbsp;</span><span style="color: #cc6600;">else</span><span style="color: #000000;">&nbsp;</span><span style="color: #000000;">{<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="color: #cc6600;">print</span>{/literal}</pre>

[nielad]

Ce que tu me propose en poste #11 fonctionne.
Seulement, ce n'est pas le comportement par défaut qui veux que
en html une suite d'espaces ne soient pas transformé en une suite d'nbsp.

Donc si j'ai bien compris, ce que tu me propose là (poste #15)
remplace ce que tu proposes au poste #11?

ou il faut faire les 2?
Merci.

Bon je n'ai pas essayé le post #15 mais ce qui m'inquiète,
c'est le tag pre utilise un tout autre style que celui que je souhaite,
il est dailleurs définit aussi dans le fichier css.

C'est pourquoi je risque de perdre tout mon style exemple à moins de copier
toutes les propriétes de mon style exemple dans le style pre.

Mon style est en gros un bloc encadré avec bordure en en fond gris,
et avec un décallage vers la gauche.

[nielad]

heueueee vers la droite, mais peu importe...

[Jean le Chauve]

Attention, j'ai modifié le post 15.
Et non, c'est white-space:normal qui est par défaut, donc suppression des espaces par le navigateur.
Quand tu veux de la confection, il te faut au minimum savoir modifier les css, tu dois donc modifier les propriétés de la balise pre pour obtenir ce que tu désires.
Si tu ne veux pas que cette balise entre en conflit avec l'existante, applique une classe : <pre class="code"> par exemple.
Mais il te faudra la créer dans ta feuille de style : pre.code {tes attributs}

[nielad]

OK c'est presque clair.
Mais je vais quand-meme relire ce que tu m'as écris et tester.
En passant, je cherche un moyen d'inserer un br (saut de ligne html)
au moyen de de tinyMCE.
Merci et bonne soirée.
Je ferme le sujet après mes tests.

[Jean le Chauve]

On ne peut pas appliquer de css à un <br />, donc pas le pied pour la finesse du design.
Utilise plutôt un <p class="br"> et la css : p.br {margin-top:3px;margin-bottom:3px} par exemple.

Sinon, tu vas dans le paramétrage de Tiny, avancé : Retour à la ligne (Touche Entrée) : style <br />.

Mais, tu es développeur, alors, pourquoi utiliser le wysiwyg ? ça m'étonnerait que tu codes avec une interface graphique ;-)

[nielad]

Je suis parti de mes enciennes pages et les ai
au départ copier/collées en wysiwyg pour gagne du temps, mais aussi
pour tester le mode wisigwig et la solution cmsms que je connais depuis très peu de temps.

C'est vrai. J'aime mieux le code html et je code en HTML quand
j'écris une nouvelle page à partir de zéro.
Mais le problème c'est que , après une relecture, le code HTML que me présente tinyMCE est
aglutiné sur une seule ligne et que je suis incapable de retrouver un endroit.
Même si le code HTML contient des sauts de lignes, tinyMCE ou je ne sait quoi
les supprime. Il doit bien y avoir un moyen d'éviter cela, non?

J'avoue que pour l'instant je n'ai pas trop cherché, j'ai analysé la solution
cmsms dans son ensemble avant de l'adopter car ce n'est pas la seule
que j'ai essayée.

[Jean le Chauve]

Le wysiwig, c'est pour les rédacteurs qui n'y touchent que dalle !
Tu remarqueras vite qu'il est beaucoup plus efficace de coder avec un éditeur html (style notepad++ ou autre) dans lequel tu indentes proprement pour une meilleure visibilité, puis de copier - coller dans l'éditeur du cms.
De plus, une fois que ton code est définitif, on te conseille de "minifier" ton code pour un affichage plus rapide (enlever tous les espaces et retours à la ligne), idem pour les css et les js. Moins de code le browser doit télécharger, meilleure la vitesse d'affichage.

[nielad]

Bonjour.
Je sait tout cela.
C'est d'ailleurs comme ça que je travaille, avec l'éditeur gvim.
Ok pour la minimisation du code.
Mais ne retouche, ca fait quand-même faire 2 copier/coller.
Merci beaucoup pour tout ces tuyaux.
Je clos la discussion.

[jce76350]

Ajoutez [Résolu] au début du titre de votre 1er message lorsqu'une solution a été trouvée.