带有 getUIKIT 英国手风琴的 tinyMCE 5 (hide/show div)

Question

我使用的是 tinyMCE 5 和 getUIKIT 3。我将编辑器放在 uk-accordion 中，这样我就可以 show/hide div。第一次显示 div 时一切顺利，编辑器功能齐全。我隐藏 div，再次显示 - 编辑器有时不在。从此以后，我hide/show的时候，它再也不在了。这是一个有问题的代码笔：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");      
})

我在控制台中没有错误。我找不到我做错了什么 - 但很明显有些东西没有正常工作。如果有人能指出问题出在哪里，那将非常有帮助。谢谢

Answer 1

问题似乎确实是 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");
})

完美运行，这就是codepen https://codepen.io/prtome/pen/VObZaK

Answer 2

这可能是由于 UIKIT 处理显示和隐藏内容的方式所致。如果它在不可见时使用 display:none 到 "hide" 元素，并在显示项目时更改可见性 - 这将导致 TinyMCE 出现问题，因为当元素具有 display:none 时，它不再DOM 的一部分。当您稍后显示手风琴的内容时，display:none 更改为 display:block 并且元素现在是 DOM 的一部分。实际上，每次你 show/hide 你可能会创建和销毁 DOM 个元素。

你需要做的不是 init() TinyMCE，直到 <textarea> 通过 "shows" 适当的 <textarea> 的操作显示。当您隐藏该手风琴时，您需要使用 remove() API 断开 TinyMCE 之前手风琴关闭发生（例如在 <li> 恢复为 display:none 并且元素从 DOM 中删除之前。

我不知道你是否可以强制 UIKIT 使用 visibility:hidden 而不是 display:none，但如果可能的话，这将消除所有这些。

带有 getUIKIT 英国手风琴的 tinyMCE 5 (hide/show div)

tinyMCE 5 with getUIKIT uk-accordion (hide/show div)

html

javascript

tinymce

getuikit