например. У меня есть следующий макет:
<div contenteditable="true">
<span class="text-block" contenteditable="false">
<span contenteditable="false">Name</span>
<a href="javascript:void(0)">
<i class="small-icon-remove"></i>
</a>
</span>
</div>
Итак, как отключить это:
и это:
Я потратил на это много времени самостоятельно, пытаясь полностью скрыть контрольные выборы (так их называют) в CKEditor виджеты. К сожалению, у меня нет хороших новостей.
Прежде всего, есть событие mscontrolselect. Когда я нашел его (и тот факт, что его имя имеет префикс ms), я был очень доволен, потому что в соответствии с MS его следует предотвращать.
Но оказалось, что он полностью неустойчив. Иногда его увольняют, иногда это не так. Он варьируется между версиями IE, структурой DOM, атрибутами, элементом, который вы нажимаете, является ли он блочным элементом и т.д. Обычная MS-дерьмо. Но вы можете попробовать:
function controlselectHandler(evt) {
evt.preventDefault();
}
document.body.addEventListener('mscontrolselect', controlselectHandler);
Однако это полностью блокирует выбор (если он сработает). Таким образом, вы сделаете эти элементы не поддающимися выбору.
Затем есть второй вариант, более надежный - перемещение выделения в другом месте после нажатия на этот элемент. Есть несколько способов, которыми это может быть реализовано. В CKEditor мы фиксируем выбор на mousedown... и mouseup, потому что (опять же) иногда этого недостаточно для IE, и это зависит от дюжины условий. Вы также можете прослушать selectionchange событие и исправить выбор там.
Однако, опять же, мы также говорим о блокировке выбора такого элемента.
Поэтому третий вариант заключается в блокировке не выбора, а в событии resizestart. CKEditor объединяет это с командой enableObjectResizing: https://github.com/ckeditor/ckeditor-dev/blob/a81e759/plugins/wysiwygarea/plugin.js#L211-L218. Это решение предотвратит изменение размера, но, конечно, не скроет эти уродливые границы.
Как я уже говорил, я работал над этой проблемой в CKEditor. Нам удалось создать нередактируемые элементы внутри редактируемого, но с полностью контролируемым и унифицированным поведением между браузерами. Полное решение слишком сложно объяснить на StackOverflow, и нам потребовались месяцы для его реализации. Мы назвали эту функцию виджетами. См. Примеры здесь. Как вы видите, нет выбора управления, если выбран не редактируемый элемент. Выбор появляется на короткое время только между mousedown и mouseup, но только в определенных случаях. Кроме того, все работает так, как если бы оно было родным (хотя это совершенно фальшивая вещь).
Подробнее в Введение в виджеты и в Учебник по виджетам.
Это сообщение было критично при решении этой проблемы для меня (работает в tinyMCE):
Как удалить ручки размера и границу div с contentEditable и размерным стилем
Поместив контент-доступный DIV в неконкурентоспособный DIV, ручки не отображаются в IE или FF, но вы все равно можете редактировать контент
Исх.
<div class="outerContainer" contenteditable="false">
<div class="innerContainer" contenteditable="true">
</div>
</div>
Решение 5
Когда фокус перемещается в дочернее контрольное изменение, значение атрибута редактируемого элемента контента равно false и тому же, как только фокус покидает дочерний элемент управления, он снова устанавливает значение, доступное для редактирования, true.
Чтобы отключить ручки изменения размера, все, что мне нужно было сделать, это добавить следующее для IE11:
div {
pointer-events: none;
}
Для firefox, выполняющего эту строку после того, как вставленный контент-элемент был вставлен, работает:
document.execCommand("enableObjectResizing", false, false);
У меня такая же проблема с CKEditor 4.4.7 в IE11. В качестве обходного пути я сохраняю текущие размеры элемента на "mousedown" и задаю свойства стиля "min-width", "max-width", "min-height" и "max-height" для текущих измерений. При этом элемент будет отображаться в оригинальном размере во время изменения размера. В "mouseup" я восстанавливаю свойства стиля модифицированного элемента. Вот мой код:
$('textarea').ckeditor().on('instanceReady.ckeditor', function(event, editor) {
var $doc = $(editor.document.$);
$doc.on("mousedown", "table,img", function() {
var $this = $(this);
var widthAttrValue = $this.attr("width");
if (widthAttrValue) {
$this.data("widthAttrValue", widthAttrValue);
}
var widthStyleValue = this.style.width;
if (widthStyleValue) {
$this.data("widthStyleValue", widthStyleValue);
}
var width = widthStyleValue || widthAttrValue || String($this.width())+"px";
var height = this.style.height || $this.attr("height") || String($this.height())+"px";
$this.css({
"min-width": width,
"max-width": width,
"min-height": height,
"max-height": height,
});
$doc.data("mouseDownElem",$this);
}).on("mouseup", function() {
var $elem = $doc.data("mouseDownElem");
if ($elem) {
$elem.removeAttr("height").css("height","");
var widthAttrValue = $elem.data("widthAttrValue");
if (widthAttrValue) {
$elem.attr("width", widthAttrValue);
$elem.removeData("widthAttrValue");
} else {
$elem.removeAttr("width");
}
var widthStyleValue = $elem.data("widthStyleValue");
if (widthStyleValue) {
$elem.removeData("widthStyleValue");
}
$elem.css({
"min-width":"",
"max-width":"",
"min-height":"",
"max-height":"",
"width": widthStyleValue || ""
});
if (!$.trim($elem.attr("style"))) {
$elem.removeAttr("style");
}
$doc.removeData("mouseDownElem");
}
});
});
Для меня проблема заключалась в удалении строки max-width: 100% !important; из свойств CSS элементов DOM в contenteditable DIV. Надеюсь, это поможет!
Кстати это не происходит на MS Edge... пальцы скрещены, что это показывает движение в правильном направлении MS:)
У меня была та же проблема. Похоже, что из предыдущих сообщений здесь есть определенные типы поведения, которые IE распознает и добавит этот абстракционный фокус/изменение размера. Для меня это было потому, что у меня был стиль для абзацев внутри contenteditible div.
Удаление:
div[contenteditble="true"] p{
min-height:1em;
}
Исправлено это для меня.
"переполнение: скрыто;" также может вызвать эту проблему, например:
ul, ol {
overflow: hidden;
}
Вот что я сделал, чтобы исправить эту проблему. Для меня это произойдет только тогда, когда элемент contenteditable будет пуст, и ручки изменения размера исчезнут, когда будет содержимое, поэтому я создал следующее решение только для CSS:
[contenteditable]:empty:after {
content: " ";
}
Идея решения заключается в том, что всякий раз, когда поле contenteditable пуст, он применяет псевдоэлемент пустого пространства, тем самым удаляя теги изменения размера, когда пользователь выбирает поле contenteditable. После ввода пользователем чего-либо псевдоэлемент исчезает.
Обратите внимание, что из-за использования псевдоэлементов это исправление работает только на IE9 и выше.
У меня была такая же проблема, потому что я поместил CSS-правила для max-width на все дочерние элементы в contenteditable. Удаление его или ограничение его на изображения сделали трюк.
[contenteditable] * { max-width: 100%; } // causes the issue
[contenteditable] img { max-width: 100%; } // works fine for me
Убедитесь, что элементы <p> не влияют на свойство max-width.
Больше никто не рекомендовал здесь или в других темах действительно работать для меня, но я решил это, выполнив:
[contenteditable="true"] p:empty {
display: inline-block;
}
Таким образом, поля изменения размера исчезли, но я все еще мог установить курсор ниже или в блоках P, чтобы редактировать их.
РЕШИТЬ! Поместив нередактируемый контент в BODY для редактирования контента, он начал показывать контейнер SPAN с возможностью изменения размера. То, что просто исправило мою проблему, было простым однострочным указателем-событиями стиля CSS : ни один; на внутренней метке SPAN.
min-width: 1.5cm;
display: inline-block;
pointer-events: none;<body content-editable="true">
<span>Sample Text</span>
</body>