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

Question

我正在使用Tinymce 5，然后getUikit3。我将编辑器放在英国符号中，这使我可以显示/隐藏Div。我第一次展示DIV时一切顺利，编辑器在那里充分发挥作用。我隐藏了div，再次显示 - 有时编辑有时不在那里。从那时起，当我隐藏/展示时，它永远不会存在。这里有一个问题的codepen：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之前(。

我不知道您是否可以强迫Uikit使用visibility:hidden，而不是display:none，但这将消除所有这些。

Answer 2

这个问题似乎是英国 - 符号和蒂尼克斯之间的一定不相容性。由于我真的不想多次发起编辑器，因此我认为最好的解决方案是将文本区域放在手风琴之外。在我的实际情况下，我将编辑作为最后一部手风琴，因此这不是问题。所以我的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");
})

它完美地工作，这是codepenhttps://codepen.io/prtome/pen/vobzak