it-swarm.com.ru

Как отключить выделение и изменение размеров элементов в contenteditable div?

Например. У меня есть следующий макет:

<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>

Итак, как отключить это:

enter image description here

и это: 

enter image description here

27
Andrei

Я потратил на это много времени сам, пытаясь полностью скрыть выбор элементов управления (так они называются) в CKEditor 's widgets . К сожалению, у меня нет хороших новостей.

Решение 1

Прежде всего, есть событие mscontrolselect . Когда я нашел его (и тот факт, что его имя имеет префикс ms), я был очень счастлив, потому что согласно MS это должно быть предотвратимо.

Но оказалось, что это совершенно нестабильно. Иногда его увольняют, иногда нет. Это зависит от версии IE, структуры DOM, атрибутов, элемента, на который вы нажимаете, является ли он элементом блока и т.д. Обычное MS. Но вы можете попробовать:

function controlselectHandler(evt) {
    evt.preventDefault();
}
document.body.addEventListener('mscontrolselect', controlselectHandler);

Однако это полностью заблокирует выбор (если это сработало). Таким образом, вы сделаете эти элементы невыбираемыми вообще.

Решение 2

Тогда есть второй вариант, более надежный - перемещение выделения в другое место после нажатия на такой элемент. Это можно реализовать несколькими способами. В CKEditor мы фиксируем выделение на mousedown... и mouseup, потому что (опять же) иногда этого недостаточно для IE и это зависит от дюжины условий. Вы также можете прослушать событие selectionchange и исправить выбор там.

Однако, опять же, мы также говорим о блокировке выделения такого элемента.

Решение 3

Поэтому третьим вариантом является блокировка не выбора, а события resizestart. CKEditor объединяет это с командой enableObjectResizing: https://github.com/ckeditor/ckeditor-dev/blob/a81e759/plugins/wysiwygarea/plugin.js#L211-L218 . Это решение предотвратит изменение размеров, но, конечно, не скроет эти уродливые границы.

Решение 4

Как я уже говорил, я работал над этой проблемой в CKEditor. Нам удалось создать нередактируемые элементы внутри редактируемых, но с полностью контролируемым и унифицированным поведением между браузерами. Полное решение слишком сложно, чтобы объяснить его в StackOverflow, и на его реализацию у нас ушли месяцы. Мы назвали эту функцию виджетами. Смотрите некоторые демоверсии здесь . Как видите, при выборе нередактируемого элемента выбор элемента управления отсутствует. Выбор появляется на короткое время только между mousedown и mouseup, но только в определенных случаях. За исключением того, что все работает так, как было бы родным (хотя это совершенно фальшивая вещь).

Подробнее читайте в Введение в виджеты и в Учебник по виджетам .

23
Reinmar

Этот пост был критическим при решении этой проблемы для меня (работает в tinyMCE):

Как удалить маркеры изменения размера и границы div с помощью contentEditable и size style

Помещая contenteditable DIV в не contenteditable DIV, маркеры не появляются в IE или FF, но вы все равно можете редактировать содержимое

Ex.

<div class="outerContainer" contenteditable="false">
    <div class="innerContainer" contenteditable="true">
    </div>
</div>
10
Baron

Решение 5

Когда фокус перемещен на дочерний элемент управления, измените значение атрибута редактируемого элемента содержимого на false и таким же образом, как только ваш фокус снова выйдет из дочернего элемента управления, установите для редактируемого содержимого значение true. 

5
user3698559

Чтобы отключить маркеры изменения размера, все, что мне нужно было сделать, это добавить следующее для IE11:

div {
    pointer-events: none;
}

Для firefox выполнение этой строки после вставки contenteditable элемента работает:

document.execCommand("enableObjectResizing", false, false);
3
Kevin Lee

Что решило проблему для меня, так это удаление строки max-width: 100% !important; из свойств CSS элементов DOM в contenteditable DIV. Надеюсь, поможет!

Кстати, это не происходит на MS Edge ... пальцы скрещены, что это показывает движение в правильном направлении от MS :)

1
Federico Cismondi

У меня та же проблема с 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");
        }
    });
});
1
Christof

"переполнение: скрыто;" также может вызвать эту проблему, например:

ul, ol {
  overflow: hidden;
}
1
Oleg Zemelia Raban

У меня такая же проблема. Похоже, что из предыдущих постов здесь есть определенные поведения, которые IE распознает и добавит этот абзац focus/resize. Для меня это было потому, что у меня был стиль для параграфов в contenteditible div.

Удаление:

div[contenteditble="true"] p{
   min-height:1em;
}

Исправил это для меня.

1
user1364467

ИСПРАВЛЕНО! Поместив нередактируемый для содержимого промежуток в редактируемый содержимымBODY, он начал показывать контейнер с возможностью изменения размераSPAN. То, что просто решило мою проблему, было простым однострочным стилем CSS pointer-events: none; на внутреннейSPANтег.

min-width: 1.5cm;
display: inline-block;
pointer-events: none;
<body content-editable="true">
  <span>Sample Text</span>
</body>

0
Mohtashim Shamsi

Больше никто не рекомендовал здесь или в других темах действительно работать для меня, но я решил это, выполнив:

[contenteditable="true"] p:empty {
    display: inline-block;
}

Таким образом, поля изменения размера исчезли, но я все еще мог установить курсор ниже или в блоках P, чтобы редактировать их.

0
Ezra

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

[contenteditable] * { max-width: 100%; } // causes the issue
[contenteditable] img { max-width: 100%; } // works fine for me

Убедитесь, что на свойства <p> не влияет свойство max-width.

0
retoheusser

Вот что я сделал, чтобы исправить эту проблему. Для меня это произойдет только тогда, когда элемент contenteditable будет пустым, а маркеры изменения размера исчезнут при наличии контента, поэтому я создал следующее решение только для CSS:

[contenteditable]:empty:after {
  content: " ";
}

Идея решения заключается в том, что всякий раз, когда поле contenteditable пустое, он применяет псевдоэлемент пустого пространства, таким образом удаляя теги изменения размера, которые не отображаются, когда пользователь выбирает поле contenteditable. Когда пользователь вводит что-либо, псевдоэлемент исчезает.

Обратите внимание, что из-за использования псевдоэлементов это исправление работает только в IE9 и выше.

0
Nej Kutcharian