Удаление обработчиков изменения размера в содержимом div

Question

Я создал div contentEditable для использования в качестве богатой текстовой области. В нем есть обработчики изменения размера, от которых я бы хотел избавиться. Есть идеи, как мне это сделать?

Редактировать: это, кажется, происходит, потому что я абсолютно позиционирую div, поэтому Firefox добавляет раздражающий атрибут _moz_resize к элементу, который я не могу отключить.

Answer 1

Похоже, я смогу обойти это, добавив div-обертку и установив абсолютно обертку, а затем сделав внутреннее div-содержимое contentEditable.

Answer 2

Как примечание, вы можете отключить функцию автоматического изменения размера Firefox, отправив (немного плохо документированный) enableObjectResizing Команда к документу:

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

AFAIK, это можно безопасно сделать только после загрузки документа, и я не знаю, как отключить захват, который является отдельной функцией.

Answer 3

В Chrome 39 эти маркеры, кажется, не существуют, даже если вы этого хотели.

В Firefox можно просто использовать execCommandВроде ZoogieZork ответил.

Но в Internet Explorer это нельзя отключить. Надо обойтись.

В разработке WYMeditor вот что я нашел.

Следующие результаты в:

• В IE интерфейс изменения размера отображается на долю секунды, а затем исчезает. Кажется, у пользователя нет возможности его использовать.
• Изображения - это текст, выделенный на mouseup
• Возможность перетаскивать изображения. В некоторых браузерах их, возможно, придется выбирать перед перетаскиванием. Как написано в предыдущем пункте, простой mouseup приведет к выбору изображения.
• Изображения выбираются с использованием выделения текста, а не "выбора элемента управления" (того, который предоставляет интерфейс изменения размера).

Это лучшее, что я мог придумать после нескольких часов очень глубоких вдохов. Я думаю, что это достаточно хорошо, если вы действительно хотите избавиться от этих ручек.

В IE настройка oncontrolselect возвращать false на изображении действительно препятствует появлению этих дескрипторов, и вы можете сделать это умно, прикрепив следующий обработчик к mousedown событие:

function (evt) {
    var img;

    function returnFalse() {
        return false;
    }

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

Это на самом деле не работает полностью хорошо. Причина, по которой он не работал очень хорошо, заключается в том, что для начала операции перетаскивания изображения нужно было нажать и удерживать мышь, не перемещая ее, в течение доли секунды, и только затем начать ее перемещать для сопротивление Если нажать и сразу начать перетаскивать, изображение останется на своем месте и не будет перетаскиваться.

Поэтому я этого не делал.

Я сделал следующее. Во всех браузерах я использовал mouseup для текста выберите целевое изображение исключительно. В не-IE и IE11, синхронно:

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

В IE с 7 по 10 асинхронно:

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

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

Это позволило убедиться, что после того, как эти маркеры появятся, они исчезнут как можно скорее, потому что изображение теряет свой "выбор элемента управления", поскольку этот выбор заменяется обычным выделением текста.

В Internet Explorer с 7 по 11 я прикрепил обработчик к dragend это удаляет все выделения:

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

Это делает ручки, которые появляются после перетаскивания, исчезают.

Я надеюсь, что это поможет, и я надеюсь, что вы можете сделать это еще лучше.

Answer 4

Я просто сталкиваюсь с этой проблемой. Я старался document.execCommand("enableObjectResizing", false, false); но значок перемещения все еще появлялся. Что просто исправить мою проблему было просто e.preventDefault() когда onmousedown событие происходит.

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

Answer 5

Для IE11 (я не тестировал более старые версии IE, но чувствую, что это будет работать) вы можете добавить атрибут contenteditable="false" в тег img. Это предотвратит любое изменение размера при сохранении перетаскивания на месте.

Answer 6

... самое лучшее решение

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

или любой HTML-элемент, который упаковывает ваш ввод /img

Работает на IE11 как шарм

Answer 7

Вы пытались добавить стиль

border: none;

в див?