Ручки изменения размера изображения в contenteditable режиме IE

Question

Как можно выборочно отключить маркеры изменения размера изображения в режиме contenteditable IE 7 +? Я попытался установить для imageEditable изображения значение false и его onresizestart "вернуть false" безрезультатно.

Я использую tinyMCE.

Answer 1

Установите unselectable="on" для ваших изображений. Работает для более старых IE, но в последнее время устарела.

Answer 2

Это потребовало усилий, времени и удачи: вы хотите, чтобы событие 'controlselect' удалило маркеры изменения размера в IE.

element.oncontrolselect = function () { return false; };

Приведенная выше строка кода работала для меня (предостережение: я не использую TinyMCE, но, похоже, это головная боль contentEditable, а не конкретная TinyMCE). Вам нужно установить этот обработчик для любого элемента, для которого вы не хотите иметь эти маркеры перетаскивания (в моем случае это изображения).

Answer 3

Я использовал плагин advimagescale в tinyMCE, чтобы остановить изменение размеров всех изображений. Однако я обнаружил, что он не позволяет перетаскивать изображения и помещать их в экземпляр редактора.

Я обнаружил, что могу удалить атрибуты размера при наведении мыши, используя:

setup : function(ed) {
    ed.onMouseUp.add(function(ed, e) {
        if (e.target.nodeName == "IMG") {
            e.target.removeAttribute("width"); 
            e.target.removeAttribute("height"); 
        }
    });
}

Мне бы очень хотелось избавиться от этих чертовых ручек.

Answer 4

Просто лучшее решение из всех:

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

или любой HTML-элемент, заключающий в себе ваш ввод / img

Работает как брелок в IE11 с img тоже.

Answer 5

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

noresize.htc:

<public:component lightweight="true">

    <script language="javascript">

    function CancelEvent()
    {
            return false ;
    }

this.onresizestart = CancelEvent ;
this.onbeforeeditfocus = CancelEvent ;

</script>

</public:component>

Тогда в css:

img.noresize {
    behaviour:url(/css/noresize.htc);
}

Обратите внимание, что вам нужно правильно указать путь url (). Добавьте класс css к изображениям, которые вы хотите выборочно отключить.

В этой статье есть альтернативный файл .htc, который у меня не работал:

http://nickw101.wordpress.com/2011/02/25/disabling-image-resizing-in-ie-contenteditable-elements/

Answer 6

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

<div id="editor" contenteditable="true" onresizestart="return false;">
    <img src="..." />
</div>

Или с JS:

var editor = document.getElementById('editor');
editor.onresizestart=function(){return false;}

Это не скроет дескрипторы, но пользователи не смогут изменить размер элемента, независимо от его типа.

Надеюсь, это поможет!