Question

如果我在tinymce编辑器中滑动了tinymce iframe内部html被删除。向下滑动后，我无法输入tinymce文本区域。

代码在这里：

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="robots" content="noindex, nofollow">
  <meta name="googlebot" content="noindex, nofollow">
  <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script>
  <script type="text/javascript" src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  <script type="text/javascript" src="https://tinymce.cachefly.net/4.2/tinymce.min.js"></script>
  <style type="text/css">
    div {
        height: 300px;
    }
  </style>

  <title></title>
    <script type='text/javascript'>//<![CDATA[
        window.onload=function(){
            tinymce.init({
                selector: "#mytextarea"
            });

            $('button').click(function() {
            $('div').toggle('slide', { direction: 'down' }, 250);
            })
        }//]]> 

    </script>


</head>
<body>
    <div>
        <h1>TinyMCE Getting Started Guide</h1>
        <textarea id="mytextarea">Congratulations!</textarea>
    </div>
    <button>
    click
    </button>
</body>
</html>

在滑行之前：

滑倒后：

Answer 1

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="robots" content="noindex, nofollow">
  <meta name="googlebot" content="noindex, nofollow">
  <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script>
  <script type="text/javascript" src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  <script type="text/javascript" src="https:////cdn.tinymce.com/4/tinymce.min.js"></script>
  <style type="text/css">
    div {
        height: 300px;
    }
  </style>

  <title></title>
    <script type='text/javascript'>//<![CDATA[
        window.onload=function(){


            $('button').click(function() {
             if (tinymce.editors.length > 0) {
                setTimeout(function () {
                    tinymce.EditorManager.execCommand('mceRemoveEditor', true, 'mytextarea');
                    tinymce.EditorManager.execCommand('mceAddEditor', true, 'mytextarea');

                }, 100);
                tinyMCE.get('emailTemplateContent').setContent('');
            } else{
            tinyMCE.EditorManager.init({
                selector: "#mytextarea",
                height: 300,
                    plugins: [
                      'advlist autolink lists link image charmap print preview anchor',
                      'searchreplace visualblocks code',
                      'insertdatetime media table contextmenu paste code'
                    ],
                    toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image'
            });
            }
            $('#mytextarea').val('');
            })
        }//]]> 

    </script>


</head>
<body>
<button>
    Click
    </button>
    <div>
        <h1>TinyMCE Getting Started Guide</h1>
        <textarea id="mytextarea">Congratulations!</textarea>
    </div>

</body>
</html>

Answer 2

jQuery slidingown在不可见时使用display:none来“隐藏”元素，并在显示项目时更改可见性 - 这将导致TinyMCE出现问题，因为当元素不再有display:none时DOM的一部分。当您执行向下滑动以显示<div>的内容时display:none已更改为display:block，并且元素现在是DOM的一部分。实际上，每次向下/向下滑动都会创建并销毁DOM元素。

在通过下滑过程显示init()之前，您需要做的不是<textarea> TinyMCE。当您向上滑动时，您需要使用remove() API断开TinyMCE 之前的滑动（例如在<div>恢复为{{之前} 1}}并从DOM中删除元素。

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

Tinymce toggle slidedown jquery

2 个答案: