TinyMCE проблемы с изменяемым размером содержимого в IE8

Question

Обновление: После публикации на форуме TinyMCE (что я должен был сделать, прежде чем предлагать награду), основная проблема может быть решена, но я все еще очень открыт для что-нибудь относительно других вопросов о том, как отключить поведение изменяемого размера (номера 2 и 3 в конце поста).

---

У меня проблемы с сохранением контента с TinyMCE в IE8 (не в других версиях). В IE определенные элементы в редакторе имеют маркеры в каждом углу и перетаскиваемые «границы», и когда вы фокусируете, чтобы начать редактирование, может появиться полосатая рамка:

Проблема:

Если я отправлю форму, пока толстая рамка еще видна (состояние 3 на изображении), форма не сохранит содержимое. Я должен щелкнуть в другой области редактора, чтобы все границы исчезли, и , а затем отправить форму.

Я использую jQuery-пакет TinyMCE 3.4.6, я не вижу такого поведения в других браузерах.

---

Обновление:

Я немного сузил причину проблемы и нашел несколько вещей:

• Проблема возникает со сборкой jQuery или без нее и не зависит от того, какие плагины tinymce используются.
• Более толстая "граница" появляется только тогда, когда к элементу применена (min-) высота / ширина, объявленная как встроенная или из внешнего CSS.

• Используя IETester , я получал сообщения об ошибках 'length' is null or not an object при потере фокуса от активного элемента; т.е. когда вы щелкаете в любом месте вне редактора TinyMCE.

  

  Я не видел этой ошибки в истинной установке IE8 (что-то, к чему у меня сейчас нет доступа), однако: это имеет смысл, учитывая проблему и обходные пути, указанные выше. Мне пришлось дважды нажать «Отправить» и отклонить предупреждения, чтобы получить форму для публикации в IETester.

• Эти границы и дескрипторы будут фактически расширяться за пределы редактора / iframe:

Я создал живое демо , вот его содержание:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="tiny_mce/jquery.tinymce.js"></script>
<script type="text/javascript">
    $(function() {
        $('textarea.tinymce').tinymce({
            script_url : 'tiny_mce/tiny_mce.js',
            content_css : 'test.css'
        });
    });
</script>

<form action="" method="post">
<textarea class="tinymce" name="content">&lt;p&gt;Testing&lt;/p&gt;</textarea>
<button type="submit">Submit</button>
</form>

/* Content of test.css */
p {
    min-height: 24px; /* this line makes the handles appear */
    background-color: #f00;
    color: #fff;
}

Как воспроизвести:

1. Откройте демонстрационную версию в IE8
2. Нажмите на существующий абзац, должна появиться небольшая граница в 1px, и вы не сможете редактировать текст.
3. Снова нажмите на элемент, теперь появляется толстая рамка и текст можно редактировать.
4. Введите несколько символов, затем нажмите кнопку отправки. Обновление не будет отправлено с данными $_POST. Если бы вы щелкнули другую область внутри редактора, удалив толстую границу, данные были бы отправлены нормально.

---

Вопросы / проблемы:

1. Важно: Как получить форму для публикации отредактированного текста, не требуя обходного пути от пользователя?

   Обновление: Это, похоже, решено в недавнем коммите от ведущего разработчика TinyMCE. Я все еще не смог протестировать на реальной установке IE8, но это сработало и заставило замолчать ошибки в IETester.

2. Менее важно: Есть ли способ полностью предотвратить или удалить ручки и перетаскиваемые края? Я предполагаю, что это связано с реализацией IE contentEditable, а не с TinyMCE, и, возможно, даже не является причиной проблемы.

3. Extra : Как я могу предотвратить распространение этих маркеров за пределы редактора?

Answer 1

Вопрос 2 связан с реализацией IE contentEditable. Это билет на сайте подключения с просьбой исправить его https://connect.microsoft.com/IE/feedback/details/576043/paragraphs-with-haslayout-behave-like-a-block-inside-contenteditable (требуется регистрация)

Я не знаю ни одного решения для Вопроса 3, кроме как ждать нового IE. В последнем IE10 под windows8 они утверждают, что он исправлен https://connect.microsoft.com/IE/feedback/details/576040/resizing-handles-in-contenteditable-elements-are-placed-over-any-other-element (требуется вход в систему), но их решение - всегда скрывать маркеры изменения размера. Что ж, есть решение, и нужно избегать использования какого-либо стиля во время редактирования, который заставляет внутренний флаг hasLayout для IE

Answer 2

Очевидно, что вы не можете исправить вторую проблему.

Вот статьи, которые достаточно хорошо объясняют это: вы не можете удалить их, если не удалите свойство, из-за которого они появились.http://www.satzansatz.de/cssd/onhavinglayout.html (поиск по слову "удалить")

Вы можете еще немного улучшить, используя это для контейнера (элемент с contenteditable):

function fixIE( editableContainer ) {
    editableContainer.onmousedown = function ( e ) {
        e = e || event;
        ( e.target || e.srcElement ).focus( );
    };
    editableContainer.onresizestart = function ( e ) {
        e = e || event;
        if ( e.stopPropagation ) {
            e.stopPropagation( );
        }
        e.cancelBubble = true;
        if ( e.preventDefault ) {
            e.preventDefault( );
        }
        e.returnValue = false;
        return false;
    };
}

(Ваш элемент не должен быть div). Onmousedown позволит вам щелкнуть только один раз, чтобы перейти в состояние, в котором вы можете писать.Onresizestart предотвратит изменение размера.

Answer 3

хорошо, это странная ошибка IE8.Я нашел обходной путь, но все же команда tinymce должна это исправить.

Я обнаружил, что перед отправкой формы вы можете установить содержимое текстовой области на содержимое текстовой области ... Звучит странноно вызов .html() вызывает событие tinymce, которое возвращает правильный html.

$("button").click(function() { 
    $("textarea").html($("textarea").html());
});

Answer 4

если вы дадите ему hasLayout, он должен работать.Попробуйте увеличить: 1;