Отключение выделения <img>и изменение размера внутри ContentEditable DIV в IE 9 - PullRequest
Новая
       38

Отключение выделения <img>и изменение размера внутри ContentEditable DIV в IE 9

6 голосов
/ 03 ноября 2011

Я работаю над проектом, который пытается реализовать некоторые функции редактирования, используя DIV contentEditable. Сейчас мы пытаемся добавить поддержку IE9 (после первоначального предоставления поддержки Chrome / Safari), и это становится проблемой.

То, что мы можем сделать в Chrome, - это иметь <img> объекты внутри редактируемого содержимого div и позволять перетаскивать / отбрасывать эти <img> элементы, но не изменять их размер. Кроме того, нажатие TAB в div contentEditable не должно выбирать <img>

В IE 9 я нашел несколько методов, чтобы остановить изменение размеров изображений (например, Разрешение перемещения только на images внутри contentEditable

), но даже при этом все еще отображаются эти чертовы ручки изменения размера при нажатии на изображение. Моя большая проблема заключается в том, что в IE 9, когда я печатаю внутри contenteditable div и нажимаю TAB, я хочу, чтобы браузер выбрал следующий элемент на веб-странице (в нашем приложении это еще один div contentEditable). Это работает в Chrome, но в IE, когда я нажимаю TAB, выбирается <img> (с отображением маркеров изменения размера)

Кто-нибудь знает, есть ли способ отключить функцию «Выбор с помощью вкладки» в IE 9?

Вот простой тестовый пример, который отключает изменение размера, по-прежнему допускает перетаскивание, но <img> по-прежнему выбирается через TAB: 

<html>
  <head>
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
    <script type="text/javascript">
  $(document).ready(function() {

  //This line below doesn't work in IE9
  //document.execCommand("enableObjectResizing", false, false);

    $('img', '#edit').each(function (i, item) {
        item.attachEvent("onresizestart", function(e) {
            e.returnValue = false; 
        }, false);

        //I thought this below might work for disabling selection, 
        // but it doesn't...
        item.attachEvent("onbeforeeditfocus", function(e) {
            e.returnValue = false;
        }, false);
    });   
  });
</script>

  </head>
  <body>

    <div id="edit" contenteditable="true">
      Here is some text, and also an <img src="http://img841.imageshack.us/img841/1747/imagead.png" /> image
    </div>

  </body>
</html>

Ответы [ 2 ]

2 голосов
/ 03 ноября 2011

Вот отправная точка для вас. Он не идеален (в частности, обнаружение сильной руки вниз / вверх), но в основном он обнаруживает, когда изображение в элементе contenteditable выбирается с помощью маркеров изменения размера («выбор элемента управления»; см. MSDN для более подробной информации). ) с помощью средств, не связанных с мышью, и перемещает фокус на другой contenteditable элемент (жестко запрограммированный в примере). Это работает в IE 7; Я не тестировал в IE 9, но я ожидаю, что он будет работать.

Живая демоверсия: http://jsfiddle.net/5BGxT/3/

Код: 

if (document.selection && "onselectionchange" in document) {
    // Ensure image can be resized when clicked on
    var mouseDown = false;

    document.getElementById("one").onmousedown = function() {
        mouseDown = true;
    };

    document.getElementById("one").onmouseup = function() {
        mouseDown = false;
    };

    document.onselectionchange = function() {
        var sel = document.selection;
        if (!mouseDown && sel.type == "Control" &&
                sel.createRange().item(0).tagName == "IMG") {
            var nextEditableEl = document.getElementById("two");
            nextEditableEl.focus();
        }
    };
}
0 голосов
/ 09 августа 2012

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

см. https://stackoverflow.com/a/11878624/1491212

...