Post
Ask Question

RichTextBox in a Single TextBox Among Multiple TinyMCE

Some time ago, I have wrote an article about integration of TinyMCE editor in ASP.NET website. It was also published in CodeProject and was the most visited article of mine. When answering comments there, I got a request from one of the readers.

His question is, "I have used a TinyMCE Rich TextBox in my application but in my web form I have mulitple mulitiline TextBoxes. What I want is a Rich TextBox bound to only one text box but not all TextBoxes."

Situation

So the solution is here. Let's create a scene as below.

RichTextBox bind to only one text box
Here we need to convert the TextArea for "About" to a Rich Text Editor (WYSIWYG). Let's the view source code for the preceding design. I tried to use simple HTML5 tags. So that other users can also get the advantage of this tutorial.
  1. <%@ page language="C#" autoeventwireup="true" codefile="Default.aspx.cs" inherits="_Default" %>  
  2. <!DOCTYPE html>  
  3. <html>  
  4. <head runat="server">  
  5.     <title>Rich Text Editor in Single TextArea among many</title>  
  6. </head>  
  7. <body>  
  8.     <form id="form1" runat="server">  
  9.     <h1>  
  10.         Rich Text Editor in Single TextArea among many</h1>  
  11.     <fieldset>  
  12.         <legend>Profile Update</legend>  
  13.         <p>  
  14.             <label>  
  15.                 Name</label>  
  16.             <input type="text" id="txtName" runat="server" />  
  17.         </p>  
  18.         <p>  
  19.             <label>  
  20.                 Gender</label>  
  21.             <input type="radio" name="Gender" id="radioMale" runat="server" value="Male" />  
  22.             <input type="radio" name="Gender" id="radioFemale" runat="server" value="Female" />  
  23.         </p>  
  24.         <p>  
  25.             <label>  
  26.                 Email ID</label>  
  27.             <input type="text" id="txtEmail" runat="server" />  
  28.         </p>  
  29.         <p>  
  30.             <label>  
  31.                 About</label>  
  32.             <textarea rows="5" cols="50" id="txtAbout" class="Editor" runat="server"></textarea>  
  33.         </p>  
  34.         <p>  
  35.             <label>  
  36.                 Remarks</label>  
  37.             <textarea rows="2" cols="50" id="txtremarks" runat="server"></textarea>  
  38.         </p>  
  39.         <p>  
  40.             <asp:button id="btnSubmit" text="Submit" runat="server" />  
  41.             <input type="reset" value="Clear Form" runat="server" />  
  42.         </p>  
  43.     </fieldset>  
  44.     </form>  
  45. </body>  
  46. </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 article that describes copying the required files in the project directory and inserting a script in more details. Insert the following code before closing the head tag in your HTML page.

  1. <script src="script/tinymce/tinymce.min.js" type="text/javascript"></script>  
  2.     <script type="text/javascript">  
  3.         tinymce.init({  
  4.             selector: ".Editor",  
  5.             theme: "modern",  
  6.             plugins: ["lists link image charmap print preview hr anchor pagebreak"],                         
  7.         });  
  8. </script> 

Notable

Notable and new in the code integration script above is the selector tag. This is new tag included in TinyMCE version 4.0.xx. This gives us the following options.

Do not forget to change the path to Script as per your folder structure. 

  • selector : "textarea"

    This option will convert all TextAreas to be a visual editor. 
     
  • selector : "textarea.Editor"

    This option will select all TextAreas with CSS Class Editor applied.
     
  • selector : h1.Editor

    or div.Editor : This option will change this to an inline editor for H1 or DIV with CSS class name of Editor.

As you see in the code of the scene designed above. You can see that we applied the class Editor that we did not create in any CSS file to one of the TextAreas. Here we used this method.

Older Version

If you are working with TinyMCE version 3.xx, here is the code to be inserted into the Head section of the HTML page. 

  1. <script type="text/javascript" src="script/tiny_mce/tiny_mce.js"></script>  
  2. <script type="text/javascript" language="javascript">  
  3.         tinyMCE.init({  
  4.             // General options               
  5.             // mode: "textareas",   
  6.             // Set mode to Exact.                
  7.             mode: "exact",  
  8.             // Write the name of ID of TextArea where you want editor to appear in element property.  
  9.             elements : "txtRemarks",  
  10.             theme: "advanced",  
  11.             plugins: "pagebreak,style,layer,table,save,  
  12.             advhr,advimage,advlink,emotions,iespell,inlinepopups",  
  13.         });  
  14. </script> 

Output

Now, the output of the preceding work is below.

Output

Its perfect.

If you find this article helpful, drop a comment or share with your friends.


Similar Articles