RichTextBox in a Single Textbox Among Multiple TinyMCE - CodeProject
Some time ago, I wrote a post about integration of TinyMCE editor in ASP.NET website. The same was also published in CodeProject and most visited article of mine. While answering comments there, I got a request from one of the readers.
His question was, “I have used TinyMCE Rich TextBox in my application but in my web form I have multiple multiline TextBox. What I want that Rich TextBox should be bind to only one text box not all TextBoxes.”
So the solution is here. Let's create a scene as below:
Here, we have to convert
TextArea for about to Rich Text Editor (WYSIWYG). Let's view the source code of the above design. I have tried to use simple HTML5 tags so that other users can also take advantage of this tutorial.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html> <html> <head runat="server"> <title>Rich Text Editor in Single TextArea among many</title> </head> <body> <form id="form1" runat="server"> <h1>Rich Text Editor in Single TextArea among many</h1> <fieldset> <legend>Profile Update</legend> <p> <label>Name</label> <input type="text" id="txtName" runat="server" /> </p> <p> <label>Gender</label> <input type="radio" name="Gender" id="radioMale" runat="server" value="Male" /> <input type="radio" name="Gender" id="radioFemale" runat="server" value="Female" /> </p> <p> <label>Email ID</label> <input type="text" id="txtEmail" runat="server" /> </p> <p> <label>About</label> <textarea rows="5" cols="50" id="txtAbout" class="Editor" runat="server"></textarea> </p> <p> <label>Remarks</label> <textarea rows="2" cols="50" id="txtremarks" runat="server"></textarea> </p> <p> <asp:Button ID="btnSubmit" Text="Submit" runat="server" /> <input type="reset" value="Clear Form" runat="server" /> </p> </fieldset> </form> </body> </html>
Here, we are using TinyMCE version 4.0.xx. This version is a major upgrade and has a completely different look and internal architecture compared to version 3.xx. So here is some difference in its integration. If you are not familiar with this process, please read our previous post, that will describe to you about Copying required files in project directory and inserting script in more details. Insert the below code before closing of
head tag in your HTML page.
Notable and new code in above integration script is
selector tag. This is a new included tag in TinyMCE version 4.0.xx. This gives us the below options.
Do not forget to change the path to
Script as per your folder structure.
selector : “textarea”
: This option will convert all TextAreas in visual editor.
selector : “textarea.Editor”
: This option will select all TextAreas with CSS Class Editor applied.
selector : h1.Editor
div.Editor: This option will change this to Inline editor for H1 or
DIVwith CSS class name of Editor.
As you see in the code of the scene designed above, you can see that we have applied class Editor which we did not create in any CSS file to one of the
TextAreas. Here we used this method.
If you are working with TinyMCE version 3.xx, here is the code to be inserted in
Head section of HTML page.
Now, the output of the above work is below:
If you find this tip helpful, drop a comment or share with your friend.