Créer une class en javascript

Bonjour,

je suis en train de crée mon éditeur markdown perso, et je voudrais faire comme on le fait en php, par exemple dans mon template je voudrai faire un truc comme ça

<script>
 new editor(paramètres);
</script>

Dans l’immédiat je met mon textarea id editor et il génère la toolbar et un grip pour agrandir le textarea

//code qu va créer généré la div toolbar < textarea > grip dans cette ordre
window.onload = function() {
  // récupérer l'élément textarea
  var editor = document.getElementById("editor");

  // créer un nouvel élément div pour la toolbar
  var toolbar = document.createElement("div");
  toolbar.setAttribute("id", "toolbar");
  //pour le style css
  toolbar.setAttribute("class", "toolbar-style");

  // créer un nouvel élément div pour le grip
  var grip = document.createElement("div");
  grip.setAttribute("id", "grip");
  //pour le style css
  grip.setAttribute("class", "grip-style");

  // insérer la nouvelle div toolbar avant l'élément textarea
  editor.parentNode.insertBefore(toolbar, editor);

  // insérer la nouvelle div grip après l'élément textarea
  editor.parentNode.insertBefore(grip, editor.nextSibling);
};

Si on peut le faire je voudrais un objet parce que ça me permettrait de généré plusieurs éditeur car là forcément je peut pas mettre deux textarea sur la même page avec le même id, la toolbar bug etc…

dans l’idée je voudrai mettre n’importe quel ID avec les paramètres et les envoyez dans le js afin que ça soit dynamique et je pourrait si je veut crée un autre objet avec des paramètres différent.

j’ai tout mon js ici https://github.com/neecride/Editor/tree/main/public/inc/plugins/editor/js ne vous moquez pas je débute encore en js

Voilà en vous remerciant.

C’est un cas typique d’utilisation des classes (classe CSS pas JS) non ? Pourquoi utilises-tu un id pour quelque chose qui n’est pas unique dans le DOM ? Les classes ne sont pas destinée uniquement à l’application de style.

Ensuite, créer un éditeur markdown c’est très complexe si tu souhaites que la prévisualisation soit live, on parle d’éditeur de texte riche. On utilise plutôt des bibliothèque toute faite pour ça.

Sinon, en JS tu as la documentation MDN qui explique bien comment faire des classes. https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Classes

Sinon, pour passer des paramètres via du HTML, il existe les data-attributes

Tu peux voir un exemple d’utilisation sur cet éditeur de texte que j’avais développé il y a quelque temps.

Bonsoir,

Pour répondre a ache je sais que l’id c’est pour des éléments unique mais j’ai vu aussi que l’id étais mieux géré avec le js d’après ce que l’on m’avais dit. puis c’est ensuite que j’ai voulu le faire dynamique comme ça je pourrais faire new editor1, new editor2 etc.., et enfin je préfère faire moi même les choses je vais juste utilisé marked pour le preview, je vais regarder ton lien.

viki53 ton lien est intéressant je vais regarder tout ça merci.

Bon je réitère.

Non l’id n’est pas mieux gérer par JS que les classes.

Si tu veux vraiment faire un truc avec new la syntaxe est editor1 = new editor().

Enfin pour le fait d’aimer faire les choses soit même. Je comprends tout à fait. En tout cas sache que la difficulté de l’éditeur Markdown live est la synchronisation entre le markdown et le style. Pour afficher, on est obligé d’utiliser un div éditable mais ce qu’on veut vraiment le c’est le Markdown texte, sans le style. La synchronisation entre les deux est difficile car elle fait intervenir beaucoup de spécificité liées au DOM.

En soit, faire un éditeur Markdown avec visualisation externe c’est simple, faire un éditeur HTML c’est simple également. Mais faire les deux en un seul éditeur, c’est pas simple. Le plus simple est de faire un éditeur HTML et de convertir l’HTML en Markdown, comme ça tu évites la synchronisation.

Pas besoin de créer une classe si tout ce dont tu as besoin est d’appeler le constructeur. Une fonction devrait suffire.

Puis comme l’a dit ache, tu peux ensuite récupérer tous les éléments HTML ayant une certaine classe CSS, afin d’y appliquer cette fonction. Pour illustrer :

<body>
  <textarea class="markdown-editor"></textarea>
  <textarea class="markdown-editor"></textarea>

  <script>
    // ta fonction qui construit l'éditeur
    function setupEditor(editor) {
      const toolbar = ...
      // etc...
    }

    // on récupère tous les éléments d'une classe
    const editors = document.getElementsByClassName("markdown-editor")
    for (const editor of editors)
      setupEditor(editor)
  </script>
</body>