tinyMCE 5 with getUIKIT uk-accordion

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>AND 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但如果可能的话，这将消除所有这些。