How do I save text entered in a TinyEditor box to my database

1.3k views Asked by At

I am new to asp.net. Currently working on a form that uses tinyeditor to allow a user to input data. My question is, how can I get that HTML encoded text and save it to the database (Its MSSQL) upon pressing a button?

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AboutMeEdit.aspx.cs" Inherits="InteractiveCV.AdminForms.AboutMeEdit" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <style type="text/css">
        .auto-style1 {
            width: 100%;
        }
        .auto-style2 {
            height: 23px;
        }
    </style>
    <script src="../Scripts/tinyEditor/tiny.editor.packed.js"></script>
    <link href="../Styles/tinyeditor.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
    <div>

        <table class="auto-style1">
            <tr>
                <td class="auto-style2">Edit Your About Me in the below Text Box</td>
            </tr>
            <tr>
                <td>
        <asp:TextBox ID="tinyeditor" TextMode="MultiLine" Width="400" Height="200"  runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>
                    <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
                </td>
            </tr>
            <tr>
                <td>
                    <asp:RequiredFieldValidator ID="aboutmevalidate" runat="server" ControlToValidate="tinyeditor" ErrorMessage="About Me Left Empty">About Me Left Empty</asp:RequiredFieldValidator>
                </td>
            </tr>
        </table>

    </div>
    </form>
</body>
</html>

<script type="text/javascript">
    var editor = new TINY.editor.edit('editor', {
        id: 'tinyeditor',
        width: 584,
        height: 175,`enter code here`
        cssclass: 'tinyeditor',
        controlclass: 'tinyeditor-control',
        rowclass: 'tinyeditor-header',
        dividerclass: 'tinyeditor-divider',
        controls: ['bold', 'italic', 'underline', 'strikethrough', '|', 'subscript', 'superscript', '|',
            'orderedlist', 'unorderedlist', '|', 'outdent', 'indent', '|', 'leftalign',
            'centeralign', 'rightalign', 'blockjustify', '|', 'unformat', '|', 'undo',        'redo', 'n',
            'font', 'size', 'style', '|', 'image', 'hr', 'link', 'unlink', '|', 'print'],
        footer: true,
        fonts: ['Verdana', 'Arial', 'Georgia', 'Trebuchet MS'],
        xhtml: true,
        cssfile: 'custom.css',
        bodyid: 'editor',
        footerclass: 'tinyeditor-footer',
        toggle: { text: 'source', activetext: 'code', cssclass: 'toggle' },
        resize: { cssclass: 'resize' }
    });
    </script>

I have the following Codebehind:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Configuration;
using System.Data;

namespace InteractiveCV.AdminForms
{
    public partial class AboutMeEdit : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void Button1_Click(object sender, EventArgs e)
        {
            SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["RIADDConnectionString"].ConnectionString);
            SqlCommand cmd = new SqlCommand("INSERT INTO about_me (about_me) VALUES (@about_me)", conn);
            cmd.CommandType = CommandType.Text;
            cmd.Parameters.AddWithValue("@about_me",tinyeditor.Text);
            conn.Open();
            cmd.ExecuteNonQuery();
            conn.Close();
        }

        protected void tinyeditor_TextChanged(object sender, EventArgs e)
        {

        }
    }
}
1

There are 1 answers

0
Maysam On BEST ANSWER

Try this for TinyEditor:

<textarea  ID="tinyeditor" runat="server"></textarea >

And for your code behind, to get the text use tinyeditor.value()