Add textbox to the RadEditor's Tool Collection

4 posts, 0 answers
  1. Payal Mandalia
    Payal Mandalia avatar
    6 posts
    Member since:
    Nov 2009

    Posted 09 Nov 2009 Link to this post

    Hello all,

    I am new to Telerik RadControls and currently I am working on RadEditor Control for the application I am developing using ASP.Net 3.5 Ajax... I would like to know whether is it possible to "Add textbox to RadEditor's Tool Collection"
    <%@ Page Language="C#" MasterPageFile="~/Layout3columnHeader.Master" AutoEventWireup="true" 
        CodeBehind="~/welcomeScreen.aspx.cs" Inherits="Waivenet.welcomeScreen" %> 
     
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %> 
    <asp:Content ID="headContent" ContentPlaceHolderID="headph" runat="server"
    <script type="text/javascript"
                //<![CDATA[
                    /************************************************
                    *
                    *    Tool with custom rendering
                    *
                    ************************************************/
                    var defaultoInputWidthValue = "set Width...";
                    var defaultoInputHeightValue = "set Height...";
                    var defaultoInputUrlValue = "add URL...";
                    if ("undefined" == typeof(RadEditorToolInitializer))
                    {
                        var RadEditorToolInitializer = {};
                    }
                    /* RadEditorToolInitializer is a global object that contains initializer functions for custom tools */
                    RadEditorToolInitializer["CustomRenderedTool"] = function (toolArgs)
                        {
                            function CustomRenderedTool(toolArgs)
                            {
                                this.Controller = toolArgs.Controller;
                                this.Name = toolArgs.Name;                            
                            }
                            CustomRenderedTool.prototype.Create = function()
                            {
                                var oInputWidth = document.createElement ("INPUT");
                                oInputWidth.type = "text";
                                oInputWidth.style.width = "75px";
                                oInputWidth.value = defaultoInputWidthValue;
                                oInputWidth.onclick = function(){if (this.value == defaultoInputWidthValue)this.value = ""};
                                var oInputHeight = document.createElement ("INPUT");
                                oInputHeight.type = "text";
                                oInputHeight.style.width = "75px";
                                oInputHeight.value = defaultoInputHeightValue;
                                oInputHeight.onclick = function(){if (this.value == defaultoInputHeightValue)this.value = ""};
                                
                                var oInputUrl = document.createElement ("INPUT");
                                oInputUrl.type = "text";
                                oInputUrl.style.width = "90px";
                                oInputUrl.value = defaultoInputUrlValue;
                                oInputUrl.onclick = function(){if (this.value == defaultoInputUrlValue)this.value = ""};
                                
                                var oButton = document.createElement ("INPUT");
                                oButton.type = "button";
                                oButton.value= "Insert!";
                                oButton.className = "RadEButton";
                                var controller = this.Controller;
                                var toolObject = new Object();
                                toolObject.widthHolder = oInputWidth;
                                toolObject.heightHolder = oInputHeight;
                                toolObject.className = "CustomRenderedTool";   
                                toolObject.urlHolder = oInputUrl;
                                oButton.onclick= function anon (e)
                                {
                                    controller.Fire("CustomRenderedTool", toolObject);
                                    return false;
                                };
                                var oHolder = document.createElement ("DIV");
                                oHolder.appendChild (oInputWidth);
                                oHolder.appendChild (oInputHeight);
                                oHolder.appendChild (oInputUrl);                    
                                oHolder.appendChild (oButton);
                                return oHolder;
                                return oButton;
                            };
                                                    
                            return new CustomRenderedTool (toolArgs);
                        };
                //]]> 
                </script> 
    </asp:Content> 
    <asp:Content ID="menuContent" ContentPlaceHolderID="menuph" runat="server"
        <div id="cusotmizeScreenDiv" style="float: right; margin-top: 3.5%;"
            <asp:Panel ID="cmsPanel" runat="server" ScrollBars="Auto" GroupingText="Content Management"
                <asp:CheckBoxList ID="cblCustomizeLayout" runat="server"
                </asp:CheckBoxList> 
                <br /> 
                <asp:Button ID="btEnable" runat="server" Text="Enable Selected" OnClick="btEnableClick" 
                    ToolTip="Click to enable the status of the seletced blocks" /> 
                <br /> 
                <br /> 
                <asp:Button ID="btDisable" runat="server" Text="Disable Selected" OnClick="btDisableClick" 
                    ToolTip="Click to disable the status of the seletced blocks" /> 
            </asp:Panel> 
        </div> 
    </asp:Content> 
    <asp:Content ID="mainContent" ContentPlaceHolderID="mainph" runat="server"
     
        <script type="text/javascript"
            function setStyle(editor, args) { 
                var style = editor.get_contentArea().style; 
                style.backgroundImage = "none"
                style.backgroundColor = "white"
                style.color = "black"
                style.fontFamily = "Tahoma"
                style.fontSize = 12 + "px"; 
            } 
        </script> 
     
        <div id="WelcomeMessage" runat="server" style="position: relative; float: left; width: 48%; 
            height: 30%; left: 1%; top: 1%; margin-right: 1.5%; margin-top: 1%;" visible="false"
            <asp:Panel ID="welcomePanel" runat="server" ScrollBars="Auto" GroupingText="Welcome Message" 
                Width="100%" Height="100%" Font-Bold="false"
                <asp:Label ID="lbWelcomeMsg" runat="server" Text=""></asp:Label> 
                <br /> 
                <asp:Button ID="btCusotmize" runat="server" Text="Customize Welcome Message" Width="185px" 
                    Visible="true" OnClick="btCustomizeWelcomeMsgClick" /> 
                <telerik:RadEditor ID="welcomeEditor" runat="server" Skin="Web20" Width="100%" Height="100%" 
                    OnClientLoad="setStyle" Style="overflow: auto" ToolbarMode="Default" EditModes="Design,Preview" 
                    ToolsFile="~/ToolsFiles/WelcomeBlockTools.xml"
                </telerik:RadEditor> 
                <telerik:RadCodeBlock ID="welcomeCodeBlock" runat="server"
     
                    <script type="text/javascript"
                        //<![CDATA[
                        /* Implementation of the Submit command, declared in the editor's DefaultTools.xml file! */
                        if ("undefined" != typeof (Telerik.Web.UI.Editor)) {
                            Telerik.Web.UI.Editor.CommandList["Submit"] = function(submit, editor, args) {
                                $find("<%= RadAjaxManager.GetCurrent(Page).ClientID %>").ajaxRequest("updateWelcomeMsg");
                            };
                            /* Implementation of the Cancel command, declared in the editor's DefaultTools.xml file! */
                            Telerik.Web.UI.Editor.CommandList["Cancel"] = function(cancel, editor, args) {
                                $find("<%= RadAjaxManager.GetCurrent(Page).ClientID %>").ajaxRequest("cancelEditWelcomeMsg");
                            };
                        }
                        //]]> 
                    </script> 
     
                </telerik:RadCodeBlock> 
            </asp:Panel> 
        </div> 
        <div id="News" runat="server" style="position: relative; height: 30%; float: left; 
            width: 48%; left: 1%; top: 1%; margin-right: 1.5%; margin-top: 1%; overflow: auto" 
            visible="false"
            <asp:Panel ID="newsPanel" runat="server" ScrollBars="Auto" GroupingText="News" Width="100%" 
                Height="100%"
                <asp:Label ID="lbNews" runat="server" Text=""></asp:Label> 
                <br /> 
                <asp:Button ID="btPostNews" Text="Post News" runat="server" OnClick="btPostNewsClick" /> 
                <br /> 
                <table id="tblHolder" cellspacing="0" cellpadding="2" border="0" runat="server"
                    <tr> 
                        <td> 
                            <asp:Label ID="lbNewsExpDt" runat="server" Text="News Expiry Date:" Visible="false"></asp:Label> 
                        </td> 
                        <td> 
                            <asp:TextBox ID="tbNewsExpDt" runat="server" Visible="false"></asp:TextBox> 
                        </td> 
                    </tr> 
                </table> 
                <telerik:RadEditor ID="newsEditor" runat="server" Skin="Web20" Width="100%" Height="100%" 
                    OnClientLoad="setStyle" Style="overflow: auto" ToolbarMode="Default" EditModes="Design,Preview" 
                    ToolsFile="~/ToolsFiles/NewsBlockTools.xml" ToolsWidth="100%"
                </telerik:RadEditor> 
                <telerik:RadCodeBlock ID="newsCodeBlock" runat="server"
                    <script type="text/javascript"
                        //<![CDATA[
                        /* Implementation of the CustomRenderedTool command, declared in the NewsBlockTools.xml file! */
                        if ("undefined" != typeof (Telerik.Web.UI.Editor)) {
                            Telerik.Web.UI.Editor.CommandList["CustomRenderedTool"] = function(commandName, editor, oTool) {
                                var linkToPaste = "";
                                var selectionText = editor.get_html();
                                if (selectionText == "") {
                                selectionText = oTool.urlHolder.value;
                                }
                                var reDimension = /^\d+(px|pt)?$/ig;
                                var width = oTool.widthHolder.value;
                                if (!width.match(reDimension)) {
                                alert('Please, provide a valid width!');
                                return;
                                }
                                var height = oTool.heightHolder.value;
                                if (!height.match(reDimension)) {
                                alert('Please, provide a valid height!');
                                return;
                                }
                                var url = oTool.urlHolder.value;
                                if (!url.match(/^(http|file|ftp):\/\//ig)) {
                                alert('Please, provide a valid url!\nUrls should begin with a protocol name, like http://www.telerik.com,');
                                return;
                                }
                                linkToPaste = "<a href=\"#\" onclick=\"javascript:window.open('" + url +
                                "', '_blank', 'width=" + width +
                                ",height=" + height +
                                "');\">" + selectionText + "</a>"
                                editor.PasteHtml(linkToPaste);
                            };
                            /* Implementation of the Post command, declared in the editor's PostNewsTools.xml file! */
                            Telerik.Web.UI.Editor.CommandList["Post"] = function(newsPost, editor, args) {
                                $find("<%= RadAjaxManager.GetCurrent(Page).ClientID %>").ajaxRequest("postNews");
                            };
                            /* Implementation of the Post command, declared in the editor's PostNewsTools.xml file! */
                            Telerik.Web.UI.Editor.CommandList["Cancel Post"] = function(cancelPost, editor, args) {
                                $find("<%= RadAjaxManager.GetCurrent(Page).ClientID %>").ajaxRequest("cancelPostNews");
                            };
                        }
                        //]]> 
                    </script> 
     
                </telerik:RadCodeBlock> 
            </asp:Panel> 
        </div> 

    I did go through the forums and found threads  about using custom tools as well as adding custom controls to radeditor toolbars.But it didnt work for me.The problem that I am facing is rendering the "CustomRenderedTool" from the toolsfile.xml. I does show a icon with a tooltip of "CustomRenderedTool" but when I am trying to initialize Radeditor Tool using RadEditorToolInitializer, it not working fro me...

    Here is the sample code that I am using...
  2. Rumen
    Admin
    Rumen avatar
    14462 posts

    Posted 12 Nov 2009 Link to this post

    Hi Payal,

    The custom rendered tool solution applies to RadEditor Classic and it does not work for the new RadEditor for ASP.NET AJAX.

    Please, see the following forum thread which shows how to add RadCombobox to RadEditor's Toolbar:
    Can I add a combobox to radeditor's tools collection? You should simply replace the combobox with a textbox to achieve your scenario.


    Kind regards,
    Rumen
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  3. Payal Mandalia
    Payal Mandalia avatar
    6 posts
    Member since:
    Nov 2009

    Posted 15 Nov 2009 Link to this post

    Hi Rumen,


    Thanks heaps for your help...it worked for me... :)


    Cheers,
    Payal
  4. Hariharan
    Hariharan avatar
    9 posts
    Member since:
    Nov 2011

    Posted 21 Nov 2011 Link to this post

    Hello Payal Mandalia ,

    Didi you add text box in RadEditor tool collection instead of Combobox.

    If its is,kindly shar your code for Add textbox to tool collection in RadEditor

    It would be more helpful for me.
Back to Top