Conflit CodeMirror et JS wysiwyg

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:

---

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:

---

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.

Bonjour,

Citation:

---

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.

Citation:

---

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 !

Citation:

---

Envoyé par NoSmoking

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.

C'est bon j'ai retrouvé la vue :lol:

Pour le compteur de mot

Code:

---

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

---

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:

---

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:

---

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

---

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

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