Удаление обработчиков изменения размера в contentEditable div
-
20-09-2019 - |
Вопрос
Я создал contentEditable div для использования в качестве расширенного текстового поля.Вокруг него есть обработчики изменения размера, от которых я хотел бы избавиться.Есть какие-нибудь идеи, как бы я это сделал?
Редактировать:Похоже, это происходит потому, что я абсолютно позиционирую div, поэтому Firefox добавляет к элементу приводящий в бешенство атрибут _moz_resize, который я не могу отключить.
Решение 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?