简单模式对话框和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

回答

相关问题