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

StackOverflow https://stackoverflow.com/questions/1926525

Вопрос

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

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

alt text

Это было полезно?

Решение 2

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

Другие советы

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

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

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

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

В Firefox можно просто использовать execCommand, как ответил Зугиезорк.

Но в 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
    }
}

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

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

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

...просто лучшее решение на свете

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

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

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

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

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

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

border: none;

к div?

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top