Блог

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

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

Проблема:

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

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

Обновить:

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

• Проблема возникает при сборке jQuery или без нее и не зависит от того, какие плагины tinymce используются.
• Кажется, что более толстая «граница» появляется только тогда, когда к элементу применяется (минимальная) высота / ширина, либо объявленная встроенной, либо из внешнего 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">amp;<pamp;>Testingamp;</pamp;></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. Нажмите на существующий абзац, должна появиться небольшая граница размером 1 пиксель, и вы не сможете редактировать текст.
3. Нажмите на элемент еще раз, теперь появится толстая граница, и текст можно редактировать.
4. Введите несколько символов, затем нажмите кнопку отправки. Обновление не будет отправлено вместе с $_POST данными. Если бы вы щелкнули другую область внутри редактора, удалив толстую границу, данные были бы отправлены нормально.

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

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

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

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

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

Вопрос 2 связан с реализацией IE contentEditable, это запрос на их сайте connect с просьбой исправить это 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

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

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

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

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

Вот статья, которая объясняет это довольно хорошо: вы не можете удалить их, если не удалите свойство, из-за которого они появились. 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 предотвратит изменение размера.

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