tinyMCE 5与getUIKIT uk-手风琴(隐藏/显示div)

Question

我使用的是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");      
})

控制台中没有错误。我找不到我做错了什么--但很明显，有些事情并没有发挥应有的作用。如果有人能指出问题所在，那将是很有帮助的。谢谢

Answer 1

这可能是由于UIKIT如何处理显示和隐藏的东西。如果它在不可见时使用display:none“隐藏”元素，并在显示项目时更改可见性--这将对TinyMCE造成问题，因为当元素具有display:none时，它不再是DOM的一部分。稍后显示手风琴的内容时，display:none被更改为display:block，元素现在是DOM的一部分。每次显示/隐藏可能创建和销毁DOM元素的内容时，都会有效地进行操作。

您需要做的不是init() TinyMCE，直到通过“显示”适当的<textarea>的操作来显示<textarea>。当您隐藏手风琴时，您需要使用remove() API来在TinyMCE 之前断开关闭连接(例如，在<li>恢复到display:none和从DOM中删除元素之前)。

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

Answer 2

问题似乎确实是英国手风琴和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