187/2007
UpdatePanel - TinyMCE Demo with project zip-file
TinyMCE is a nice HTML-Editor which has become very popular. It's easy to use and has a lot of configuration possibillities. But when it come to combining it to Ajax and partial updates - it can be a nightmare...
I have now done a proper test and will provide the source code for anybody who is interested, free of use in any way. I've tested this code successfully in IE7, FF2 and Opera.
But now let the source speak for it self, don't miss out on the complete project download at the bottom.
Default.aspx
<%@ Page Language="C#" ValidateRequest="false" Trace="false" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>MS Ajax UpdatePanel - TinyMCE</title>
<script type="text/javascript">
function SaveMyPreciousValues()
{
tinyMCE.triggerSave(false,true);
TextBox1 = document.getElementById('TextBox1');
alert('Check value when posting: '+ TextBox1.value)
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="sm" EnablePartialRendering="true" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<p>
<asp:Label ID="Label1" runat="server" Text="Welcome to the MS Ajax UpdatePanel - TinyMCE Demo, Enjoy!"></asp:Label>
</p>
<asp:TextBox ID="TextBox1" Rows="10" Columns="50" TextMode="MultiLine" EnableViewState="false" Text="Write something here..." runat="server"></asp:TextBox>
<p>
<asp:Button ID="Button1" runat="server" OnClick="Button1_OnClick" OnClientClick="SaveMyPreciousValues();" Text="Hit me" />
</p>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>MS Ajax UpdatePanel - TinyMCE</title>
<script type="text/javascript">
function SaveMyPreciousValues()
{
tinyMCE.triggerSave(false,true);
TextBox1 = document.getElementById('TextBox1');
alert('Check value when posting: '+ TextBox1.value)
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="sm" EnablePartialRendering="true" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<p>
<asp:Label ID="Label1" runat="server" Text="Welcome to the MS Ajax UpdatePanel - TinyMCE Demo, Enjoy!"></asp:Label>
</p>
<asp:TextBox ID="TextBox1" Rows="10" Columns="50" TextMode="MultiLine" EnableViewState="false" Text="Write something here..." runat="server"></asp:TextBox>
<p>
<asp:Button ID="Button1" runat="server" OnClick="Button1_OnClick" OnClientClick="SaveMyPreciousValues();" Text="Hit me" />
</p>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
Default.cs.aspx
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if(!Page.IsPostBack)
LoadTinyMCE();
}
private void LoadTinyMCE()
{
//Load tinyMCE
HtmlGenericControl Include = new HtmlGenericControl("script");
Include.Attributes.Add("type", "text/javascript");
Include.Attributes.Add("src", "js/tiny_mce/tiny_mce.js");
this.Page.Header.Controls.Add(Include);
//Config MCE
HtmlGenericControl Include2 = new HtmlGenericControl("script");
Include2.Attributes.Add("type", "text/javascript");
Include2.InnerHtml = "tinyMCE.init({mode : 'textareas' ,language : 'sv',entity_encoding : 'raw'});";
this.Page.Header.Controls.Add(Include2);
}
protected void Button1_OnClick(object sender, EventArgs e)
{
//Get the contect of the TextBox
string inputText = Request.Form["TextBox1"];
//Print all Form-values when testing
/*for (int i = 0; i<Request.Form.Count;i++ )
{
string itemName = Request.Form.AllKeys[i];
string itemValue = Request.Form.GetValues(i)[0];
Label1.Text = Label1.Text + "<br />" + itemName + ":" + itemValue;
}*/
Label1.Text = "Content posted from TextBox1: " + inputText;
//Register some javascript to redraw the editor.
//Very important to reset the id-counter to "0", or else strange things will happen..
ScriptManager.RegisterClientScriptBlock(UpdatePanel1, this.GetType(), "init", "tinyMCE.idCounter=0;tinyMCE.execCommand('mceAddControl', false, 'TextBox1');", true);
}
}
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if(!Page.IsPostBack)
LoadTinyMCE();
}
private void LoadTinyMCE()
{
//Load tinyMCE
HtmlGenericControl Include = new HtmlGenericControl("script");
Include.Attributes.Add("type", "text/javascript");
Include.Attributes.Add("src", "js/tiny_mce/tiny_mce.js");
this.Page.Header.Controls.Add(Include);
//Config MCE
HtmlGenericControl Include2 = new HtmlGenericControl("script");
Include2.Attributes.Add("type", "text/javascript");
Include2.InnerHtml = "tinyMCE.init({mode : 'textareas' ,language : 'sv',entity_encoding : 'raw'});";
this.Page.Header.Controls.Add(Include2);
}
protected void Button1_OnClick(object sender, EventArgs e)
{
//Get the contect of the TextBox
string inputText = Request.Form["TextBox1"];
//Print all Form-values when testing
/*for (int i = 0; i<Request.Form.Count;i++ )
{
string itemName = Request.Form.AllKeys[i];
string itemValue = Request.Form.GetValues(i)[0];
Label1.Text = Label1.Text + "<br />" + itemName + ":" + itemValue;
}*/
Label1.Text = "Content posted from TextBox1: " + inputText;
//Register some javascript to redraw the editor.
//Very important to reset the id-counter to "0", or else strange things will happen..
ScriptManager.RegisterClientScriptBlock(UpdatePanel1, this.GetType(), "init", "tinyMCE.idCounter=0;tinyMCE.execCommand('mceAddControl', false, 'TextBox1');", true);
}
}
Update: Joakim has rewritten the example to VB.NET, read more on his blog.
By Jesper Lind
Comments
duncan wrote:
14:e September 2007
Here's what I did, maybe it can help someone somewhere somehow sometime:
In the MasterPage itself I added the usual:
<script language="javascript" type="text/javascript" src="/tiny_mce/tiny_mce.js"></script> <script language="javascript" type="text/javascript"> tinyMCE.init({ mode : "textareas", theme : "simple", auto_reset_designmode : true }); </script>
Now to convert the textareas on partial postback:
<script language="javascript" type="text/javascript"> function TinyInit() { // Seems to be helluva important tinyMCE.idCounter = 0;
// Get the webform (there can be only one in asp.net) var form = document.forms[0]; // Iterate all elements inside the webform for(var i = 0; i < form.elements.length; i++) { //If textarea, convert to TinyMCE if (form.elements[i].type == "textarea") tinyMCE.execCommand('mceAddControl', false, form.elements[i].id); } } </script>
And to save the values before submitting:
<script language="javascript" type="text/javascript"> function TinySave() { tinyMCE.triggerSave(false,true); } </script>
In the Page_Load event of the MasterPage I add a javascript call to the TinyInit() function to on updatepanel init event:
ScriptManager.RegisterClientScriptBlock(UpdatePanel1, this.GetType(), "init", "TinyInit();", true);
Then all that is left to do is add:
OnClientClick="TinySave()"
to any button that might need the values of the textarea after postback (like a 'Save' button), or otherwise you wont see any of the changes you made inside the TinyMCE panel.
The TinyInit() function just loops through all items on page and converts Textarea's into TinyMCE's. It's really mean and dirty, but I don't want to add each textarea clientid to the code manually, because the id's get real nasty when inside masterpages/panels/etc. If anyone has a better solution, please do tell.
Regards,
duncan
Rajesh wrote:
11:e Januari 2008
clientid of the textarea can be used on master pages if it is declared runat=server
e.g.
tinyMce.updateContent('<%=txtpost.clientid %>');
Regards
Rajesh
CJ de Vos wrote:
10:e Februari 2008
http://weblog.e-agora.nl/cdevos/?p=4
Jesper wrote:
10:e Februari 2008
comment wrote:
11:e Mars 2008
' wrote:
12:e Maj 2008
vibhu wrote:
17:e Maj 2008
Please give me a proper solution.
Jesper wrote:
27:e Maj 2008
I recommend to download the latest build from the TineMCE pages. There are now updated code with special components to use with Asp.Net.
Mike JACKSON wrote:
24:e Mars 2009
klskvx wrote:
5:e Februari 2010