Simple modal dialog and TinyMCE_问答_开发者_运维开发者技术经验分享

I am using simplemodal (a jQuery plug-in) and binding TinyMCE. My problem is, on first opening of my dialog, TinyMCE is working fin开发者_运维知识库e but once I close that dialog and re-open it then TinyMCE is not working anymore. I cannot type any character. Even my submit button doesn't work.

Here is the link:

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

Here is my code:

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

I just had the same problem and spent some time searching. You need to put your tinyMCE.init code inside of the onShow function of the simple modal.

Something like:

jQuery(function ($) {

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

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

});

I don't know ... either I am too much of a novice or I just try to do things the simplest way possible. The more feathers you aggregate to anything, the more difficult it is for dummies like me to understand.

I have been busy on this subject for the last 22 hours. I even took a leap of faith and e-mail Eric Martin directly but, I understand, he has a family to look over and, besides, we, newbies, are a royal pain in the behind ... ALL THE TIME.

Anyways, I came across this your suggested solution a couple of hours ago but just could not make heads and tails of it. I do not understand the need for the 'click (e)' that many of you put in the simpleModal. I believe that even Eric's own suggestions/demos are filled with it.

Anywho: I finally was able to add tids and bits from here and there and, trying every possible solution, I found my final one.

First and foremost, I like to have my main page clean with the least of possible javascript src or any other clutter that might slow down the loading of it.

So, my main concern was to keep the js src for the tinyMce and initialization of it away from the main page and there is where I spent more of the 22 hours on.

A few minutes ago I was able to accomplish most of it and got a working result. Here it is:

a) On the main page (by the way: I try to have just one page for the entire site and load everything else with jQuery and Eric's Simple Modal) I have the usual suspects:

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

On the called page, I have the tinyMce initialization and the document-ready call:

showEditor.asp <-- page in which I have these things:

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

And, my call for this page is simply

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

So, as you see, I do not have the onOpen or onShow and, the initialization part is straight forward.

Now that I have my working correctly and saw that the last access here was over 6 months ago, I believed I could be helpfull to other novices like me.

Happy New Year ... belated (hey: ... better late than never).

Here we go again: playing further, I found a solution that I like better: no tinymce call in the main page at all.

One thing for sure: if you came to this page is because you are using Eric's SimpleModal. And, if so, you are, definately, using jQuery.

With that in mind, why not use the jQuery version of tinyMCE?

Okay, so my solution is keep the call to tinyMCE javascript and the initialization in the page in which you are going to use the tinyMCE.

In my case, specifically, I call tinyMCE for an editor in a stand alone modal and, since I use simpleModal to call my displays, I use jQuery load function.

Example:

page being loaded for the modal with the editor: showEditor.asp (asp because I have database access to place information regarding the post about to be edited or type or replied to).

modal hidden div (on main application page): myModal.

on the showEditor page:

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

in the page that I call the editor, I process like this:

..... onClick=showEditor();

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

There you go: a complete; non-modified; raw example. Customize it to your taste and pay special attention that the tinymce mentioned on the src javascript call, refers to the jQuery (jquery.tinymce.js) version of it; while the one mentioned on the jQuery function, is the pure tiny_mce.js.

Below code is working for me. Please try this, it may be helpful for you. onclick call this shw_desc() function...

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

Thanks

Prasad Ilance