tinyMCE 5 с getUIKIT uk-гармошкой (скрыть / показать div) - PullRequest
Новая
       18

tinyMCE 5 с getUIKIT uk-гармошкой (скрыть / показать div)

0 голосов
/ 16 мая 2019

Я использую tinyMCE 5 и getUIKIT 3. Я помещаю редактор в британский аккордеон, который позволяет мне показывать / скрывать div. Все идет хорошо, когда я показываю div в первый раз, редактор работает полностью. Я скрываю div, показываю снова - иногда редактор там иногда нет. С тех пор его никогда не будет, когда я прячусь / показываю. Вот кодекс с проблемой: https://codepen.io/prtome/pen/gJLdKo?editors=1111

и мой код (очень простой): HTML 

<ul uk-accordion>
  <li  id="toto">
    <a class="uk-text-primary uk-accordion-title" href="#">Item toto</a>
    <div class="uk-accordion-content">
        <textarea id="basic-example"></textarea>

     </div>
   </li>
 </ul>

И JS код: 

UIkit.util.on('#toto', 'shown', function (event) {
 tinymce.EditorManager.execCommand('mceAddEditor',false, 'basic-example');
  $('#basic-example').html("<p style=\"text-align: center;\"> blabla bla bla bla bla I can edit this </p>");
  tinymce.init({
  selector: 'textarea#basic-example',
  height: 200,
  menubar: true,
  plugins: [
    'advlist autolink lists link image charmap print preview anchor ',
    'searchreplace visualblocks code fullscreen',
    'insertdatetime media table paste code help wordcount'
  ],
  toolbar: 'undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help',
  content_css: [
    '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
    '//www.tiny.cloud/css/codepen.min.css'
  ]
 });
});

UIkit.util.on('#toto', 'hidden', function (event) {
 tinymce.execCommand('mceRemoveEditor', false, "basic-example");      
})

У меня нет ошибок в консоли. Я не могу понять, что я делаю неправильно, но очевидно, что что-то работает не так, как должно. Если кто-то может указать, где проблема, это будет очень полезно. Спасибо

Ответы [ 2 ]

0 голосов
/ 16 мая 2019

Это, вероятно, связано с тем, как UIKIT обрабатывает показ и скрытие вещей. Если он использует display:none для «скрытия» элементов, когда они не видны, и изменяет видимость, когда элементы должны быть показаны - это вызовет проблемы для TinyMCE, потому что, когда элемент имеет display:none, он больше не является частью DOM. Когда вы позже покажете содержимое аккордеона, display:none изменится на display:block, и элементы теперь станут частью DOM. Эффективно каждый раз, когда вы показываете / скрываете что-то, что вы, вероятно, создаете и уничтожаете элементы DOM.

То, что вам нужно сделать, это не init() TinyMCE, пока <textarea> не отобразится с помощью действия, которое «покажет» соответствующий <textarea>. Когда вы скрываете этот аккордеон, вы должны использовать API remove() для отключения TinyMCE до закрытия аккордеона (например, до того, как <li> возвращается в display:none и элементы удалено из DOM).

Я не знаю, можете ли вы заставить UIKIT использовать visibility:hidden вместо display:none, но это исключило бы все это, если это возможно.

0 голосов
/ 16 мая 2019

Кажется, проблема в несовместимости между uk-accordion и tinyMCE.Поскольку я действительно не хочу многократно инициализировать редактор, я думаю, что лучшее решение - поместить текстовую область за пределы аккордеона.В моем случае, редактор последнего аккордеона - это не проблема.так что мой HTML теперь: 

<ul uk-accordion>
    <li id="toto" class="uk-open">
        <a class="uk-text-primary uk-accordion-title" href="#">Item toto</a>
        <div class="uk-accordion-content" >
          <p>blablabla</p>
        </div>  
    </li>
</ul>
<textarea id="basic-example" class="uk-hidden"></textarea>

и JS 

 $('#basic-example').html("<p style=\"text-align: center;\"> blabla bla bla bla bla I can edit this </p>");

  tinymce.init({
  selector: 'textarea#basic-example',
  height: 200,
  menubar: true,
  plugins: [
    'advlist autolink lists link image charmap print preview anchor ',
    'searchreplace visualblocks code fullscreen',
    'insertdatetime media table paste code help wordcount'
  ],
  toolbar: 'undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help',
  content_css: [
    '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
    '//www.tiny.cloud/css/codepen.min.css'
  ],
    setup: function(ed) {
        ed.on('init', function(e) {
            e.target.hide();
        });
    }
});
UIkit.util.on('#toto', 'shown', function (event) {
  $('#basic-example').removeClass("uk-hidden");
  tinymce.editors['basic-example'].show();
})
UIkit.util.on('#toto', 'hidden', function (event) {
tinymce.editors['basic-example'].hide();
  $('#basic-example').addClass("uk-hidden");
})

он отлично работает, это кодовое поле https://codepen.io/prtome/pen/VObZaK

...