Fatal编程技术网

Jquery plugins 简单模态对话框和TinyMCE

jquery-plugins

Jquery plugins 简单模态对话框和TinyMCE,jquery-plugins,Jquery Plugins,我正在使用simplemodal（一个插件）和绑定。我的问题是，在第一次打开对话框时，TinyMCE工作正常，但一旦我关闭该对话框并重新打开它，TinyMCE就不再工作了。我不能输入任何字符。甚至我的提交按钮也不起作用 以下是链接： 这是我的密码： $(document).ready(function() { $('.basic').click(function (e) { e.preventDefault(); tinyMCE.init({

我正在使用
simplemodal
（一个插件）和绑定。我的问题是，在第一次打开对话框时，TinyMCE工作正常，但一旦我关闭该对话框并重新打开它，TinyMCE就不再工作了。我不能输入任何字符。甚至我的提交按钮也不起作用

以下是链接：

这是我的密码：

$(document).ready(function() {    
    $('.basic').click(function (e) {
        e.preventDefault();
        tinyMCE.init({
            // General options
            mode : "textareas",
            theme : "advanced",                    
            plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount",

            // Theme options
            theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull",
            theme_advanced_buttons2 : "fontselect,fontsizeselect,bullist,numlist,forecolor,backcolor",
            theme_advanced_buttons3 : "",        
            theme_advanced_toolbar_location : "top",
            theme_advanced_toolbar_align : "left",
            dialog_type : "modal"
        });            
        $('#basic-modal-content').modal({});
    });
    $('.close').click(function (e) {
        e.preventDefault();
        $.modal.close();
    });    
});
我只是有同样的问题，花了一些时间搜索。您需要将tinyMCE.init代码放在简单模式的onShow函数中

比如：

jQuery(function ($) {

$('#modal-link').click(function (e) {

    $('#modal-content').modal({
        onShow: function() {
            initMCE();
        }
    });
    return false;

});
我不知道。。。要么我是个新手，要么我只是尝试用最简单的方式做事。你收集的羽毛越多，像我这样的傻瓜就越难理解

在过去的22个小时里，我一直在忙这个问题。我甚至信心大增，直接给埃里克·马丁发了一封电子邮件，但我知道，他有一个家庭要照顾，而且，我们这些新手都是后顾之忧。。。一直如此

不管怎么说，我在几个小时前遇到了你建议的解决方案，但就是不知道它的头绪。我不理解你们中的许多人在SimpleModel中使用“click（e）”的必要性。我相信即使是Eric自己的建议/演示也充满了它

不管是谁：我终于能够在这里和那里添加tid和bit，并尝试了所有可能的解决方案，我找到了我的最终解决方案

首先也是最重要的一点，我喜欢用最少的javascriptsrc或任何其他可能会减慢加载速度的混乱来清理我的主页

所以，我主要关心的是使tinyMce的js src和它的初始化远离主页，这是我花了22个小时的更多时间在上面的地方

几分钟前，我完成了大部分工作，并取得了工作成果。这是：

a） 在主页上（顺便说一句：我尝试只为整个站点创建一个页面，并使用jQuery和Eric的简单模式加载所有其他内容），我有一些常见的怀疑：

<script type='text/javascript' src='/myIncludes/jquery-1.4.4.min.js'></script>
<script type='text/javascript' src='/myIncludes/jquery.blockUI.js'></script>
<script type="text/javascript" src="/myIncludes/jquery.simpleModal-1.4.1.min.js"></script>
<script type='text/javascript' src='/myIncludes/tinymce_3_3_9_3/jscripts/tiny_mce/tiny_mce.js' rel='forceLoad'></script>
因此，正如您所看到的，我没有打开或显示的
onOpen
或
onShow
，初始化部分是直接的

现在我已经正确地工作了，并且看到最后一次访问这里是在6个多月前，我相信我可以对其他像我这样的新手有所帮助

新年快乐。。。迟到了（嘿：……迟到总比不迟到好）。

我们又来了：玩得更远，我找到了一个我更喜欢的解决方案：在主页上根本不打电话

有一件事是肯定的：如果您来到这个页面，是因为您使用的是Eric的SimpleModel。如果是这样，那么您肯定是在使用jQuery

考虑到这一点，为什么不使用jQuery版本的tinyMCE呢

好的，我的解决方案是在将要使用tinyMCE的页面中保留对tinyMCE javascript的调用和初始化

具体地说，在我的例子中，我在独立模式中为编辑器调用tinyMCE，因为我使用simpleModal来调用我的显示，所以我使用jQuery加载函数

例如：

正在加载编辑器为模式的页面：showdeditor.asp（asp，因为我有数据库访问权限，可以放置有关要编辑、键入或回复的帖子的信息）

模态隐藏div（在主应用程序页面上）：myModal

在showEditor页面上：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <!-- #include virtual="/.../my database functions . asp" -->
        <script type='text/javascript' src='/your_path/jscripts/tiny_mce/jquery.tinymce.js' rel='forceLoad'></script>
        <script type='text/javascript'>
            $(function() {
                $('textarea.tinymce').tinymce({
                    // Location of TinyMCE script
                    script_url : '/myIncludes/tinyMCE/jscripts/tiny_mce/tiny_mce.js',
                    // General options
                    theme : "advanced",
                    plugins : "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",

                    // Theme options
                    theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
                    theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
                    theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
                    theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
                    theme_advanced_toolbar_location : "top",
                    theme_advanced_toolbar_align : "left",
                    theme_advanced_statusbar_location : "bottom",
                    theme_advanced_resizing : true,

                    // Example content CSS (should be your site CSS)
                    content_css : "css/content.css",

                    // Drop lists for link/image/media/template dialogs
                    template_external_list_url : "lists/template_list.js",
                    external_link_list_url : "lists/link_list.js",
                    external_image_list_url : "lists/image_list.js",
                    media_external_list_url : "lists/media_list.js",

                    // Replace values for the template plugin
                    template_replace_values : {
                        username : "Some User",
                        staffid : "991234"
                    }
                });
            });

        </script>
    </head>

    <body>
        <textarea id='yourChosenID' class='tinymce' cols='10' rows='10'></textarea>
    </body>
</html>
好了：一个完整的；非修改的；原始示例。根据您的喜好定制它，并特别注意src javascript调用中提到的tinymce是指它的jQuery（jQuery.tinymce.js）版本；虽然jQuery函数中提到的是纯tiny_mce.js。

下面的代码对我有用。请试试这个，它可能对你有帮助。单击调用此shw_desc（）函数

<script type='text/javascript'>
    function shw_desc()
    {
        $('.popup').modal({
            width: 556,
            onShow: function (dialog) {

                mce();
            }

        });
    }
    function mce()
    {
        $(".popup #wedding_desc_parent").remove();
        tinyMCE.init({
            // General options
            mode : "exact",
            elements : "wedding_desc",
            theme : "advanced",
            dialog_type : "modal",
            width : "270",
            height : "230",

            plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
            theme_advanced_buttons1 : "bold,italic,underline,|,href,|,bullist,numlist",
            theme_advanced_buttons2 : "",
            theme_advanced_buttons3 :"",

            theme_advanced_toolbar_location : "top",
            theme_advanced_toolbar_align : "left",
            theme_advanced_statusbar_location : "bottom",
            theme_advanced_resizing : true,

            content_css : "templates/tinymce/css/style.css",
            // Drop lists for link/image/media/template dialogs
            template_external_list_url : "lists/template_list.js",
            external_link_list_url : "lists/link_list.js",
            external_image_list_url : "lists/image_list.js",
            media_external_list_url : "lists/media_list.js",


            // Replace values for the template plugin
            template_replace_values : {
                username : "Some User",
                staffid : "991234"
            }
        });

        $(".popup #wedding_desc_parent").show();



    }
</script>  


函数shw_desc（）
{
$（'.popup'）.modal({
宽度：556，
onShow：函数（对话框）{
mce（）；
}
});
}
函数mce（）
{
$（“.popup#wedding_desc_parent”）.remove（）；
tinyMCE.init({
//一般选择
模式：“精确”，
元素：“婚礼描述”，
主题：“高级”，
对话框类型：“模态”，
宽度：“270”，
高度：“230”，
插件：“safari，pagebreak，style，layer，table，save，advhr，advimage，advlink，emotions，iespell，inlinepopups，insertdatetime，preview，media，searchreplace，print，contextmenu，paste，directionality，fullscreen，NoEdit，visualchars，NoBreaking，XHTML，template”，
主题_高级_按钮1：“粗体、斜体、下划线、|、href、|、粗体、数字列表”，
主题\高级\按钮2:“”，
主题\高级\按钮3:“”，
主题\高级\工具栏\位置：“顶部”，
主题\高级\工具栏\对齐：“左”，
主题\高级\状态栏\位置：“底部”，
主题\u高级\u大小调整：正确，
content_css:“templates/tinymce/css/style.css”，
//链接/图像/媒体/模板对话框的下拉列表
template\u external\u list\u url:“lists/template\u list.js”，
外部链接列表url:“lists/link\u list.js”，
外部图片列表url:“lists/image\u list.js”，
媒体\u外部\u列表\u url:“lists/media\u list.js”，
//替换模板插件的值
模板替换值：{
用户名：“某个用户”，
标记：“991234”
}
});
$（“.popup#wedding_desc_parent”）.show（）；
}
谢谢

Prasad Ilance

格式化提示：编辑器窗口上方有可用于格式化的按钮。例如，选择一些文本并按
{}
按钮将其缩进四个空格，这将使其呈现为代码块。更多信息请参见。请编辑您的帖子并格式化代码，使其可读：-） 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <!-- #include virtual="/.../my database functions . asp" -->
        <script type='text/javascript' src='/your_path/jscripts/tiny_mce/jquery.tinymce.js' rel='forceLoad'></script>
        <script type='text/javascript'>
            $(function() {
                $('textarea.tinymce').tinymce({
                    // Location of TinyMCE script
                    script_url : '/myIncludes/tinyMCE/jscripts/tiny_mce/tiny_mce.js',
                    // General options
                    theme : "advanced",
                    plugins : "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",

                    // Theme options
                    theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
                    theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
                    theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
                    theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
                    theme_advanced_toolbar_location : "top",
                    theme_advanced_toolbar_align : "left",
                    theme_advanced_statusbar_location : "bottom",
                    theme_advanced_resizing : true,

                    // Example content CSS (should be your site CSS)
                    content_css : "css/content.css",

                    // Drop lists for link/image/media/template dialogs
                    template_external_list_url : "lists/template_list.js",
                    external_link_list_url : "lists/link_list.js",
                    external_image_list_url : "lists/image_list.js",
                    media_external_list_url : "lists/media_list.js",

                    // Replace values for the template plugin
                    template_replace_values : {
                        username : "Some User",
                        staffid : "991234"
                    }
                });
            });

        </script>
    </head>

    <body>
        <textarea id='yourChosenID' class='tinymce' cols='10' rows='10'></textarea>
    </body>
</html>

function showEditor() {
    $('#myModal').load('showEditor.asp');
    $('#myModal').modal({ your options here });
}

<script type='text/javascript'>
    function shw_desc()
    {
        $('.popup').modal({
            width: 556,
            onShow: function (dialog) {

                mce();
            }

        });
    }
    function mce()
    {
        $(".popup #wedding_desc_parent").remove();
        tinyMCE.init({
            // General options
            mode : "exact",
            elements : "wedding_desc",
            theme : "advanced",
            dialog_type : "modal",
            width : "270",
            height : "230",

            plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
            theme_advanced_buttons1 : "bold,italic,underline,|,href,|,bullist,numlist",
            theme_advanced_buttons2 : "",
            theme_advanced_buttons3 :"",

            theme_advanced_toolbar_location : "top",
            theme_advanced_toolbar_align : "left",
            theme_advanced_statusbar_location : "bottom",
            theme_advanced_resizing : true,

            content_css : "templates/tinymce/css/style.css",
            // Drop lists for link/image/media/template dialogs
            template_external_list_url : "lists/template_list.js",
            external_link_list_url : "lists/link_list.js",
            external_image_list_url : "lists/image_list.js",
            media_external_list_url : "lists/media_list.js",


            // Replace values for the template plugin
            template_replace_values : {
                username : "Some User",
                staffid : "991234"
            }
        });

        $(".popup #wedding_desc_parent").show();



    }
</script>