Get TinyMCE Value from Server-Side in ASP.NET 4.0

AspDotNetDev

4.33/5 (3 votes)

Mar 2, 2011

CPOL

1 min read

45786

Using TinyMCE is fairly simple, but attempting to access the value entered by the user in ASP.NET 4.0 presents with some problems.

First, download TinyMCE and unzip it. Add the "tiny_mce" folder to a new ASP.NET 4.0 website project. Add a new ASPX page to your project, and add the following code to that page (VB.NET version shown first):

<%@ Page Language="vb" ValidateRequest="false" %>

<script runat="server">
    Protected Sub GetValue_Click(ByVal sender As Object, ByVal e As EventArgs)
        lblDisplay.Text = txtMain.Text
    End Sub
</script>

<html>
<head>
    <title>TinyMCE in ASP.net 4.0</title>
    <script type="text/javascript" src="/tiny_mce/tiny_mce.js"></script>
    <script type="text/javascript">
        tinyMCE.init({
            mode : "textareas"
        });
    </script>
</head>
<body>
    <form id="frmMain" runat="server">
    <div>
        <asp:TextBox runat="server" ID="txtMain" TextMode="MultiLine" Rows="20" Columns="100">
            This is your initial text.
        </asp:TextBox>
        <br />
        <asp:Button runat="server" Text="Get Value" onclick="GetValue_Click" />
        <br />
        <asp:Label runat="server" ID="lblDisplay" />
    </div>
    </form>
</body>
</html>

Here's the C# version:

<%@ Page Language="C#" ValidateRequest="false" %>

<script runat="server">
    protected void GetValue_Click(object sender, EventArgs e)
    {
        lblDisplay.Text = txtMain.Text;
    }
</script>

<html>
<head>
    <title>TinyMCE in ASP.net 4.0</title>
    <script type="text/javascript" src="/tiny_mce/tiny_mce.js"></script>
    <script type="text/javascript">
        tinyMCE.init({
            mode : "textareas"
        });
    </script>
</head>
<body>
    <form id="frmMain" runat="server">
    <div>
        <asp:TextBox runat="server" ID="txtMain" TextMode="MultiLine" Rows="20" Columns="100">
            This is your initial text.
        </asp:TextBox>
        <br />
        <asp:Button runat="server" Text="Get Value" onclick="GetValue_Click" />
        <br />
        <asp:Label runat="server" ID="lblDisplay" />
    </div>
    </form>
</body>
</html>

If you are using ASP.NET 2.0, you are done. However, in ASP.NET 4.0, you have to modify the web.config by adding requestValidationMode="2.0":

<system.web>
    <httpRuntime requestValidationMode="2.0" />
</system.web>

If you run into the following error when you click the button on the webpage:

ASP.NET error message:
A potentially dangerous Request.Form value was detected from the client (txtMain="<p>This is your init...").

Make sure you have requestValidationMode="2.0" in the web.config and make sure you have ValidateRequest="false" at the top of your page. Caution: Practically speaking, it is necessary to turn off request validation in order to submit data using the TinyMCE editor, but doing so comes with some caveats. Disabling request validation may make your site more vulnerable to script attacks, depending on how you handle the user input on pages with no request validation. Explaining those risks and the precautions to prevent malicious code is outside the scope of this tip/trick, but you can start to learn more about the issue here.