簡單模式對話框和TinyMCE

我使用simplemodal（一個jQuery插件）和綁定TinyMCE。我的問題是，在我的對話框第一次打開時，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(); 
    });  
});

來源

2009-12-09 tirso

我只是有同樣的問題，花了一些時間尋找。你需要將你的tinyMCE.init代碼放在簡單模式的onShow函數中。

喜歡的東西：

jQuery(function ($) { 

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

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

});

來源

2010-07-23 02:19:33 zgirod

我不知道......無論是我太新手或者我只是嘗試做的事情可能最簡單的方法。你聚集到任何東西的羽毛越多，像我這樣的假人就越難理解。

我在這個問題上一直忙於過去的22個小時。我甚至直接用信心和電子郵件直接發送了電子郵件，但是，據我瞭解，他有一個家庭要看，除此之外，我們是新手，在後面是一場皇家的痛苦......一直以來。

無論如何，幾個小時前我遇到了這個建議的解決方案，但無法制作它的正面和反面。我不明白你們中許多人在simpleModal中使用'click（e）'的必要性。我相信即使是埃裏克自己的建議/演示也充滿了它。

Anywho：我終於可以在這裏和那裏添加潮汐和位，並嘗試每種可能的解決方案，我找到了我的最後一個。

首先，我喜歡用最少的可能的javascript src或任何其他可能會減慢加載速度的混亂來清理我的主頁。

因此，我主要關心的是保留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>

在所謂的頁面，我有TinyMCE的初始化和文檔準備呼叫：

showEditor.asp < - 頁面中，我有這些東西：

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

所以，你看，我沒有onOpen或onShow，並且初始化部分是直線前進。

既然我的工作正常，並且看到最近一次訪問是在6個月前，我相信我可以對像我這樣的其他新手有所幫助。遲到（嘿：...比晚起更好）。

來源

2011-01-30 04:25:18

這裏我們再來一次：進一步發揮，我發現了一個我更喜歡的解決方案：根本不在主頁面調用tinymce。

有一件事是肯定的：如果你來到這個頁面是因爲你正在使用Eric的SimpleModal。而且，如果是這樣，你肯定會使用jQuery。

考慮到這一點，爲什麼不使用jQuery版本的tinyMCE？

好的，所以我的解決方案是保持對tinyMCE javascript的調用以及您要在其中使用tinyMCE的頁面中的初始化。

在我的情況下，具體來說，我叫一個獨立模式的編輯器tinyMCE，因爲我使用simpleModal來調用我的顯示器，所以我使用jQuery加載函數。

例：加載與編輯模態

頁：showEditor.asp（ASP，因爲我有數據庫訪問將有關崗位將被編輯或類型或回覆信息）。

modal hidden 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。

來源

2011-01-30 19:17:06

一種格式提示：有可用於格式化編輯器窗口上方的按鈕。例如，選擇一些文本並按下「{}」按鈕使它縮進四個空格，這將導致它被渲染爲代碼塊。有關更多信息，另請參閱http://stackoverflow.com/editing-help。 – sth 2011-01-31 00:20:46

下面的代碼適用於我。請嘗試此操作，這可能對您有所幫助。的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>

感謝

普拉薩德Ilance

來源

2013-02-25 11:28:31 prasad

請編輯您的文章並格式化代碼以使其可讀:-) – kleopatra 2013-02-25 11:35:45

簡單模式對話框和TinyMCE

回答

相關問題