Discussion :

[Freedolphin]

Bonjour à tous,

J'ai un formulaire en back-office avec un textarea dans lequel je souhaite colorer les balises html.
J'utilise pour cela CodeMirror, mais du coup ça bloque deux autres fonctionnalités : un compteur de mots et un script wysiwyg pour afficher des boutons de mise en forme.

Voici le code de mon formulaire avec le script de CodeMirror :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
echo "<p>Texte :</p><div class='typo'><script type=\"text/javascript\">edToolbar('texte');</script></div>";
echo "<textarea cols='110' rows='40' name='texte' id='texte' onkeyup='Compter(this.form.texte.value, this.form)' required>$texte</textarea><br>";
<script type="text/javascript">
  var editor = CodeMirror.fromTextArea('texte', {
    height: "800px",
    parserfile: "parsexml.js",
    stylesheet: "css/xmlcolors.css",
    path: "js/",
    continuousScanning: 500,
    lineNumbers: false
  });
</script>

Je me doute que le conflit vient du fait que le textarea ne sert plus comme avant, il est remplacé par un autre inclus dans une iframe.

J'ai doute essayé de retoucher le code de l'éditeur :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
    var div = this.wrapping = createHTMLElement("div");
    div.style.position = "relative";
    div.className = "CodeMirror-wrapping";
    div.style.width = options.width;
    div.style.height = (options.height == "dynamic") ? options.minHeight + "px" : options.height;
    // This is used by Editor.reroutePasteEvent
    var teHack = this.textareaHack = createHTMLElement("textarea");
    div.appendChild(teHack);
    teHack.style.position = "absolute";
    teHack.style.left = "-10000px";
    teHack.style.width = "10px";
    teHack.tabIndex = 100000;
    teHack.id = "texte";
    teHack.onkeyup = "Compter(this.form.texte.value, this.form)";

Sans succès. Cela me rajoute bien l'id dans le textarea généré, mais pas le onkeyup. Quelqu'un aurait-il une petite piste ?
Merci d'avance de vos bonnes idées.

[NoSmoking]

Bonjour,

J'utilise pour cela CodeMirror, mais du coup ça bloque deux autres fonctionnalités : un compteur de mots et un script wysiwyg pour afficher des boutons de mise en forme.

j'ai du mal à visualiser ce qui te pose soucis.

Je me doute que le conflit vient du fait que le textarea ne sert plus comme avant,

certes mais celle-ci est atteignable via l'editor crée et c'est bien son contenu qui est transmis.


... mais bon !

[Freedolphin]

j'ai du mal à visualiser ce qui te pose soucis.

Ce qui me pose problème, c'est que les boutons de mise en forme, ainsi que le compteur de mots, sont inopérants.
Ils agissent sur le textarea nommé "texte", mais celui-ci est remplacé visuellement par l'éditeur généré par le JS.
Je n'arrive pas à répercuter les actions du textarea originel sur celui généré par Codemirror.

[NoSmoking]

C'est bon j'ai retrouvé la vue

Pour le compteur de mot

Code html :

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

<textarea cols='110' rows='40' name='texte' id='texte' onkeyup='Compter(this.form.texte.value, this.form)' required>$texte</textarea>

tu peux simplement ajouter un observateur sur le change de l'éditeur :

Code :

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

1
2
3
4
5
6
7
8
9
const editor = CodeMirror.fromTextArea(document.getElementById("texte"), {
  // init des options
});
editor.on("change", function() {
  // mise à jour textarea
  editor.save();
  // get nombre caractère avec le \n
  document.getElementById("count").textContent = editor.getValue().length;
});

Pour les boutons de mise en forme, il te faut utiliser les méthodes misent à disposition : User manual and reference guide et modifier le texte dans l'éditeur en faisant par exemple

Code :

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

1
2
3
4
5
6
7
8
9
10
function addBaliseH1() {
  // texte sélectionné
  const txt = editor.getSelection();
  // encadrement avec balises
  editor.replaceSelection("<h1>" + txt + "</h1>");
  // mise à jour textarea, mais pas obligatoire
  editor.save();
  // on remet le focus
  editor.focus();
}

et donc un appel du type

Code :

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

document.getElementById("add-h1").onclick = addBaliseH1;

On peut faire mieux, c'est très largement « optimisable ».

[Freedolphin]

Merci mille fois pour ces indications !
Très bonne journée.