Friday, 13 December 2013

How to use tinyMCE editor in ASP.NET Website

Hi Friends, in this article I will explain about How to use tinyMCE editor in ASP.NET Website.
Using tinyMCE ,we have to download tinyMCE files from and then add to your website after that write the follwing code.
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<html xmlns="">
<head id="Head1" runat="server">
    <title>How to use tinyMCE editor in ASP.NET Website </title>
    <script src="" type="text/javascript"></script>
    <script type="text/javascript" src="tiny_mce/tiny_mce.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
                // General options
                mode: "textareas",
                theme: "advanced",
                file_browser_callback: "myFileBrowser",
                plugins: "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,

                // Theme options
                theme_advanced_buttons1: "save,newdocument,|,bold,italic,underline,
                theme_advanced_buttons2: "cut,copy,paste,pastetext,pasteword,|,search,replace,
                theme_advanced_buttons3: "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,
                theme_advanced_buttons4: "insertlayer,moveforward,movebackward,absolute,
                theme_advanced_toolbar_location: "top",
                theme_advanced_toolbar_align: "left",
                theme_advanced_statusbar_location: "bottom",
                theme_advanced_resizing: true,

                // Example content CSS (should be your site CSS)
                // using false to ensure that the default browser settings are used for best Accessibility
                content_css: false,
                // Use browser preferred colors for dialogs.
                browser_preferred_colors: true,
                detect_highcontrast: true,

                // Drop lists for link/image/media/template dialogs
                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
                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' }

                // Replace values for the template plugin
                template_replace_values: {
                    username: "Some User",
                    staffid: "991234"
    <form id="form1" runat="server">
        <textarea id="elm1" runat="server" name="elm1" rows="15" cols="80" style="width: 600px;
            height: 300px;"></textarea>
        <asp:Button ID="Button1" runat="server" Text="Button" />

The output of the above page as shown in the below figure 

No comments:

Post a Comment

© 2012-2018 All Rights Reserved.
The content is copyrighted to Kishore and may not be reproduced on other websites without permission from the owner.