Fatal编程技术网
  • javascript/
  • Javascript Tinymce切换滑动向下jquery

Javascript Tinymce切换滑动向下jquery

javascript jquery html jquery-ui tinymce

Javascript Tinymce切换滑动向下jquery,javascript,jquery,html,jquery-ui,tinymce,Javascript,Jquery,Html,Jquery Ui,Tinymce,如果我向下滑动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"&g

如果我向下滑动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>


div{
高度：300px；
}
// 
TinyMCE入门指南
祝贺
点击
向下滑动之前：

向下滑动后： 


div{
高度：300px；
}
// 0) {
setTimeout（函数（）{
tinymce.EditorManager.execCommand（'mceRemoveEditor'，true，'mytextarea'）；
tinymce.EditorManager.execCommand（'mceAddEditor'，true'，mytextarea'）；
}, 100);
tinyMCE.get（'emailTemplateContent'）.setContent（''）；
}否则{
tinyMCE.EditorManager.init({
选择器：“#mytextarea”，
身高：300，
插件：[
'advlist autolink列出链接图像charmap打印预览锚'，
“searchreplace visualblocks代码”，
“insertdatetime媒体表上下文菜单粘贴代码”
],
工具栏：“插入文件撤消重做|样式选择|粗体斜体|对齐左对齐居中对齐右对齐对齐对齐|粗体numlist outdent缩进|链接图像”
});
}
$（'#mytextarea'）.val（''）；
})
}//]]> 
点击
TinyMCE入门指南
祝贺
jQuery slidedown使用
display:none
在不可见时“隐藏”元素，并在显示项目时更改可见性-这将导致TinyMCE问题，因为当元素具有
display:none
时，它不再是DOM的一部分。当您向下滑动以显示
的内容时，
显示：无
将更改为
显示：块
，元素现在是DOM的一部分。每次向下/向上滑动时，您都在创建和销毁DOM元素

在通过向下滑动过程显示
之前，您不需要执行
init（）
TinyMCE。向上滑动时，需要使用
remove（）
API在向上滑动发生之前断开TinyMCE（例如，在
恢复为
显示之前：无
且元素从DOM中移除）


我不知道是否可以强制jQuery使用
visibility:hidden
，而不是
display:none
，但如果可能的话，这将消除所有这些
 请解释你的答案！这样每个人都能理解你做了什么以及你为什么要这么做。谢谢但滑落或滑落不会发生。

<!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>