éléments de bouton et non contenteditable

Question

Je peux facilement faire ExecCommand sur une sélection contenteditable si vous utilisez un bouton. Cependant, l'utilisation de tout autre élément échoue.

http://jsbin.com/atike/edit

Pourquoi est-ce et comment puis-je le faire fonctionner à l'aide d'un élément div.

Merci.

Answer 1

Vous pouvez enregistrer la sélection en utilisant l'événement mousedown sur l'élément étant utilisé à la place d'un bouton et restaurer à nouveau, après avoir concentré l'élément modifiable dans l'événement click.

J'ai modifié le code exemple: http://jsbin.com/atike/40/edit . Voici le code:

function saveSelection() {
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            var ranges = [];
            for (var i = 0, len = sel.rangeCount; i < len; ++i) {
                ranges.push(sel.getRangeAt(i));
            }
            return ranges;
        }
    } else if (document.selection && document.selection.createRange) {
        return document.selection.createRange();
    }
    return null;
}

function restoreSelection(savedSel) {
    if (savedSel) {
        if (window.getSelection) {
            sel = window.getSelection();
            sel.removeAllRanges();
            for (var i = 0, len = savedSel.length; i < len; ++i) {
                sel.addRange(savedSel[i]);
            }
        } else if (document.selection && savedSel.select) {
            savedSel.select();
        }
    }
}

$(function() {
  var savedSel;

  $('.bold').mousedown(function () {
    savedSel = saveSelection();
  });

  $('.bold').click(function () {
    $('#hello').focus();
    if (savedSel) {
      restoreSelection(savedSel);
    }
    document.execCommand("bold", false, null);    
  });
});

Answer 2

La plupart, sinon la totalité, des éditeurs WYSIWYG utiliser là-bas un élément de iframe afin de ne pas perdre la sélection. Une autre approche, bien que je ne l'ai pas essayé, serait de stocker chaque sélection effectuée sur cette page après les déclencheurs d'événements mouseup.

Jetez un oeil à cette page sur Midas , intégré éditeur de texte enrichi de Gecko.

Answer 3

Qu'est-ce qui se passe est que lorsque vous cliquez sur un nœud de texte, le navigateur veut sélectionner ce texte. Les boutons ne sont pas une partie du flux de texte et ne seront donc pas déclencher une nouvelle sélection.

Tout ce que vous avez à faire est empêcher le navigateur d'effectuer une nouvelle sélection. Lorsque l'événement click vous en train d'observer la sélection runs a déjà eu lieu et il est trop tard pour agir. L'action commence à avoir lieu sur mousedown pour tous les navigateurs attendent MSIE, qui a un événement de sélection spéciale.

Cela fonctionne pour moi à travers les navigateurs:

jQuery('.bold')
  .attr('unselectable','on') // prevents selection in MSIE
  .bind('mousedown',function (e) {
    document.execCommand("bold", false, null);
    e.preventDefault(); // prevents selection in all but MSIE
  });

Il y a quelques complications en utilisant les événements de sélection de MSIE (tels que d'avoir à bloquer glisser aussi), il est donc plus facile de frapper le selectability de l'élément que vous utilisez comme un bouton avec l'unselectable d'attribut spécialisé (besoins du valeur "sur").

Vous pouvez effectuer évidemment encore la manipulation de execCommand dans les événements click et il suffit d'exécuter le code de prévention de la sélection sur tous les éléments destinés comme des « boutons »:

jQuery('.buttonlike')
  .attr('unselectable','on') // prevents selection in MSIE
  .bind('mousedown',function (e) {
    e.preventDefault(); // prevents selection in all but MSIE
  });

jQuery('#edit-bold').click(function(){
  document.execCommand("bold", false, null);
});

Answer 4

NicEdit utilise une combinaison de méthodes.

• La plupart des éléments barre d'outils ont l'attribut "non sélectionnable" set -. Cela fonctionne pour Internet Explorer

• Sur les mêmes éléments, il enregistre pour l'événement « mousedown » et remplace l'action par défaut - ce qui empêche à la fois la solution de texte et mise au point. Ceci est pour les navigateurs autres que IE uniquement.

• Certains éléments de la barre d'outils doivent être en mesure de recevoir le focus de texte et faire des sélections, comme le champ pour insérer un lien ou une image. Pour ces derniers, il enregistre la sélection avant l'éditeur perd le focus, puis restaure après que l'utilisateur a terminé l'édition et les modifications doivent être apportées.

  Pour savoir comment la mettre en œuvre, vérifier le code de NicEdit. Rechercher les noms de fonction:

  • getsel
  • getRng
  • selRng
  • saveRng
  • restoreRng

  ...

  Il utilise le getSelection du navigateur () ou document.selection pour obtenir la sélection, getRangeAt () pour le convertir en une plage et AddRange () ou sélectionnez () pour restaurer cette plage comme une sélection.