Problema Cargando Editor con JQuery

dontripi · #1 (**permalink**) 01/02/2012, 09:13

Saludos compañeros, tengo una situacion al utilizar load en jquery

resulta que tengo una pagina primera.php que tienen un boton en el cual al hacer clic cargo otra pagina segunda.php en un div dentro de primera.php, resulta que segunda.php tiene un editor wysiwyg que se llama tinyMCE, resulta que si yo accedo directamente a la pagina segunda.php me carga normalmente la pagina con el editor, pero si llamo la pagina desde jquery me carga unicamente el textarea sin las funcionalidades del tinyMCE.

primera.php

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="keywords"  content="" />
<meta name="description" content="" />
<title>Editable jquery tree with php codes</title>

<script type="text/javascript" src="js/jquery/jquery.min.js"></script>
<script>
function area (){
		$('#textos').load("segunda.php");	
	}
</script>
</head>
<body>
<form>
    <input type="image" src="../images/add.png" onclick="area()" />
	<div id="textos" align="center" style="float:left">   
   </div> 
</form>
</body>
</html>

segunda.php

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <style>
  	.color_titulo {
	color: #039;
	font-weight: bold;
	font-size: 18px;
	}
  </style>
  <script src="../js/jquery-1.6.2.min.js"></script> 
  <script type="text/javascript" src="../js/tiny_mce/tiny_mce.js"></script>
  <script>      
  tinyMCE.init({
        
		// General options
        mode : "exact",
        elements : "contenedor",
        theme : "advanced",
        plugins : "autolink,lists,spellchecker,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,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",
        theme_advanced_statusbar_location : "bottom",
        theme_advanced_resizing : true,

        // Skin options
        skin : "o2k7",
        skin_variant : "silver",

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

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

        // Replace values for the template plugin
        template_replace_values : {
                username : "Some User",
                staffid : "991234"
        }
});
  </script>
  
</head>
<body>
  <div style="float:left">
 
   <div align="center">
   <br>
    <textarea id="contenedor" name="contenedor" style="width:500px; height:300px"></textarea>
   </div> 
</body>
</html>

Les agradezco cualquier colaboracion que me puedan prestar con esta situacion, muchas gracias.

dontripi · #2 (**permalink**) 01/02/2012, 13:42

Perdon me respondo y de una vez por si alguien le ocurre igual, debia utilizar el jquery.tinymce.js y no el tinymce.js, simplemente se cambia el archivo al que se hace referencia, se modifica el script para crear el editor y listo.

Código HTML:

<script src="../js/jquery-1.6.2.min.js"></script> 
<script type="text/javascript" src="../js/tiny_mce/jquery.tinymce.js"></script>
<script>      
  $(function() {
                $('textarea.tinymce').tinymce({
                        // Location of TinyMCE script
                        script_url : '../js/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>

de todos modos muchas gracias ;)

sirdaiz · #3 (**permalink**) 06/07/2012, 05:47

Donde descargaste jquery.tinymce.js?