Retrait de redimensionner les gestionnaires sur contentEditable div

Tout comme une note de côté, vous pouvez désactiver Firefox automatique de la poignée de redimensionnement de la fonctionnalité par l'envoi de la (assez mal documenté) enableObjectResizing commande pour le document:

document.execCommand("enableObjectResizing", false, false);

Autant que je sache, cela ne peut en toute sécurité être fait une fois que le document est chargé, et il n'ya aucun moyen que je connaisse pour désactiver la saisie, qui est une fonction à part.

En Chrome 39, ces poignées ne semblent pas exister, même si on le désire.

Dans Firefox, il suffit d'utiliser execCommand, comme ZoogieZork répondu.

Mais dans Internet Explorer, ce ne peut pas être éteint. Il doit être travaillé autour de.

Dans WYMeditor de développement, voici ce que j'ai trouvé.

Les résultats suivants dans:

• Sous IE, le redimensionnement de l'INTERFACE utilisateur s'affiche pendant une fraction de seconde, puis disparaît. Il semble y avoir aucun moyen pour l'utilisateur de l'utiliser.
• Images sont texte sélectionné sur mouseup
• Capacité à faire glisser les images. Dans certains navigateurs, ils ont peut-être choisi avant de glisser. Comme écrit dans l'article précédent, une simple mouseup résultat sera une image sélectionnée.
• Images sont sélectionnées en utilisant la sélection de texte et pas de "contrôle de la sélection" (celle qui fournit le redimensionnement de l'INTERFACE utilisateur).

C'est le meilleur que je pouvais venir après des heures de très grandes respirations. Je pense qu'il est assez bon si vous voulez vraiment vous débarrasser de ces poignées.

Dans IE, Réglage oncontrolselect de retour false sur l'image, vraiment empêcher les poignées apparaissent, et vous pouvez le faire intelligemment, en attachant le gestionnaire suivant à la mousedown événement:

function (evt) {
    var img;

    function returnFalse() {
        return false;
    }

    if (evt.tagName.toLowerCase() === "img") {
        img = evt.target;
        img.oncontrolselect = returnFalse;
    }
}

Il ne fonctionne pas tout à fait bien. La raison qu'il ne fonctionne pas très bien, c'est que dans le but de commencer une opération de glisser-déposer sur l'image, il fallait appuyer sur le bouton de la souris, sans bouger, pendant une fraction de seconde, et ensuite seulement commencer à bouger pour le faire glisser. Si l'un appuyé sur la souris et a immédiatement commencé à glisser, l'image restera à sa place et de ne pas être déplacé.

Donc je ne l'ai pas fait.

Ce que j'ai fait est le suivant. Dans tous les navigateurs, j'ai utilisé mouseup texte, sélectionnez l'image de la cible exclusivement. Non-IE et IE11, de façon synchrone:

function (evt) {
    if (evt.target.tagName.toLowerCase() === "img") {
        selectSingleNode(img); //In my case, I used Rangy
    }
}

Dans IE 7 à 10, de manière asynchrone:

function (evt) {
    if (evt.target.tagName.toLowerCase() !== "img") {
        return;
    }

    window.setTimeout(function () {
        selectSingleNode(img); //In my case, I used Rangy
    }, 0);
}

Cela fait en sorte que, après ces poignées de se montrer, ils disparaissent le plus vite possible, parce que l'image perd de son "contrôle de la sélection", parce que la sélection est remplacée par un régulier de la sélection de texte.

Dans Internet Explorer 7 à 11, j'ai attaché un gestionnaire de dragend qui supprime tous de sélection:

function (evt) {
    if (evt.target.tagName.toLowerCase() === "img") {
        deselect(); //I use Rangy for this, as well
    }
}

Cela rend les poignées qui apparaissent après le glisser-déposer, disparaissent.

J'espère que cette aide, et j'espère que vous pouvez faire encore mieux.

... juste le meilleur correctif jamais

<div contenteditable="true">
    <label contenteditable="false"><input/></label>
</div>

ou n'importe quel élément html qui enveloppe votre entrée/img

Fonctionne sur IE11 comme un charme

Avez-vous essayé d'ajouter le style

border: none;

à la div?