TinyMCE 4 не может вводить текстовые поля плагина

Использование TinyMCE 4.1.5 под JS (с JQuery 1.11.1 и несколькими плагинами JQuery, такими как form и ui). Версия TinyMCE, которую я использую, не имеет встроенного JQuery.

Редактор работает нормально, и я могу без проблем печатать прямо в нем. Используя только плагины, предоставленные tinymce, все функции, использующие кнопки или элементы управления, не являющиеся текстовыми полями, работают нормально.

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

Здесь есть скрипка http://fiddle.tinymce.com/bzeaab/16, а вот более конкретный код инициализации из приложения:

var _clear_css_cache;
_clear_css_cache = '/javascripts/canonical/tinymce/skins/lightgray/' +
                   'content.min.css?' +
                   new Date().getTime();

var _toolbar_1, _toolbar_2;
_toolbar_1 = 'formatselect, |, ' +
             'bold, italic, underline, strikethrough, ' +
                'subscript, superscript, |,' +
             'outdent, indent, blockquote, |,' +
             'alignleft, aligncenter, alignright, alignjustify';

_toolbar_2 = 'bullist, numlist, table, charmap, emoticons |,' +
             'link, unlink, |,' +
             'image, media, |,' +
             'code, preview |,' +
             'pasteword, print |,' +
             'undo, redo,';

var _contextmenu;
_contextmenu = 'link image inserttable | ' +
               'cell row column deletetable';

tinymce.init({
  selector: 'textarea.tinymce',
  toolbar: [_toolbar_1, _toolbar_2],
  plugins: [
    'advlist autolink autosave code charmap contextmenu emoticons image', 
    'lists link media paste preview print table'
  ],
  contextmenu: _contextmenu,
  theme: 'modern',
  content_css: _clear_css_cache,
  menubar: false,
  statusbar: false,
  convert_urls: false,
  relative_urls: false,
  invalid_elements: 'script'
});

И для вставки в целевой div (с дочерним элементом textarea.tinymce) я использую довольно стандартный вызов:

function do_wysiwyg(_div) {
  tinymce.execCommand('mceAddEditor', true, $(_div).attr('id'));
});

Я пробовал несколько браузеров локально и в BrowserStack, и ни одно из текстовых полей плагина не работает ни в одном из них, хотя редактор работает.

См. Также использование tinymce с blockui.

Мысли? Заранее спасибо.

ОБНОВЛЕНИЕ (07.10.2014): интересно, мешает ли z-index, но пока не повезло с экспериментами. Это обновление очень старой установки tinymce, и плагины там работали нормально, поэтому не ожидалось никакого преобразования, кроме самого кода / вызова tinymce.

ОБНОВЛЕНИЕ 2 (07.10.2014): попробуйте сейчас: http://fiddle.tinymce.com/bzeaab/16. Возникает только при использовании BlockUI! Бьюсь об заклад, что теперь есть ловушка фокуса от BlockUI.


javascript jquery tinymce tinymce-4
person rdnewman    schedule 06.10.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Одно из решений, которое кажется работающим, - передать bindEvents = false в вызове .blockUI в качестве опции (вместе с msg и т. Д. См. http://fiddle.tinymce.com/bzeaab/17, чтобы узнать, как работает оригинальная скрипка (http://fiddle.tinymce.com/bzeaab/16) был изменен, чтобы позволить плагину работать.

Меня беспокоит то, что этот подход отвязывает все в оверлее blockUI, а не только плагины tinymce, поэтому может быть слишком завышенным.

Прокомментируйте или опубликуйте другой ответ, если у вас есть лучший совет, чем этот. Я не буду принимать это как ответ, пока другие не получат возможность высказать свое мнение. Спасибо!

person rdnewman    schedule 07.10.2014
comment
Если у кого-то есть ответ получше, я буду рад переназначить утверждение ответа. - person rdnewman; 13.10.2014
comment
Это кажется лучшим решением. - person Script47; 28.10.2017
comment
Пытался поиграть, и он работает - с одной проблемой: текст, который вы вводите в первое поле, появляется во втором поле. Проверено в хроме и опере. - person oyvey; 16.01.2021