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

AspDotNetDev

Rate me:

4.33/5 (3 votes)

3 Mar 2011CPOL1 min read

43.9K

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):

ASP.NET

<%@ 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:

ASP.NET

<%@ 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":

XML

<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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By

AspDotNetDev

Web Developer

United States

Managing Your JavaScript Library in ASP.NET (if you work with ASP.net and you don't read that, you are dead to me).
Graduated summa cum laude with a BS in Computer Science.
Wrote some articles and some tips.
DDR ("New high score? What does that mean? Did I break it?"), ping pong, and volleyball enthusiast.
Software I have donated to (you should too):
- KeePass
- Wikipedia

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

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

License

Comments and Discussions