LanceZhang’s Blog

Dear friends, Welcome to my blog.

TinyMCE Editor and Ajax Control Toolkit Tab Control

As we know, the ASP.NET forum’s add post page contains a TabContainer control in one TabPanel there is a TinyMCE Editor for edit the post, another TabPanel is use for preview the post.

In this case, I have created a demo like that:

<%@ Page Language=”C#” ValidateRequest=”false” %>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;

<script runat=“server”>

</script>

<html xmlns=http://www.w3.org/1999/xhtml&#8221;>
<head id=“Head1” runat=“server”>
    <title></title>
    <!– TinyMCE –>

    <script src=“tiny_mce/tiny_mce.js” type=“text/javascript”></script>

    <script type=“text/javascript”>
        tinyMCE.init({
            // General options
            mode: “textareas”,
            theme: “advanced”,
            plugins: “safari,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”,

            // Theme options
            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”,
            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)
            content_css: “css/content.css”,

            // 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”,

            // Replace values for the template plugin
            template_replace_values: {
                username: “Some User”,
                staffid: “991234”
            }
        });
    </script>

    <!– /TinyMCE –>
</head>
<body>
    <form id=“form1” runat=“server”>
    <div>
        <asp:ScriptManager ID=“ScriptManager1” runat=“server”>
        </asp:ScriptManager>
        <ajaxToolkit:TabContainer ID=“TabContainer1” runat=“server” ActiveTabIndex=“0” Height=“300px”
            Width=“100%” OnClientActiveTabChanged=“preview”>
            <ajaxToolkit:TabPanel runat=“server” HeaderText=“Edit Post” ID=“TabPanel1”>
                <ContentTemplate>
                    <!– Gets replaced with TinyMCE, remember HTML in a textarea should be encoded –>
                    <textarea id=“elm1” name=“elm1” rows=“15” cols=“80” style=“width: 99%; height: 280px;”>
        <p>
        <img src=“media/logo.jpg” alt=” “ hspace=“5” vspace=“5” width=“250” height=“48” align=“right” />    TinyMCE is a platform independent web based Javascript HTML <strong>WYSIWYG</strong> editor control released as Open Source under LGPL by Moxiecode Systems AB. It has the ability to convert HTML TEXTAREA fields or other HTML elements to editor instances. TinyMCE is very easy to integrate into other Content Management Systems.
        </p>
        <p>
        We recommend <a href=http://www.getfirefox.com&#8221; target=“_blank”>Firefox</a> and <a href=http://www.google.com&#8221; target=“_blank”>Google</a> <br />
        </p>
    </textarea>
                </ContentTemplate>
            </ajaxToolkit:TabPanel>
            <ajaxToolkit:TabPanel runat=“server” HeaderText=“Preview” ID=“TabPanel2”>
                <ContentTemplate>
                    <asp:Label ID=“Label1” runat=“server” Text=“Label”></asp:Label>
                </ContentTemplate>
            </ajaxToolkit:TabPanel>
            <ajaxToolkit:TabPanel runat=“server” HeaderText=“TabPanel3” ID=“TabPanel3”>
                <ContentTemplate>
                    Other
                </ContentTemplate>
            </ajaxToolkit:TabPanel>
        </ajaxToolkit:TabContainer>
        <asp:Button ID=“Button1” runat=“server” Text=“Button” OnClientClick=“document.write(tinyMCE.get(‘elm1’).getContent());return false;” />
    </div>

    <script type=“text/javascript”>

        function preview() {
            if ($find(“TabContainer1”).get_activeTabIndex() == 1) {
                $get(“<%=Label1.ClientID %>”).innerHTML = tinyMCE.get(‘elm1’).getContent();
            }
        }
    </script>

    </form>
</body>
</html>

January 20, 2009 - Posted by | ASP.NET AJAX, ASP.NET AJAX Advance Tips & Tricks, Code and Solution, JavaScript | , ,

1 Comment »

  1. Just testing everything out!

    Comment by kAshton SLOAN | May 19, 2010 | Reply


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: