Showing posts with label TinyMCE Editor. Show all posts
Showing posts with label TinyMCE Editor. Show all posts

Monday, July 30, 2012

Asp.Net Free Rich Text Editor using Tiny MCE Editor - Loading Content


TinyMCE is a Javascript Based, WYSIWYG Editor, here we shall see on how to load content into the Editor from a database.


To see on how to integrate the editor with an Asp.net textbox refer to the post 
Asp.Net Free Rich Text Editor using Tiny MCE Editor - Simple Interface.

To see on how to insert data from the editor to the database refer to the post 
Asp.Net Free Rich Text Editor using Tiny MCE Editor - Insert Text Into Database.

Content can be loaded into the Editor as HTML tags, we will load the content from the database, which we stored in the post 
Asp.Net Free Rich Text Editor using Tiny MCE Editor - Insert Text Into Database.
We can use a normal SELECT query to fetch and load the HML tags into the Editor.

string strSql = "SELECT TOP 1 * FROM Projects ORDER BY ProjectID DESC";
//
string strConn = ConfigurationManager.ConnectionStrings["ConnectionString"].ToString();
objConn = new SqlConnection(strConn);
objCmd = new SqlCommand(strSql, objConn);
objDA = new SqlDataAdapter(objCmd);
dsProjects = new DataSet();
objDA.Fill(dsProjects, "dtProjects");
//
txtDescription.Text = dsProjects.Tables["dtProjects"].Rows[0]["ProjectDescription"].ToString();





Posted by at 0 comments
Labels: , , ,

Asp.Net Free Rich Text Editor using Tiny MCE Editor - Insert Text Into Database

TinyMCE is a Javascript Based, WYSIWYG Editor, here we shall see on how to get the text entered in the Editor and insert it into the Database. 


To see on how to integrate the editor with an Asp.net textbox refer to the post Asp.Net Free Rich Text Editor using Tiny MCE Editor - Simple Interface. 

The editor gives the text in the textbox as HTML tags with all the formatting, we just need to fetch the text using the .text property and save the HTML Tags




txtDescription.Text

Let us consider the following Table structure; we shall store the content of the Rich Text Editor into this table.

The INSERT query is a simple query, and needs no alterations to handle the content of the Rich Text Editor
string strSql = "INSERT INTO Projects (ProjectName,ProjectDescription) VALUES (";
            strSql += "'" + txtName.Text + "',";
            strSql += "'" + txtDescription.Text + "')";
            //
            string strConn = ConfigurationManager.ConnectionStrings["ConnectionString"].ToString();
            objConn = new SqlConnection(strConn);
            objCmd = new SqlCommand(strSql,objConn);
            objConn.Open();
            objCmd.ExecuteNonQuery();
            objConn.Close();

One inserted the data in the table looks as follows.






Posted by at 0 comments
Labels: , , ,

Apply TinyMCE Editor to specific textarea

The TinyMCE WYSIWYG Editor, by default applies the Rich Text Theme to all the TextAreas in a page, however we would need the theme only to specific textareas in the page, in such cased the theme can be restricted to specific text areas by tagging them to a specific class name.

editor_selector: "mceEditor"




TinyMCE is a Javascript Based, WYSIWYG Editor, it provides many simple advanced and custom modes to apply rich text editor effect. To know more about the TinyMCE WYSIWYG Editor, refer to the post Asp.Net Free Rich Text Editor using Tiny MCE Editor - Simple Interface.
Now add initializing code to integrate the TextBox with the Editor as follows.

    <script type="text/javascript">
        tinyMCE.init({
            mode: "textareas",
            theme: "simple",             editor_selector: "mceEditor"
        });
    </script>

Build and run the application, notice that the TinyMCE Editor is integrated only with the TextBox which has the class specified as 

Here is the Full Example.

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Rich Text Editor (TinyMCE)</title>
    <script type="text/javascript"
         src= "JavaScript/tiny_mce/tiny_mce.js"></script>
    <script type="text/javascript">
        tinyMCE.init({
            mode: "textareas",
            theme: "simple",
            editor_selector :"mceEditor"       
});
    </script>
</head>
<body>
<form id="frmRichTextEditor" runat="server">
<table>
        <tr valign="top">
            <td style="font-family:Verdana; font-size:12px">
                Enter Project Description
            </td>
            <td>
                <asp:TextBox
                    ID="txtDescription"
                    runat="server"
                    TextMode="MultiLine"
                    Height="150px"
                    Width="400px"
                    class="mceEditor"></asp:TextBox>
            </td>
        </tr>  
        <tr valign="top">
            <td style="font-family:Verdana; font-size:12px">
                Enter User Description
            </td>
            <td>
                <asp:TextBox
                    ID="txtUserDescription"
                    runat="server"
                    TextMode="MultiLine"
                    Height="150px"
                    Width="400px"></asp:TextBox>
            </td>
        </tr> 
</table>
</form>
</body>
</html> 





Posted by at 0 comments
Labels: , , ,

Asp.Net Free Rich Text Editor using Tiny MCE Editor - Custom Interface More Features


We can convert an Asp.Net Area (TextBox with TextMode="MultiLine") into a Rich Text Editor with advanced features by integrating it with the TinyMCE editor.

TinyMCE is a Javascript Based, WYSIWYG Editor, it provides many simple advanced and custom modes to apply rich text editor effect, here we shall see on how to add more Features to the Custom Interface of the Editor by adding custom settings.

To integrate the TinyMCE editor download the latest editor files from their site, it’s free!!!
http://www.tinymce.com/download/download.php

Once downloaded, extract the files and place them in a subfolder under your main Asp.Net project path.

 Open the Asp.Net page and add a reference to the Editor file as follows.

<script type="text/javascript" src= "JavaScript/tiny_mce/tiny_mce.js"></script>

Now add initializing code to integrate the TextBox with the Editor as follows.

    <script type="text/javascript">
        tinyMCE.init({
            mode: "textareas",
            theme: "advanced",
            <!— Add additional Custamizations here -->
        });
    </script>

Build and run the application, you can see that your TextBox is displayed as a Rich Text editor after integrating it with the TinyMCE Editor.


Here is the Full Example.

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Rich Text Editor (TinyMCE)</title>
    <script type="text/javascript"
         src= "JavaScript/tiny_mce/tiny_mce.js"></script>
    <script type="text/javascript">
        tinyMCE.init({
            mode: "textareas",
              theme: "advanced",           
            plugins: "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount,advlist,autosave",
            setup: function(ed) {
                ed.onKeyPress.add(
                function(ed, evt) {
                }
                );
            },
            theme_advanced_buttons1: "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
            theme_advanced_buttons2: "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
            theme_advanced_buttons3: "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",            
            theme_advanced_buttons4: "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak,restoredraft",
            theme_advanced_toolbar_location: "top",
            theme_advanced_toolbar_align: "left",
            theme_advanced_statusbar_location: "bottom",
            theme_advanced_resizing: true,
            content_css: "css/content.css",
            template_external_list_url: "lists/template_list.js",
            external_link_list_url: "lists/link_list.js",
            external_image_list_url: "lists/image_list.js",
            media_external_list_url: "lists/media_list.js",
            style_formats: [
            { title: 'Bold text', inline: 'b' },
            { title: 'Red text', inline: 'span', styles: {color:'#ff0000'} },
            { title: 'Red header', block: 'h1', styles: {color:'#ff0000'} },
            { title: 'Example 1', inline: 'span', classes: 'example1' },
            { title: 'Example 2', inline: 'span', classes: 'example2' },
            { title: 'Table styles' },
            { title: 'Table row 1', selector: 'tr', classes: 'tablerow1' }
            ]
        });
    </script>
</head>
<body>
<form id="frmRichTextEditor" runat="server">
<table>
        <tr valign="top">
            <td style="font-family:Verdana; font-size:12px">
                Enter Project Description
            </td>
            <td>
                <asp:TextBox
                    ID="txtDescription"
                    runat="server"
                    TextMode="MultiLine"
                    Height="150px"
                    Width="400px"></asp:TextBox>
            </td>
        </tr>  
</table>
</form>
</body>
</html> 




Posted by at 1 comments
Labels: , , ,
Subscribe to: Posts (Atom)