Почему панель инструментов не работает в редакторе TinyMCE во всплывающем окне?

Question

В моем всплывающем окне есть редактор tinymce, но я не могу использовать панель инструментов («Файл», «Редактировать», «Формат» и т. Д.), Они не отображаются для меня, потому что я в всплывающем окне.

Пример кода:

   $('#popupdId").arcticmodal({
    overlay: {
        css: {
            backgroundColor: '#000',
            opacity: 0.6
        }
    },
    afterClose:function () {
        showBodyYScroll();
    }
});

     tinymce.init({
    selector: '#testId",
    plugins: "link",
    setup: function (editor) {
        editor.on('init', function () {
            this.setContent('');
        });
    }
});

Пример моего tinymce: https://clip2net.com/s/3ZFngUM

Может быть, есть несколько правильных способов добавления tinymce во всплывающее окно, например append или другой?

Answer 1

Менубар (область с File, Edit, и т. Д.), Безусловно, выглядит видимой на вашем скриншоте.Я подозреваю, что вы имеете в виду, что они отключены (например, вы не можете нажать на них)?

Некоторые модальные среды хотят лишить любого другого элемента на экране возможность захватывать фокус.Например, в Bootstrap вы должны сделать что-то вроде этого:

$(document).on('focusin', function(e) {
  if ($(e.target).closest(".mce-window").length) {
    e.stopImmediatePropagation();
  }
});

Не представляете, что вы используете для модалов, но это может быть проблемой.

Я бы также посмотрел на CSS, чтобы увидеть, есть ли у вас какой-то CSS, который влияет на строку меню.

В идеале вы должны сделать JS Fiddle или CodePen, показывающие эту проблему в действии, чтобы люди могли точно видеть, как у вас настроены вещи.