Comment faire TinyMCE travail à l'intérieur d'un UpdatePanel?

Ok, le problème est de deux ordres. Stefy fourni avec une partie de la réponse, qui est, vous devez les initialiser TinyMCE sur la publication par l'enregistrement du script de démarrage comme suit:

using System.Web.UI;

namespace TinyMCEProblemDemo
{
    public partial class EditorClean : UserControl
    {
        protected void Page_Load(object sender, System.EventArgs e)
        {                
              ScriptManager.RegisterStartupScript(this.Page, 
                  this.Page.GetType(), mce.ClientID, "callInt" + mce.ClientID + "();", true);
        }
    }
}

Le deuxième problème que vous avez avec votre mise en œuvre d'un contrôle personnalisé. La conception des contrôles personnalisés est hors de portée de cette réponse. Google peut vous y aider.

Vous avez plusieurs instances de votre commande sur la page qui peut vous causer des problèmes avec le script, comme il se rendait plusieurs fois. C'est de cette façon que je l'ai modifié votre balisage pour résoudre votre problème(avis de nommage dynamique de vos fonctions de script, commandes personnalisées doit être autonome et de la mode: "exact" sur la tinyMCE.init):

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="EditorClean.ascx.cs"
    Inherits="TinyMCEProblemDemo.EditorClean" %>
<script type="text/javascript" src="Editor/tiny_mce.js"></script>

<script type="text/javascript">
    function myCustomCleanup<%= mce.ClientID%>(type, value) {
        if (type == "insert_to_editor") {
            value = value.replace(/&lt;/gi, "<");
            value = value.replace(/&gt;/gi, ">");
        }
        return value;
    }
    function myCustomSaveContent<%= mce.ClientID%>(element_id, html, body) {
        html = html.replace(/</gi, "&lt;");
        html = html.replace(/>/gi, "&gt;");
        return html;
    }

    function callInt<%= mce.ClientID%>() {

        tinyMCE.init({
            mode: "exact",
            elements: "<%= mce.ClientID%>",
            theme: "advanced",
            skin: "o2k7",
            plugins: "inlinepopups,paste,safari",
            theme_advanced_buttons1: "fontselect,fontsizeselect,|,forecolor,backcolor,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,bullist,numlist,|,outdent,indent,blockquote,|,cut,copy,paste,pastetext,pasteword",
            theme_advanced_buttons2: "",
            theme_advanced_buttons3: "",
            theme_advanced_toolbar_location: "top",
            theme_advanced_toolbar_align: "left",
            cleanup_callback: "myCustomCleanup<%= mce.ClientID%>",
            save_callback: "myCustomSaveContent<%= mce.ClientID%>"
        });
    }
</script>
<textarea runat="server" id="mce" name="editor" cols="50" rows="15">Enter your text here...</textarea>

La manière correcte de faire tinyMCE travail dans un updatepanel:

1) Créer un gestionnaire pour l'OnClientClick de votre bouton "soumettre".

2) Exécuter tinyMCE.execCommand("mceRemoveControl", false, '<%= txtMCE.ClientID %>'); dans le gestionnaire, afin de supprimer la tinyMCE instance avant la publication.

3) Dans votre async la publication, utilisez le ScriptManager.RegisterStartupScript pour exécuter tinyMCE.execCommand("mceAddControl", true, '<%= txtMCE.ClientID %>');

Fondamentalement, tout ce que vous devez faire est d'utiliser la mceRemoveControl commande avant la async publication et d'enregistrer un script de démarrage pour exécuter le mceAddControl commande après l'async publication. Pas trop difficile.

C'est une vieille question, mais après des heures de recherche et de déconner à la recherche pour la réponse, je me sens obligé de poster la solution, je suis venu avec.

Il semble que, au moins dans la mise en œuvre que j'utilise (plusieurs éditeurs à l'intérieur d'un UpdatePanel) qui tinyMCE doit être informé que le contrôle est aller loin quand l'UpdatePanel soumet, ou bien il va refuser de le charger à nouveau.

Donc, en plus du code d'Initialisation de TinyMCE (qui ne doit s'exécuter que lorsque l'ensemble du chargement de la page), vous devez le faire pour chacun de vos MCE zones de texte:

ScriptManager.RegisterStartupScript(this, this.GetType(), elm1.UniqueID+"Add",
"tinyMCE.execCommand('mceAddControl', true,'" + elm1.ClientID + "');", true);
ScriptManager.RegisterOnSubmitStatement(this, this.GetType(), elm1.UniqueID + "Remove",
"tinyMCE.execCommand('mceRemoveControl', true,'" + elm1.ClientID + "');");

elm1 est ce que la tinyMCE élément. Le mien est un textarea résidant dans un UserControl, mais vous pouvez l'appliquer à tout élément que vous souhaitez lier/délier votre textarea.

Vous ne savez pas si vous avez regardé ces.

http://joakimk.blogspot.com/2007/07/tinymce-inside-of-aspnet-ajax.html

et

http://codeodyssey.com/archive/2007/7/18/updatepanel-tinymce-demo-with-project-zip-file

Voici une tinymce post sur le forum sur ce

http://tinymce.moxiecode.com/punbb/viewtopic.php?id=12682

Bonne chance.

j'ai résolu ce problème
appel tiny mce après la réponse de la génération de l'appel ajax

function edittemp(name) {
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
{
alert ("Your browser does not support XMLHTTP!");
return;
}
var url="edit_temp.php";
url=url+"?id="+name;
xmlhttp.onreadystatechange=stateChanged3;
xmlhttp.open("GET",url,true);
xmlhttp.send(null); 
}
function stateChanged3()
{
if (xmlhttp.readyState==4)
{
spl_txt=xmlhttp.responseText.split("~~~");
document.getElementById("edit_message").innerHTML=spl_txt[0];   
tinyMCE.init({
theme : "advanced",
mode: "exact",
elements : "elm1",
theme_advanced_toolbar_location : "top",
theme_advanced_buttons1 : "bold,italic,underline,strikethrough,separator,"
+ "justifyleft,justifycenter,justifyright,justifyfull,formatselect,"
+ "bullist,numlist,outdent,indent",
theme_advanced_buttons2 : "link,unlink,anchor,image,separator,"
+"undo,redo,cleanup,code,separator,sub,sup,charmap",
theme_advanced_buttons3 : "",
height:"350px",
width:"600px"
});
}
}

et la page caaled par appel ajax est

<?php
$name=$_GET['id'];
include 'connection.php';
$result=mysql_query("SELECT * FROM `templete` WHERE temp_name='$name' and status=1");
$row = mysql_fetch_array($result);
$Content=$row['body'];
?>
<html>
<head>
<title>editing using tiny_mce</title>
<script language="..." src="tinymce/jscripts/tiny_mce  /tiny_mce.js"></script>
</head>
<body>
<h2>change the template here</h2>
<form method="post" action="save_temp.php?name=<?php echo $name;?>">
<textarea id="elm1" name="elm1" rows="15" cols="80"><?php echo $Content;?></textarea>
<br />
<input type="submit" name="save" value="Submit" />
<input type="reset" name="reset" value="Reset" />
</form>
</body>
</html>

peut être utile dans une telle situation.

TinyMCE (ainsi que d'autres éditeurs WYSIWYG, FCKEditor, etc) souffre de publication problèmes de validation. Par défaut, toutes les ASP.Net page sur la publication a son contenu vérifié, et tout clair HTML jette la publication d'erreur de validation.

Maintenant, beaucoup de gens, y compris sur les forums vous suggérons de désactiver la publication de validation, validaterequest="false" , mais ce qui vous rend vulnérable à des attaques de script, la meilleure chose à faire est de lier une fonction asynchrone publication de l'événement qui déclenche juste avant async publication. Cette fonction JavaScript doit coder le HTML TinyMCE données affichées sur le serveur, cela va passer de la publication de validation et vous serez OK.

Je crois TinyMCE et d'autres éditeurs correctement ce faire sur les publications, mais pas async publications d'où la question, en fait, si vous regardez TinyMCE la source, vous pouvez probablement trouver leur fonction qui fait cela et il suffit d'ajouter l'événement de liaison.

Espère que cette aide