Forum du site Lebrikabrak

Bonjour jchouix,

Je cherches à empêcher fckeditor d'avaler mes backslash...
Il me semble "qu'avant" on pouvait les garder en les doublant, ce qui était déjà pénible, car à la moindre édition ils disparaissaient

Etant donné que j'ai un site ou intervient beaucoup le code (VBA), c'est un véritable enfer lorsque (cela arrive régulièrement) if faut adapter ou compléter ce code. La seule manière de le saisir est par l'entité html, mais en mode source et sur une grande page de code... pfffuit... Et là aussi, à la moindre édition, PAN!
Il faut tout recommencer... et surtout ne pas en oublier un, sinon gare...
Et on devient carrément jaloux lorsque l'on constate que le pgeditor les autorise sans problème...

Etant donné que je suis seul à utiliser le fckeditor en admin, ne peut on pas simplement empêcher cette suppression et qu'il ne s'en occupe pas? Y aurait-il un risque malgré tout?

Merci d'avance pour toute piste.

Pierre

bonjour pierre,
je vais redire ce que j'ai dit à katryne qui a le même problème que toi avec l'insertion de code qui ne doit pas être interprété. L'éditeur FCKEditor n'est pas l'éditeur qu'il te faut pour faire ce genre de manip. Utilise le miniéditor intégré à guppy car il te conservera les entités html.
Ce que je peux faire c'est rajouter une icone au miniéditor pour insérer du code et le formater automatiquement. Cela t'évitera de le faire à la main. Qu'est ce que tu en penses ?

Citation

Et on devient carrément jaloux lorsque l'on constate que le pgeditor les autorise sans problème...

Pgeditor transforme à ta place les backslashs en entité html ce qui n'est pas le cas de FCKEditor.
A+

Hello vous deux ! Je m'immisce, puisque je suis citée. Bien sûr, le mini-editor, il peut le faire, mais c'est vraiment pénible à manipuler. J'aimerais vraiment très beaucoup une option qui permette d'utiliser le pgeditor en admin. Même s'il est plus limité. Si l'on a besoin de fckeditor pour une édition sans limite, et bien il suffit de rechanger l'oprion admin. Mais vraiment, pgeditor pour citer du code, il est plus mieux joli. Et plus pratique.

bonsoir katryne,

Citation

Bien sûr, le minieditor, il peut le faire, mais c'est vraiment pénible à manipuler.

Je ne vois pas en quoi il est pénible à manipuler cet éditeur. Personnellement, je le trouve moins pénible que FCKEditor car le minieditor me permet de faire tout ce que je veux ce qui n'est pas le cas de FCKEditor.

Citation

J'aimerais vraiment très beaucoup une option qui permette d'utiliser le pgeditor en admin.

Tu dis cela car tu ne te rends pas sans doute pas compte que tu ne peux pas écrire ce que tu veux avec cet éditeur.

Citation

Mais vraiment, pgeditor pour citer du code, il est plus mieux joli. Et plus pratique.

Je suis content que tu apprécies mon travail mais je pense que le mieux est ce que je propose à pierre, c'est à dire rajouter une fonction au minieditor pour insérer facilement du code.
Ou alors d'écrire un plugin pour FCKEditor mais là c'est une autre histoire car je n'ai pas le controle total sur cet éditeur et je sais par expérience qu'il est très capricieux.
A+

Hello Jérôme, je continue ici, pour éviter un double fil.
Quand je t'ai dis que ça marche bien, le copier-coller avec le mini editor, il y a un gros bémol : c'est que j'arrive à conserver le formatage colorisé du code saisi côté client avec pge editor. Et que dans mon blog ça s'affiche correctement pour les deux langues. Mais dans les derniers billets du blog en page d'accueil, le formatage n'est pas respecté, le conteneur disparait et le code déforme toute la skin. Vois ici http://guppystory.org/index.php?lng=fr. Que t'en penses ?

bonjour Katryne,

Citation

Mais dans les derniers billets du blog en page d'accueil, le formatage n'est pas respecté, le conteneur disparait et le code déforme toute la skin.

Le formatage n'est pas respecté car le fichier CSS qui s'en occupe n'est pas chargé en page d'accueil.
Le plus simple est de la rajouter comme ceci :
tu édites le fichier index.php à la racine de ton site et tu vas à la ligne 28 où tu as ce code :

PHP (Sélectionner le code)

$topmess = "";
include("inc/hpage.inc");

tu mets à la place ce code :

PHP (Sélectionner le code)

$headinc .= '<link rel="stylesheet" type="text/css" media="screen" href="inc/config_pgeditor_guppy/style/pgeditor.css" />
        <!-- compliance patch for microsoft browsers -->
       	<!--[if lte IE 7]>
            <link rel="stylesheet" type="text/css" media="screen" href="inc/config_pgeditor_guppy/style/pgeditor-ie.css" />
        <![endif]-->
		<link rel="stylesheet" type="text/css" media="screen" href="inc/config_pgeditor_guppy/style/syntaxcolor.css" />';
$topmess = "";
include("inc/hpage.inc");

A+

Didou, Jérôme, c'est pas simple ! (enfin, pas simple pour les Katryne)
Bon, j'ai retrouvé mes couleurs en page d'accueil, mais le conteneur du code est trop large pour ma skin avec les 2 colonnes latérales: ça passe en page blog, parce que j'ai appliqué l'astuce d'Icare pour n'y afficher qu'une seule colonne latérale. Mais en page d'accueil, le conteneur est trop large.
J'ai bien trouvé une indication de largeur de conteneur dans le fichier inc/config_pgeditor_guppy/style/pgeditor_patch_overflow.css, et j'ai essayé de la passer de 570 à 500. Mais ça n'a rien changé du tout et donc je l'ai remise à l'originale.
Aller ! s'il te plait encore une piste pour que j'y arrive.
Merci d'avance.

re-,
il te faut rajouter le chargement du fichier inc/config_pgeditor_guppy/style/pgeditor_patch_overflow.css si tu veux qu'il soit pris en compte.
Tu l'insères comme ceci :

Code (Sélectionner le code)

$headinc .= '<link rel="stylesheet" type="text/css" media="screen" href="inc/config_pgeditor_guppy/style/pgeditor.css" />
<!-- compliance patch for microsoft browsers -->
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" media="screen" href="inc/config_pgeditor_guppy/style/pgeditor-ie.css" />
<![endif]-->
<link rel="stylesheet" type="text/css" media="screen" href="inc/config_pgeditor_guppy/style/pgeditor_patch_overflow.css" />
<link rel="stylesheet" type="text/css" media="screen" href="inc/config_pgeditor_guppy/style/syntaxcolor.css" />';

A+

Bonjour jchouix,
bonjour katrine,

Citation

Hello Jérôme, je continue ici, pour éviter un double fil.

Oui, mais tu as pollué le mien


jchouix, tu me conseilles d'utiliser minieditor... oui, c'est vrai qu'il me garde le code, mais...
Comme il ne respecte la moindre "mise en page" comme les paragraphes, il est aussi pénible à l'usage que le fckeditor

Imagine une page un peu longue, style 10 ou 15 fois ce qui est visible dans la fenêtre d'édition. Que cette page est un mélange de texte explicatif et de bouts de code et autres fonctions...
Aller placer les balises dans un tel fouillis est un vrai calvaire!

En fait, pour être précis, je suis en quête de la fonction suivante:
Je voudrais pouvoir sélectionner une portion du texte (un paragraphe qui représente le code) et de lui attribuer une balise, une classe ou une combinaison, et que l'éditeur ne touche simplement pas au "texte" contenu et ne fasse surtout pas de suppression.
Ce paragraphe doit se distinguer par un fond de couleur et idéalement un encadrement.

Actuellement, je me débrouille avec le fckeditor pour la sélection et l'ajout de la balise code, puis en mode source, j'encadre avec un fieldset (seul moyen que j'ai trouver pour avoir l'encadrement ET un background, la balise 'code' ne colorant que le background du texte)
Il me reste ces backslash qui disparaissent...

Par ailleurs, tu dis:

Citation

mais je pense que le mieux est ce que je propose à pierre, c'est à dire rajouter une fonction au minieditor pour insérer facilement du code.

En fait, s'il pouvait en plus respecter la présentation au niveau retour chariot et paragraphe, je serais très satisfait

Merci pour ton implication, jchouix.

Pierre

bonjour pierre,

Citation

jchouix, tu me conseilles d'utiliser minieditor... oui, c'est vrai qu'il me garde le code, mais...
Comme il ne respecte la moindre "mise en page" comme les paragraphes, il est aussi pénible à l'usage que le fckeditor

Le minieditor respecte la mise en page sinon il n'aurait pas aucun intéret. J'ai l'impression que l'on ne parle pas de la même chose.

Citation

Je voudrais pouvoir sélectionner une portion du texte (un paragraphe qui représente le code) et de lui attribuer une balise, une classe ou une combinaison, et que l'éditeur ne touche simplement pas au "texte" contenu et ne fasse surtout pas de suppression.
Ce paragraphe doit se distinguer par un fond de couleur et idéalement un encadrement.

Avec le minieditor, c'est très simple de faire ce que tu veux car tu as des menus déroulant pour ajouter des balises autour du texte sélectionné et des class dans la balise. Pour ce qui est de l'insertion de code, il faut absolument que les caractères spéciaux < > & \ et $ soient encodés en entités html sinon ils seront interprétés lors du traitement. C'est ce que je te proposais en ajoutant une fonction "Insertion de code" au miniéditor.

Citation

En fait, s'il pouvait en plus respecter la présentation au niveau retour chariot et paragraphe, je serais très satisfait

Mais c'est ce qu'il fait déjà ! Il respecte la présentation de ton code en conservant les retours chariot, les sauts de ligne. Tu peux ainsi aérer ton code pour qu'il soit plus lisible.
A+

bonjour,

Citation

Le minieditor respecte la mise en page sinon il n'aurait pas aucun intéret.

Ben, c'est ce qui me faisait dire que c'était pas génial...

Citation

J'ai l'impression que l'on ne parle pas de la même chose.

Là, je suis confus
Lorsque, en admin, on ne choisis pas le fckeditor, il nous reste quoi ? ce n'est pas le minieditor ?

En fait, je viens de revérifier
Etant donné que c'est un site créé au départ avec un Guppy 4.5.x et qu'il a suivi les différentes mises à jour, je ne suis passé que dernièrement à la 4.6.
De plus, certains article ont été édité plusieurs fois, d'autre jamais.

Or, comme tu le dis, l'éditeur respecte bien la "mise en page" mais pas pour tous les contenus! J'ai beau éditer et resauver, le "texte" reste à la queuleuleu...

Je vais donc faire un essai avec une article tout frais et voir ce que cela donne.
Puisque cela fonctionnera probablement comme souhaité, je me satisferai parfaitement d'une fonction "insertion de code" ;-)

Merci.

re-,

Citation

Or, comme tu le dis, l'éditeur respecte bien la "mise en page" mais pas pour tous les contenus! J'ai beau éditer et resauver, le "texte" reste à la queuleuleu...

Alors là, je suis très étonné de ce que tu me dis car le processus de traitement des documents est le même pour tous les documents du coté admin.
Sinon, je viens de terminer l'ajout de la fonction "Insertion de code". J'ai repris la même icone <> que celle de pgeditor.
Pour insérer du code, tu dois donc cliquer sur cette icone qui va t'ouvrir une popup.
Dans cette popup, tu colles ou tu écris ton code dans le textarea prévu à cet effet.
Par exemple :

PHP (Sélectionner le code)

echo '<p style="width:100%;border:1px solid red;text-align:center;">';
echo '<label id="f_label_code" for="f_code" style="display:block;text-align:left;">'.&#36;lang_minieditor[75].'&nbsp;:</label>';
echo '<textarea name="f_code" id="f_code" class="zoneCode" style="width:95%;height:250px">'."n";
echo 'zer\'aere</textarea>';
echo '</p>';

Tu sélectionnes ensuite le langage dans la liste déroulante et tu valides avec le bouton "Ok".
Tu retrouveras alors ton code correctement parsé dans le textarea du minieditor sous cette forme :

HTML (Sélectionner le code)

<div class="code"><span class="code">Code : php</span><pre><code>echo '&lt;p style="width:100%;border:1px solid red;text-align:center;"&gt;';<br />echo '&lt;label id="f_label_code" for="f_code" style="display:block;text-align:left;"&gt;'.&amp;#36;lang_minieditor[75].'&amp;nbsp;:&lt;/label&gt;';<br />echo '&lt;textarea name="f_code" id="f_code" class="zoneCode" style="width:95%;height:250px"&gt;'."n";<br />echo 'zer&#92;'aere&lt;/textarea&gt;';<br />echo '&lt;/p&gt;';<br /></code></pre></div>

Si tu veux corriger le code plus tard, tu sélectionnes tout le block <div class="code"> qui a été ajouté dans le minieditor , c'est à dire :

HTML (Sélectionner le code)

<div class="code"><span class="code">Code : php</span><pre><code>//code inséré</code></pre></div>

et ensuite, tu cliques sur l'icone <>. Le code sera alors déparsé et affiché dans la popup comme au départ.

Le lien pour télécharger le minieditor avec le petit plus est : http://lebrikabrak.info/file/f...uppy_v4.6.x.zip
A+

Parfait Jérôme, mille mercis. Et mille excuses, Pierre. Au début, j'ai vraiment pensé qu'il s'agissait de la même question.

Bonjour jchouix,

Merci déjà pour ce bouton qui amméliore bien l'éditeur.

Voilà ce que je constate après beaucoup d'essais.
D'abord, je garde mes backslash, ce qui est déjà très bien ;-)
Inclure et rééditer du code fonctionne bien également.

Mais il me reste deux choses désagréables:

Le texte du code dans l'éditeur se retrouve à la queleuleu
L'éditeur m'avale les lignes de code vides.

J'ai beaucoup essayé et vérifié, et je me dis que cela provient peut-être de ce code, justement.

Donc, je copie le code VB et que je le colle dans Notepad++ et je demande l'affichage de tous les caractères (espace, tabulation, fin de ligne, etc.)

Chaque ligne se termine par un Cr et Linefeed - donc chr(13) et chr(10)
Une ligne vide m'affiche également un Cr Lf

Je copie-colle maintenant ce code via le bouton "code" que tu as ajouté:

Les fins de ligne recoivent bien un "<br />"
Les Cr-Lf des lignes vides sont supprimés :-/
Tout le texte du code se retrouve à la queuleuleu, avec les espaces provenants de l'indentation du code (indentation absolument nécessaire)

Si j'arrive à corriger/contourner ces deux problèmes, je serais parfaitement heureux :-))

Pierre

bonsoir pierre,

Citation

Je copie-colle maintenant ce code via le bouton "code" que tu as ajouté:
Les fins de ligne recoivent bien un "<br />"
Les Cr-Lf des lignes vides sont supprimés :-/
Tout le texte du code se retrouve à la queuleuleu, avec les espaces provenants de l'indentation du code (indentation absolument nécessaire)

Ce comportement est normal car sinon le code inséré ne serait pas colorisé. C'est pourquoi pour visualiser ou retoucher le code, tu dois absolument le sélectionner et cliquer sur l'icone <>.
A+