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

<script runat=“server”>

</script>

<html xmlns=“http://www.w3.org/1999/xhtml”>
<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” target=“_blank”>Firefox</a> and <a href=“http://www.google.com” 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 Lance Zhang | ASP.NET AJAX, ASP.NET AJAX Advance Tips & Tricks, Code and Solution, JavaScript | , , | No Comments Yet

No comments yet.

Leave a comment

« Previous | Next »