Retrait redimensionne les gestionnaires sur contentEditable div

Question

J'ai créé un contentEditable div à utiliser comme textarea riche. Il a redimensionner les gestionnaires autour d'elle que je voudrais me débarrasser. Toute idée comment je ferais cela?

Edit: Il semble se produire parce que je suis tout à fait le positionnement de la div, de sorte que Firefox ajoute un attribut exaspérante de _moz_resize à l'élément que je ne peux pas désactiver

.

Answer 1

On dirait que je serai en mesure de contourner ce problème en ajoutant une enveloppe div et absolument positionner l'emballage, puis faire le contentEditable intérieur div.

Answer 2

Tout comme une note de côté, vous pouvez désactiver la fonction poignée de redimensionnement automatique de Firefox en envoyant le enableObjectResizing (un peu mal documenté) commande au document:

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

AFAIK, cela ne peut se faire en toute sécurité une fois que le document a chargé, et il n'y a pas moyen que je connaisse pour désactiver la carte d'acquisition, qui est une caractéristique distincte.

Answer 3

Dans Chrome 39, ces poignées ne semblent pas exister, même si vous les vouliez.

Dans Firefox, on peut simplement utiliser execCommand, comme ZoogieZork a répondu.

Mais dans Internet Explorer cela ne peut pas être désactivé. Il doit être contourné.

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

Les résultats suivants:

• Dans IE, l'interface utilisateur de modification de taille se présente pour une fraction de seconde, puis disparaît. Il semble y avoir aucun moyen pour l'utilisateur de l'utiliser.
• Les images sont sur le texte sélectionné mouseup
• Possibilité de faire glisser des images. Dans certains navigateurs, ils peuvent être sélectionnés avant de faire glisser. Comme il est écrit dans l'article précédent, un simple mouseup se traduira par une image sélectionnée.
• Les images sont sélectionnées en utilisant la sélection de texte et non « sélection de contrôle » (ce qui fournit l'interface de modification de taille).

Ceci est le meilleur que je pouvais venir avec après les heures de respirations profondes. Je pense qu'il est assez bon si vous voulez vraiment vous débarrasser de ces poignées.

Dans IE, Réglage oncontrolselect pour revenir false sur l'image, ne vraiment empêcher ces poignées d'apparaître, et vous pouvez le faire intelligemment, en attachant le gestionnaire suivant à l'événement mousedown:

function (evt) {
    var img;

    function returnFalse() {
        return false;
    }

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

Il ne fonctionne pas en fait tout à fait bien. La raison pour laquelle cela n'a pas fonctionné très bien est que pour commencer une opération de glisser-déposer sur l'image, il fallait appuyer et maintenir la souris, sans le déplacer, pour une fraction de seconde, et alors seulement commencer à se déplacer pour la traînée. Si l'on appuie sur la souris et immédiatement traînèrent, l'image resterait à sa place et ne pas être traîné.

Je ne le faisais pas.

Ce que je l'ai fait est le suivant. Dans tous les navigateurs, je mouseup au texte sélectionnez l'image cible exclusivement. Dans non-IE et IE11, de manière 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);
}

fait en sorte que, après ces poignées apparaissent, ils disparaissent dès que possible, parce que l'image perd sa « sélection de contrôle » parce que la sélection est remplacée par une sélection de texte régulier.

Dans Internet Explorer 7 à 11, j'attaché à un gestionnaire dragend qui supprime toute 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 je l'espère, vous pouvez le rendre encore meilleur.

Answer 4

pour IE11 (I havn't testé les anciennes versions d'IE, mais je me sens comme ça marcherait), vous pouvez ajouter contenteditable = attribut « false » à la balise img. Cela permettra d'éviter tout nouveau dimensionnement d'être fait tout en gardant le glisser-déposer en place.

Answer 5

... juste le meilleur fix jamais

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

ou tout élément HTML qui enveloppe votre entrée / img

Travaux sur IE11 comme un charme

Answer 6

Je fais face à tout ce problème. J'ai essayé document.execCommand("enableObjectResizing", false, false); mais, l'icône de mouvement était encore apparaît. Ce qui vient de résoudre mon problème était juste e.preventDefault() lorsque l'événement se produit de onmousedown.

element.onmousedown = function(e){
       e.preventDefault();
}

Answer 7

Avez-vous essayé d'ajouter le style

border: none;

à la div?