événement subrillance javascript

Defy
Javascript

Salut tous le monde, pour apprendre a bien utiliser javascript et pas que Jquery, je me suis mit a developper un petit editeur WYSIWYG en javasript. J'arrive a recupérer quelque chose mais je seche au moyen de lui rajouter du style css

function Bold()
{
    var debut = texte.selectionStart;
    var fin   = texte.selectionEnd - texte.selectionStart;
    var sel   = texte.value.substr(debut, fin);

    alert(sel);

    toogleClass(bold);
}

sel me retourne bien la selection mais j'ai essayé plein de chose pour rajouter du css et sans success. Une idée? un coup de main?

4 réponses

Defy
Auteur

bon j'ai un peut avancé sur le propblème mais j'ai une question qui reste quand meme en suspend, comment les editeur WYSIWYG font pour interpreter les balise html dans un texteare? j'ai reussi a faire apparaitre les balise comme il faut mais quand je leur met un innertHtml cela me retourn undefined...

    var startSel  = texte.value.substring(0, texte.selectionStart);
    var curentSel = texte.value.substring(texte.selectionStart,texte.selectionEnd);
    var endSel    = texte.value.substring(texte.selectionEnd);

    texte.value = startSel + curentSel.bold() + endSel;
    texte.focus();

    texte.setSelectionRange(startSel.length, startSel.length +  curentSel.length);
betaWeb

Salut @Defy,

C'est assez simple pour ajouter du style à un élément JS:

var elem = document.querySelector('.mon_element');
elem.style.color = "#FF0000"; // Font de couleur rouge
elem.style.opacity = "0.5"; // opacité à 50%

Et voilà tout simplement. Tu peux très bien coder une fonction CSS:

Element.prototype.css = function() {
  var args = arguments;

  if ('object' === typeof args[0]) {
    for (var prop in args[0]) {
        this.style[prop] = args[0][prop];
    }
  }

  if ('string' === typeof args[0]) {
    this.style[args[0]] = args[1];
  }
};

var elem = document.querySelector('.mon_element');

// Avec un objet
elem.css({
  'backgroundColor': '#FF0000',
  'opacity': '0.5'
});

// Avec des arguments
elem.css('border', '1px solid #000');

Tiens voilà ce que ça donne, je viens de la faire en 2 minutes montre en main -> http://codepen.io/betaweb/pen/RWbMRp/

Edit: j'ai amélioré, si bien que tu peux utiliser la fonction CSS comme celle de jQuery, à savoir soit un objet contenant les styles, soit deux arguments, le 1er le nom de la propriété et le second sa valeur ;)

Defy
Auteur

Oui, pour manipuler le dom c'est pas ca qui me pose problème, c'est le faite d'interpreter le HTML dans le textarea, j'ai un peut regarder sur le net les editeurs WYSIWYG et ils utilise un systeme d'iframe bindé directement avec le textarea qui permet de recupérer la frappe du textearea sur l'iframe et modifier les elements, du coup je vais tester de ce coté la.

une petite chose, je ne comprend pas trop tes boucles pourrait tu expliquer un peut comment cela fonctionne? .

betaWeb

Oulà une iFrame ? C'est pas un peu lourd non ?