Using tinymce RichTextbox to insert texts and images into database and display same on a web page

Question

I am trying to insert written articles with descriptive images into database, so that when user open to reads, the user will be able to see images that support the article.

Ultimately, I am trying to have almost the same thing as seen on this community's question details' TextBox which has features to insert images and display them, and also bold, italics, bullets features etc.....

Here is an example of what I mean. This next below image was taken from one of my questions. You can see that in the image below, the texts are displayed, and the image is below. Also, another texts can continue to show after the image.

I have two things to resolve, and the first is:

• I used tinymce RichTextBox in my TextBox control to insert data into database, it inserts quite okay but the when I display the inserted data on a page, it appears faint; the label color is not dark. I tried to add CSS styling to the label used to display the data but it did not work.

Here is how the texts display on the page. The label is not dark

In my database, and in the column that has the body of the text is

as: <p style="text-align: justify;"><br>In summary, being able to view login activities helps you detect suspicious behaviour, promotes transparency within your team, and provides peace of mind regarding the security of your account. It ensures that everyone is accountable, facilitates smooth collaboration, and allows you to focus on your business with confidence.</p>

• Secondly, Is it possible to use tinymce RichTextbox to insert both texts and images into the same column in a database table?

I asked this because I know that the DataType for texts is either "varchar or nvarchar(50, MAX)", and that image is "varbinary(MAX)". But is there a way to have these two different datatypes inserted into one column? my HTML

<asp:TextBox ID="txtTitle" runat="server" CssClass="form-control" />
<br>
<br>
<asp:TextBox ID="txtHTMLContent" runat="server" TextMode="MultiLine"/>
<script src="https://cdn.tiny.cloud/1/4m42h3gnbjg6lt9vj7w56g7pkunm8l48s1p2p79i0gjga5i4/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
 <script>
        tinymce.init({
            selector: '#txtHTMLContent',
            plugins: 'advlist link image lists'
        });
    </script>
<br>
 <asp:Button ID="SubmitBtn" Text="Post Article" CssClass="btn btn-primary" runat="server" OnClick="SubmitBtn_Click" />

C#

protected void SubmitBtn_Click(object sender, EventArgs e)
        {
            try
            {
                using (SqlConnection con = new SqlConnection())
                {
                    con.ConnectionString = ConfigurationManager.ConnectionStrings["ConString"].ConnectionString;
                    string query = "INSERT INTO MyArticles (Title, Body, DatePosted) VALUES (@Title, @Body, @DatePosted)";
                    using (SqlCommand cmd = new SqlCommand(query, con))
                    {
                        cmd.Parameters.AddWithValue("@Title", txtTitle.Text);
                        cmd.Parameters.AddWithValue("@Body", txtHTMLContent.Text);
                        cmd.Parameters.AddWithValue("@CreatedDate", DateTime.UtcNow);
                        con.Open();
                        cmd.ExecuteNonQuery();
                        con.Close();
                        txtHTMLContent.Text = "";
                    }
                }
            }
            catch (SqlException ex)
            {
                string msg = "Error:";
                msg += ex.Message;
                throw new Exception(msg);
            }
        }

Answer 1

Hi @Donald Symmons, There is something wrong with your code, are you sure it works? You are inserting into database using @DatePosted but in cmd.Parameters.AddWithValue you are using @CreatedDate.

• I used tinymce RichTextBox in my TextBox control to insert data into database, it inserts quite okay but the when I display the inserted data on a page, it appears faint; the label color is not dark. I tried to add CSS styling to the label used to display the data but it did not work.Here is how the texts display on the page. The label is not dark

Unfortunately, I don't reproduce your problem. I tested it myself and it works fine. Maybe you can refer to the example below.

• Secondly, Is it possible to use tinymce RichTextbox to insert both texts and images into the same column in a database table?I asked this because I know that the DataType for texts is either "varchar or nvarchar(50, MAX)", and that image is "varbinary(MAX)". But is there a way to have these two different datatypes inserted into one column? my HTML

I use tinymce RichTextbox for testing. You just set the body field to NVARCHAR(MAX). From the database, images saved as <img> tags are not binary data.

Demo

  <asp:TextBox ID="txtTitle" runat="server" CssClass="form-control" />
  <br/>
  <br/>
  <asp:TextBox ID="txtHTMLContent" runat="server" TextMode="MultiLine" />
  <script src="https://cdn.tiny.cloud/1/4m42h3gnbjg6lt9vj7w56g7pkunm8l48s1p2p79i0gjga5i4/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
  <script>
  tinymce.init({
      selector: '#txtHTMLContent',
      plugins: 'advlist link image lists'
  });
  </script>
  <br/>
  <asp:Button ID="SubmitBtn" Text="Post Article" CssClass="btn btn-primary" runat="server" OnClick="SubmitBtn_Click" />
    <asp:Button ID="Show" Text="Show data" CssClass="btn btn-primary" runat="server" OnClick="Show_Click" />
  <asp:Label ID="Label1" runat="server"></asp:Label>

protected void SubmitBtn_Click(object sender, EventArgs e)
{
    try
    {
        using (SqlConnection con = new SqlConnection())
        {
            con.ConnectionString = ConfigurationManager.ConnectionStrings["ConString"].ConnectionString;
            string query = "INSERT INTO MyArticles (Title, Body, DatePosted) VALUES (@Title, @Body, @DatePosted)";
            using (SqlCommand cmd = new SqlCommand(query, con))
            {
                cmd.Parameters.AddWithValue("@Title", txtTitle.Text);
                cmd.Parameters.AddWithValue("@Body", txtHTMLContent.Text);
                cmd.Parameters.AddWithValue("@DatePosted", DateTime.UtcNow);
                con.Open();
                cmd.ExecuteNonQuery();
                con.Close();
                //txtHTMLContent.Text = "";
            }
        }
    }
    catch (SqlException ex)
    {
        string msg = "Error:";
        msg += ex.Message;
        throw new Exception(msg);
    }
}
protected void Show_Click(object sender, EventArgs e)
{
    SqlConnection con = new SqlConnection();
    con.ConnectionString = ConfigurationManager.ConnectionStrings["ConString"].ConnectionString;
    string selectSql = "select * from MyArticles";
    SqlCommand cmd = new SqlCommand(selectSql, con);

    try
    {
        con.Open();

        using (SqlDataReader read = cmd.ExecuteReader())
        {
            while (read.Read())
            {
                Label1.Text = (read["Body"].ToString());

            }
        }
    }
    finally
    {
        con.Close();
    }
}

Best regards,
Lan Huang

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.