Add textbox to the RadEditor's Tool Collection

[Payal Mandalia]

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

[Rumen]

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.

[Payal Mandalia]

Hi Rumen,


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


Cheers,
Payal

[Hariharan]

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.