tinyMCE 5 with getUIKIT uk-accordion

我正在使用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");      

})

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


PIPIONE
浏览 485回答 2
2回答

噜噜哒

这可能是由于UIKIT处理显示和隐藏事物的方式。如果它用于display:none在不可见时“隐藏”元素并在显示项目时更改可见性 - 这将导致TinyMCE出现问题,因为当元素具有display:none它时不再是DOM的一部分。当您稍后显示手风琴的内容时,display:none将更改为,display:block并且元素现在是DOM的一部分。有效地每次显示/隐藏您可能正在创建和销毁DOM元素的内容。你需要做的不是init()TinyMCE,直到<textarea>通过“显示”相应的动作显示<textarea>。当你隐藏那个手风琴时,你需要使用remove()API&nbsp;在手风琴关闭发生之前断开TinyMCE&nbsp;(例如在<li>恢复之前display:none和从DOM中删除元素之前)。我不知道你是否可以强迫UIKIT使用visibility:hidden,display:none但如果可能的话,这将消除所有这些。
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript