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>

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);
}
}

zip-icon UpdatePanelTinyMCE.zip (C#)

Update: Joakim has rewritten the example to VB.NET, read more on his blog.

By Jesper Lind

CSS Redundancy Checker

When A web site been running for some time the CSS-files can grow very large and it is difficult to identify which classes that are really in use.

Infovore has been trying to tackle this problem with the new tool CSS Redundancy Checker that can be downloaded at Google Code.  You have to download and run it locally, and it will identify CSS-classes that are not in use in the code. It only works with HTML- files and not dynamicly genereated web sites.

Would be great to have this running online. Is there anybody who knows of any other service like that? 

By Jesper Lind

How to make a link destinct?

There are several ways of making links visible in a block of text. Here are some examples.

This is a link right here but you couldn't see it right? Perhaps we should make them appear with dots beneath them like this or in another color. The yellow shade is a bit too pale, you can hardly see it can you? Or should all links be in bold, inverted or perhaps underlined? Which is your favorite link design?

CSS for the links above

<style type="text/css">
a.noStyle, a.noStyle:link, a.noStyle:active, a.noStyle:visited { color: #000; text-decoration:none; }
a.noStyle:hover { }

a.dotted, a.dotted:link, a.dotted:active, a.dotted:visited { color: #000; text-decoration:none; border-bottom:1px dotted #333; }
a.dotted:hover { border-bottom:1px solid #000; }

a.invert, a.invert:link, a.invert:active, a.invert:visited { color: #fff;background-color: #000; text-decoration:none; border-bottom:1px dotted #333; }
a.invert:hover { border-bottom:1px solid #000; }

a.yellow, a.yellow:link, a.yellow:active, a.yellow:visited { color: #E2D459; text-decoration:none; }
a.yellow:hover { text-decoration:underline;}

a.underlined,a.underlined:link,a.underlined:
active,a.underlined:visited{text-decoration:underline;}
a.underlined:hover { text-decoration:underline;}</style>

By Jesper Lind
1