问题
I'm trying to do something that many people seem to have been able to do but which I am unable to implement any solution. The TinyMCE control works pretty well in an asp.net form until you enclose it with an UpdatePanel, which then breaks after postback. I have tried some fixes like the RegisterClientScriptBlock method, but am still unsuccessful, I still lose the tinyMCE control after postback.
Below is a full test project (VS 2008) provided with a Control outside UpdatePanel and one inside, with a button on each to generate postback. Also in the project I have a EditorTest control which include commented code of some calls I tried, in case it gives anyone any ideas.
CODE SAMPLE
Here are some sources for some solutions on the MCE forum :
AJAX
UpdatePanel
回答1:
To execute the init everytime the UpdatePanel changes you need to register the script using ScriptManager:
// control is your UpdatePanel
ScriptManager.RegisterStartupScript(control, control.GetType(), control.UniqueID, "your_tinymce_initfunc();", true);
NOTE: You cannot use exact mode on your init function, you can use either textareas or a class selector, or else it won't work properly.
You also have to use
ScriptManager.RegisterOnSubmitStatement(this, this.GetType(), "", "tinyMCE.triggerSave();");
On a postback of a UpdatePanel the editor content isn't saved on the Textbox, because the default behavior is only for form.submit, so when you submit anything it will save the text before it posts.
On the code behind to get the value you will just need to access TextBox.Text property.
NOTE: If you are using the .NET GZipped you probably will have to drop it, I couldn't get it working, I had to remove this completely.
回答2:
Ok, your problem is two fold. Stefy supplied you with part of the answer, which is you have to initialize TinyMCE on the postback by registering startup script like so:
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);
}
}
}
The second problem you have is with your implementation of a custom control. Designing custom controls is out of scope of this answer. Google can help you there.
You have multiple instances of your control on the page which can cause you issues with script, as it get rendered multiple times. This is how I modified your markup to solve your issue(notice dynamic naming of your script functions, custom controls should be self contained and mode: "exact" on the 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(/</gi, "<");
value = value.replace(/>/gi, ">");
}
return value;
}
function myCustomSaveContent<%= mce.ClientID%>(element_id, html, body) {
html = html.replace(/</gi, "<");
html = html.replace(/>/gi, ">");
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>
回答3:
This solution no longer works for TinyMCE 4.2.3. Instead of using tinymce.mceRemoveControl() you now need to use tinymce.remove(). Here is a full working example:
The Page
<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPages/Frame.master" AutoEventWireup="true" CodeFile="FullImplementation.aspx.cs"
Inherits="TinyMCE" ValidateRequest="false" %>
<asp:Content ID="Content1" ContentPlaceHolderID="cphContent" Runat="Server">
<asp:ScriptManager runat="server"/>
<asp:UpdatePanel runat="server" id="upUpdatPanel">
<ContentTemplate>
<asp:TextBox runat="server" id="tbHtmlEditor" TextMode="MultiLine">
Default editor text
</asp:TextBox>
<asp:Dropdownlist runat="server" ID="ddlTest" AutoPostBack="true" OnSelectedIndexChanged="ddlTest_SelectedIndexChanged">
<Items>
<asp:ListItem Text="A"></asp:ListItem>
<asp:ListItem Text="B"></asp:ListItem>
</Items>
</asp:Dropdownlist>
<asp:Button runat="server" ID="butSaveEditorContent" OnClick="butSaveEditorContent_Click" Text="Save Html Content"/>
</ContentTemplate>
</asp:UpdatePanel>
<script type="text/javascript">
$(document).ready(function () {
/* initial load of editor */
LoadTinyMCE();
});
/* wire-up an event to re-add the editor */
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler_Page);
/* fire this event to remove the existing editor and re-initialize it*/
function EndRequestHandler_Page(sender, args) {
//1. Remove the existing TinyMCE instance of TinyMCE
tinymce.remove( "#<%=tbHtmlEditor.ClientID%>");
//2. Re-init the TinyMCE editor
LoadTinyMCE();
}
function BeforePostback() {
tinymce.triggerSave();
}
function LoadTinyMCE() {
/* initialize the TinyMCE editor */
tinymce.init({
selector: "#<%=tbHtmlEditor.ClientID%>",
plugins: "link, autolink",
default_link_target: "_blank",
toolbar: "undo redo | bold italic | link unlink | cut copy paste | bullist numlist",
menubar: false,
statusbar: false
});
}
</script>
</asp:Content>
The Code-Behind:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class TinyMCE : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
// we have to tell the editor to re-save the date on Submit
if (!ScriptManager.GetCurrent(Page).IsInAsyncPostBack)
{
ScriptManager.RegisterOnSubmitStatement(this, this.GetType(), "SaveTextBoxBeforePostBack", "SaveTextBoxBeforePostBack()");
}
}
protected void butSaveEditorContent_Click(object sender, EventArgs e)
{
string htmlEncoded = WebUtility.HtmlEncode(tbHtmlEditor.Text);
}
private void SaveToDb(string htmlEncoded)
{
/// save to database column
}
protected void ddlTest_SelectedIndexChanged(object sender, EventArgs e)
{
}
}
回答4:
The correct way to make tinyMCE work in an updatepanel:
1) Create a handler for the OnClientClick of your "submit" button.
2) Run tinyMCE.execCommand("mceRemoveControl", false, '<%= txtMCE.ClientID %>'); in the handler, so as to remove the tinyMCE instance before the postback.
3) In your async postback, use the ScriptManager.RegisterStartupScript to run tinyMCE.execCommand("mceAddControl", true, '<%= txtMCE.ClientID %>');
Basically, all you need to do is use the mceRemoveControl command before the async postback and register a startup script to run the mceAddControl command after the async postback. Not too tough.
回答5:
I did the following:
First I added the this Javascript to my page:
<script type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler);
function endRequestHandler(sender,args)
{
tinyMCE.idCounter=0;
tinyMCE.execCommand('mceAddControl',false,'htmlContent');
}
function UpdateTextArea()
{
tinyMCE.triggerSave(false,true);
}
</script>
Because I'm creating an ASP.NET and using and ASP.NET Button in my page, I had to add the following to the Page Load:
protected void Page_Load(object sender, EventArgs e)
{
Button1.Attributes.Add("onclick", "UpdateTextArea()");
}
回答6:
This is an old question, but after hours searching and messing around looking for the answer, I feel obligated to post the solution I came up with.
It appears that, at least in the implementation I'm using (multiple editors inside an UpdatePanel) that tinyMCE must be informed the control is going away when the UpdatePanel submits, or else it will refuse to load it again.
So, in addition to the code to Init TinyMCE (which only needs to run when the whole page loads) you need to do this for each of your MCE textboxes:
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 is whatever the tinyMCE element is. Mine is a textarea residing in a UserControl, but you can apply it to any item you want to bind/unbind your textarea.
回答7:
Updating the answer to this question for those using .NET framework 4, I was successful in attaching TinyMCE to a TextBox inside an update panel by inserting the following:
In markup within the <head></head> region:
<script src="scripts/tinymce/tinymce.min.js" type="text/javascript"></script>
<script type="text/javascript">
tinyMCE.init({
selector: ".tinymcetextarea",
mode: "textareas",
plugins: [
"advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker",
"searchreplace visualblocks visualchars code fullscreen autoresize insertdatetime media nonbreaking",
"save table contextmenu directionality emoticons template paste textcolor",
"autosave codesample colorpicker image imagetools importcss layer"
],
toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media | forecolor backcolor emoticons",
style_formats: [
{ title: 'Bold text', inline: 'b' },
{ title: 'Red text', inline: 'span', styles: { color: '#ff0000' } },
{ title: 'Red header', block: 'h1', styles: { color: '#ff0000' } },
{ title: 'Example 1', inline: 'span', classes: 'example1' },
{ title: 'Example 2', inline: 'span', classes: 'example2' },
{ title: 'Table styles' },
{ title: 'Table row 1', selector: 'tr', classes: 'tablerow1' }
]
});
</script>
In the markup within the <body></body> region:
<asp:TextBox ID="tbContentHtml" CssClass="tinymcetextarea" Wrap="true" runat="server" Width="90%" TextMode="MultiLine" />
And finally in codebehind in the Page_Load event:
ScriptManager.RegisterStartupScript(this, this.GetType(), tbContentHtml.UniqueID + "Add", "tinyMCE.execCommand('mceAddEditor', true,'" + tbContentHtml.ClientID + "');", true);
ScriptManager.RegisterOnSubmitStatement(this, this.GetType(), tbContentHtml.UniqueID + "Remove", "tinyMCE.execCommand('mceRemoveEditor', true,'" + tbContentHtml.ClientID + "');");
回答8:
Not sure if you've looked at these.
http://joakimk.blogspot.com/2007/07/tinymce-inside-of-aspnet-ajax.html
and
http://codeodyssey.com/archive/2007/7/18/updatepanel-tinymce-demo-with-project-zip-file
Here is a tinymce forum post on it
http://tinymce.moxiecode.com/punbb/viewtopic.php?id=12682
Good luck.
回答9:
You have to call the initializing method of the TinyMCE whenever the update panel is refreshed.
For this, you have either to call this method (tinyMCE.init) from a RegisterStartupScript method, or to create a page load javascript function in the head section of the page like this:
function pageLoad() {
tinyMCE.init();
}
This function will be executed each time the update panel is refreshed.
回答10:
i solved this problem as call tiny mce after the response generation of the ajax call
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"
});
}
}
and the page caaled by ajax call is
<?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>
may be helpful in such situation.
回答11:
I di this
<script language="javascript" type="text/javascript">
function pageLoad(sender, args) {
aplicartinyMCE();
}
function aplicartinyMCE() {
tinyMCE.init({
mode: "specific_textareas",
editor_selector: "mceEditor",
.....
});
}
</script>
That initialize the editor after each asynchronous postback even if
Then in page_load event
ScriptManager.RegisterOnSubmitStatement(this, this.GetType(), "salvarEditorMCE", "tinyMCE.triggerSave();");
回答12:
TinyMCE (as well as other WYSIWYG editors, FCKEditor etc) suffers from postback validation issues. By default any ASP.Net page on postback has its contents checked, and any unencoded HTML throws the postback validation error.
Now many people, including on those forums suggest disabling the postback validation, validaterequest="false" , but this makes you susceptible to scripting attacks, the best thing to do is bind a function to the async postback event that fires off just before async postback. This JavaScript function needs to HTML encode the TinyMCE data being posted back to the server, this will then pass the postback validation and you'll be OK.
I believe TinyMCE and other editors correctly do this on postbacks but not async postbacks hence the issue, in fact if you look at TinyMCE's source you can probably find their function that does this and simply add the event binding.
Hope this helps
来源：https://stackoverflow.com/questions/547327/how-to-make-tinymce-work-inside-an-updatepanel