Discussion :

[keokaz]

bonsoir, j'ai intégré prism la coloration syntaxique, mais j'ai un souci dans le wysiwig,
lorsque je tape le code, cela fonctionne bien mais lorsque le code est intégré dans le wysiwig, je n'arrive pas à en sortir,
après la touche entrée tout mon texte est sous prisme voici une image pour illustrer mon problème



il faudrait que après le la touche entrée et après la lettre "f" je sors de la coloration pour avoir du texte normal....
voici le code jquery (c'est mélanger avec du yui mais comme je m'y fait pas à ce framwork j'ai préférer utiliser jquery)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 
 
    Y.namespace('M.atto_code').Button = Y.Base.create('button', Y.M.editor_atto.EditorPlugin, [], {
        initializer: function () {
            this.addButton({
                icon: 'e/code',
 
                callback: this.prism //lorsque je clique sur le $ je fais apparaître un textearea pour le code
 
            });
 
            // Attach a submit listener to the form.
            var form = this.get('host').textarea.ancestor('form');
            if (form) {
                form.on('submit', this._submitClean, this);
            }
        },
        prism: function () { //wysiwig prism
 
 
 
            $("#W_prism").show(); //affichage du wysi prisme
            console.log($("#W_prism").attr("alt"));
            var wysi = $("#id_pageeditable");
            var old_wysi = wysi.html();
         //   console.log(old_wysi);
 
            $("#code_ok").on("click", function () { //une fois terminé le code je clique sur l'élément avec l'id code_ok pour sortir de la coloration syntaxique
 
                var le_code = '<code class="language-javascript">' + $('#wysi_prism').val() + '</code>'; //je ferme pourtant la balise mais je reste dans le coloration syntaxique
 
                $("#W_prism").hide();
                wysi.html(old_wysi + le_code);
             //   console.log(old_wysi + le_code);
 
            });

voici à quoi ressemble le html

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
<div id="yui_3_17_2_1_1461781589642_1076" class="editor_atto_content_wrap">
<div id="id_pageeditable" class="editor_atto_content" contenteditable="true" aria-live="off" spellcheck="true" role="textbox" aria-labelledby="yui_3_17_2_1_1461781589642_597" style="min-height: 308px; height: 308px;">
<br>
ret
<br>
<code class="language-javascript">
testestesgfdf
<br>
<br>
<br>
klmk
<br>
</code>
</div>
</div>
</div>

même si je ferme la balise </code> après avoir valider ma saisie je reste dans la zone de coloration.
et voici ma fenêtre modal de saisie du code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
'<div alt="fermer" id="W_prism" style="display:none"><textarea id="wysi_prism"></textarea><span id="code_ok">javascript</span><span id="prism_clear">nettoyer</span></div>';

Si vous avez une idée, merci d'avance de vos réponses

[NoSmoking]

Bonjour,
pas sûr d'avoir vraiment compris le soucis, une page en ligne serait peut être un bon moyen d'y voir plus clair.

Pas défaut l'appui sur la touche Entrée c'est pour aller à la ligne, comment veux tu faire la différence entre l'entrée pour passer la suite du code à la ligne et l'entrée pour passer au paragraphe suivant ?

c'est mélanger avec du yui mais comme je m'y fait pas à ce framwork j'ai préférer utiliser jquery

Ca je ne pense pas que cela soit la meilleur des choses à faire !

[keokaz]

merci nosmoking de ta réponse,

je sais que c'est pas la chose à faire, mais je ne souhaite pas investir du temps sur yui.

voici ce que j'ai pensé en faisant cela je pensais que :

1 - je clique sur un bouton code
2 - j'insère dans une fenêtre modal du code à colorier
3 - je récupère le textearea
4 - dans cette fenêtre il y a un bouton pour sortir
5 - si je sors in réintègre le texte + le code
à la fin in insère </code>
6 je continue le text normal

je pensais que en insérant </code>, je pourrais continuer à taper du texte normalement mais c'est pas le cas,
je suis encore dans la balise code, c'est à la fin que je coince.

pour le teste voici ce que j'ai pu faire, mais avec les droit cela ne fonctionne pas ,c'est juste pour voir à quoi ça ressemble

http://profoad.education/test.php




est ce que déjà la marche à suivre est correcte ou il faut faire autrement ?

[NoSmoking]

Pas réussi à tester la séquence sur ton lien mais l'enchainement me semble correct, c'est d'ailleurs ce qui est communément fait sur les éditeurs de ce type, tu peux peut être regardé à mettre le curseur sur l'élément suivant à la fermeture de la boîte.