简单的模态对话框和TinyMCE

时间:2009-12-09 09:50:04

标签: jquery-plugins

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

这是链接:

http://webberzsoft.com/clients/codeigtest/index.php/simple_modal

这是我的代码:

$(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();
    });    
});

4 个答案:

答案 0 :(得分:2)

我遇到了同样的问题并花了一些时间进行搜索。您需要将tinyMCE.init代码放在简单模态的onShow函数中。

类似的东西:

jQuery(function ($) {

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

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

});

答案 1 :(得分:0)

我不知道......或者我是一个新手,或者我只是尝试以最简单的方式做事。你聚集到任何东西的羽毛越多,对我这样的假人来说就越难理解。

过去22小时我一直忙于这个话题。我甚至直接接受了信任,并直接发送电子邮件给Eric Martin,但据我所知,他有一个家庭可以看一看,而且,我们,新手,在后面是一个皇家的痛苦......所有的时间。

无论如何,我几个小时前就发现了你建议的解决方案,但却无法做出正面和反面。我不理解你们很多人在simpleModal中添加的“click(e)”的必要性。我相信甚至埃里克自己的建议/演示都充满了它。

Anywho:我终于能够从这里和那里添加tid和bit,并且尝试了所有可能的解决方案,我找到了最后一个。

首先,我喜欢用最少的可能的javascript src或任何其他可能减慢加载速度的混乱来清理我的主页。

所以,我主要担心的是将js src保留为tinyMce并将其初始化远离主页面,而且我花了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>

在被调用页面上,我有tinyMce初始化和文档就绪调用:

showEditor.asp&lt; - 我有这些东西的页面:

<head>
    <script type='text/javascript'>
        function initMCE() {
            // skin : "o2k7" - skin (silver)
            // skin_variant : "silver",
            tinyMCE.init({
                mode : "exact",
                elements : "postEditor",
                theme : "advanced",
                ......
                dialog_type : "modal",     // <-------you must have this
                ......
            });
        }

        $(document).ready(function() {
            initMCE();
        });
    </script>
</head>

<body>
    <textarea id='postEditor'></textarea>
</body>

而且,我对此页面的呼吁只是

$('#myModal').load('showEditor.asp');
$('#myModal').modal();

所以,如您所见,我没有onOpenonShow,初始化部分是直接的。

现在我的工作正常,并且看到最后一次访问是在6个月前,我相信我可以对像我这样的其他新手有所帮助。

新年快乐......迟来的(嘿:......迟到总比没有好。)

答案 2 :(得分:0)

我们再来一次:进一步发挥,我找到了一个我更喜欢的解决方案:根本没有在主页面中调用。

有一件事是肯定的:如果你来到这个页面是因为你使用的是Eric的SimpleModal。而且,如果是这样,你绝对是使用jQuery。

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

好的,所以我的解决方案就是保持对tinyMCE javascript的调用以及你将要使用tinyMCE的页面中的初始化。

在我的情况下,具体来说,我将tinyMCE称为独立模式的编辑器,因为我使用simpleModal来调用我的显示器,所以我使用jQuery加载函数。

示例:

使用编辑器为showal加载

页面:showEditor.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>

在我称之为编辑器的页面中,我这样处理:

..... onClick=showEditor();

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

你去了:一个完整​​的;非修饰;原始的例子。根据自己的喜好自定义它,并特别注意src javascript调用中提到的tinymce,指的是它的jQuery(jquery.tinymce.js)版本;而jQuery函数中提到的那个是纯tiny_mce.js。

答案 3 :(得分:0)

下面的代码对我有用。请试试这个,它可能对你有所帮助。 onclick调用此 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>  

由于

Prasad Ilance