Rad Editor Custom Popup not working as expected

7 posts, 0 answers
  1. Srikanth
    Srikanth avatar
    2 posts
    Member since:
    Oct 2013

    Posted 10 Jan 2014 Link to this post

    Hi,

    I have implemented as below for Rad Editor to open custom popups. Sometimes i am able to see the custom popup opening at first time itself and sometime it is throwing alert as "Custom Command not implemented yet".
    1) At initial load of the user control in which i am using RadEditor i am not able to open popup "UploadImage.aspx" on subsequent postback i am able to open and this is also somtime working and some times i am able to see the same alert "Custom Command not implemented yet" I have to make this working in IE, Firfox and Chrome.

    Thanks in advance.

    EditorPage.aspx

    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="EditorPage.aspx.vb" Inherits="EditorPage" %>
    <%@ Register  tagPrefix="telerik" namespace="Telerik.Web.UI" assembly="Telerik.Web.UI" %>
    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script type="text/javascript" language="javascript">
            //<![CDATA[
            /* Implementation of the Custom command, declared in the editor's Tools.xml file! */

            RadEditorCommandList["Custom"] = function (commandName, editor, args) {
                var myCallbackFunction = function (sender, args) {
                    if (args.href != undefined) { editor.pasteHtml(String.format("<img src={0} /> ", args.href)) }
                }

                editor.showExternalDialog('../../Controls/Custom/UploadImage.aspx',
              {},
              500,
              230,
              myCallbackFunction,
              null,
              'Insert Image',
              true,
              Telerik.Web.UI.WindowBehaviors.Close + Telerik.Web.UI.WindowBehaviors.Move,
              false,
              false);
            };

            /*TO DO: Implement something meaningful here*/

            //]]>
    </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
              <asp:ScriptManager runat="server" ID="ScriptMngr">
        </asp:ScriptManager>
           <telerik:RadEditor runat="server" ID="reWysiwyg" ToolsFile="~/FullSetOfTools.xml"
                            SkinID="DefaultSetOfTools" AutoResizeHeight="true" CssClass="minwidth" ContentAreaMode="div">
                            <ImageManager ViewPaths="~/images" DeletePaths="~/images" UploadPaths="~/images" />
                        </telerik:RadEditor>
        </div>
        </form>
    </body>
    </html>


    FullSetOfTools.xml

    <root>
        <modules>
            <module name="RadEditorStatistics" dockingZone="Bottom" enabled="true" visible="true" dockable="true" />
            <module name="RadEditorDomInspector" dockingZone="Module" enabled="true" visible="true" dockable="true" />
            <module name="RadEditorNodeInspector" dockingZone="Module" enabled="true" visible="true" dockable="true" />
            <module name="RadEditorHtmlInspector" dockingZone="Module" enabled="true" visible="false" dockable="true" />
        </modules>
        <tools name="Custom">
        <tool name="Custom"/>
      </tools>
        <tools name="MainToolbar">    
        
        <tool name="InsertLink" />
        <tool name="InsertTableLight" />    
        <tool separator="true"/>
            <tool name="FormatStripper" />
      </tools>
      <tools name="InsertToolbar" >
        <tool name="AjaxSpellCheck"/>    
        <tool separator="true"/>
        <tool name="InsertTable" />    
      </tools>  
      <tools>
        <tool name="Bold" />
        <tool name="Italic" />
        <tool name="Underline" />
        <tool name="ForeColor" />
        <tool name="BackColor"/>
        <tool name="FormatPainter" />
        <tool separator="true"/>
        <tool name="JustifyLeft" />
        <tool name="JustifyCenter" />
        <tool name="JustifyRight" />
        <tool name="JustifyFull" />    
        <tool separator="true"/>    
        <tool name="InsertOrderedList" />
        <tool name="InsertUnorderedList"/>    
      </tools>
      <tools name="DropdownToolbar" >
        <tool name="FontName"/>
        <tool name="RealFontSize"/>
        <tool name="FormatBlock"/>
      </tools>
        <links>
            <link name="Telerik" href="http://www.telerik.com">
                <link name="Products" href="http://www.telerik.com/products">
                    <link name="RadEditor" href="http://www.telerik.com/radeditor" >
                        <link name="Accessible RadEditor" href="http://demos.telerik.com/aspnet-ajax/editor/examples/accessibleeditor/defaultcs.aspx" />
                        <link name="Rad Editor for MOSS" href="http://www.telerik.com/products/aspnet-ajax/sharepoint.aspx" />
                    </link>
                </link>
                <link name="Purchase" href="http://www.telerik.com/purchase" />
                <link name="Support" href="http://www.telerik.com/support" />
                <link name="Community" href="http://www.telerik.com/community" />
                <link name="Company" href="http://www.telerik.com/company" />
                <link name="Account" href="https://www.telerik.com/login.aspx" />
            </link>
            <link name="Microsoft">
                <link name="Main Site" href="http://www.microsoft.com" />
                <link name="MSDN Online" href="http://msdn.microsoft.com" />
                <link name="Windows Update" href="http://windowsupdate.microsoft.com" />
            </link>
            <link name="Search Engines">
                <link name="Google" href="http://www.google.com" />
                <link name="Bing" href="http://www.bing.com" />
                <link name="Yahoo" href="http://www.yahoo.com" />
            </link>
        </links>
        <snippets>
            <snippet name="Order Confirmation">
                <![CDATA[
                        <div style="width:300px;border:2px outset #D8D2BD;padding:34px;font-family:Arial, Verdana; font-size:11px;background-color:#F1EFE6;">
                        Dear ____________________,<br />
                        Thank you for inquiring about ____________. Your request will be processed in 48 hours and shipped at the address you have provided.
                        <br /><br />
                            <b>Please, contact us if you have any problems.</b>
                        </div>
                    ]]>
            </snippet>
            <snippet name="Email Signature">
                <![CDATA[
                        <div style="margin-top:30px;width:80%;border-top:1px dotted gray;padding-top:4px;font-family:Arial, Verdana; font-size:11px;">
                        <b>John Wigham</b><br />
                        Senior Web Developer<br />
                            <a href="#">john@mysite.com</a>
                            <br />
                                <br />
                                    <i>Disclaimer: The contents of this e-mail are privileged and confidential and intended for the addressees at the specified e-mail addresses only.</i>
                        </div>
                    ]]>
            </snippet>
            <snippet name="Problem Report Feedback">
                <![CDATA[
                        <div style="width:300px;border:2px outset #D8D2BD;padding:34px;font-family:Arial, Verdana; font-size:11px;background-color:#F1EFE6;">
                        Hi ____________________,<br />
                        Thank you for reporting this issue. We have verified the problem and it is logged in our system. We will notify you once we have a solution.
                        <br /><br />
                            <b>Please, contact us if you have any problems.</b>
                        </div>
                    ]]>
            </snippet>
        </snippets>
        <symbols>
        </symbols>
        <fontNames>
        </fontNames>
        <fontSizes>
        </fontSizes>
        <colors>
        </colors>
        <classes>
        </classes>
        <paragraphs>
        </paragraphs>
        <dialogParameters>
        </dialogParameters>
        <languages>
        </languages>
    </root>

    Thanks
    Srikanth
  2. Ianko
    Admin
    Ianko avatar
    1956 posts

    Posted 14 Jan 2014 Link to this post

    Hello,

    Note that there should be an error thrown in the console which explains the possible reason for the described behavior - ReferenceError: RadEditorCommandList is not defined.

    The implementation of the custom command is added in the head tag of the document, which means that the script will be started before the rendering of the body element. Without a rendered body the RadEditor object is not yet initialized, which correspondingly means that the Command List does not exist.

    I suggest placing the the script tag with the command implementation right after the RadEditor declaration  or assuring that the same is triggered after the editor loading.

    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="EditorPage.aspx.vb" Inherits="EditorPage" %>
    <%@ Register  tagPrefix="telerik" namespace="Telerik.Web.UI" assembly="Telerik.Web.UI" %>
    <!DOCTYPE html>
     
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:ScriptManager runat="server" ID="ScriptMngr">
                </asp:ScriptManager>
             
                   <telerik:RadEditor runat="server" ID="reWysiwyg" ToolsFile="~/FullSetOfTools.xml"
                        SkinID="DefaultSetOfTools" AutoResizeHeight="true" CssClass="minwidth" ContentAreaMode="div">
                        <ImageManager ViewPaths="~/images" DeletePaths="~/images" UploadPaths="~/images" />
                    </telerik:RadEditor>
                             
                    <script type="text/javascript" language="javascript">
                        //<![CDATA[
                        /* Implementation of the Custom command, declared in the editor's Tools.xml file! */
     
                        RadEditorCommandList["Custom"] = function (commandName, editor, args) {
                            var myCallbackFunction = function (sender, args) {
                                if (args.href != undefined) { editor.pasteHtml(String.format("<img src={0} /> ", args.href)) }
                            }
     
                            editor.showExternalDialog('../../Controls/Custom/UploadImage.aspx',
                          {},
                          500,
                          230,
                          myCallbackFunction,
                          null,
                          'Insert Image',
                          true,
                          Telerik.Web.UI.WindowBehaviors.Close + Telerik.Web.UI.WindowBehaviors.Move,
                          false,
                          false);
                        };
     
                        /*TO DO: Implement something meaningful here*/
     
                        //]]>
                    </script>
            </div>
        </form>
    </body>
    </html>


    Regards,
    Ianko
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  3. Srikanth
    Srikanth avatar
    2 posts
    Member since:
    Oct 2013

    Posted 17 Jan 2014 Link to this post


    Thanks for your reply Ianko

    I have tried added the script as mentioned below but no luck still i see it working sometimes and some time i am getting alert as "Custom Command not implemented" even tried adding it to the bottom of the html at the end even this did not work.

    Any other solution highly appreciable.

    Thanks,
    Srikanth.
  4. Sp
    Sp avatar
    19 posts
    Member since:
    Jan 2012

    Posted 17 Jan 2014 Link to this post

    plz reply .. i am also facing this issue.
  5. Ianko
    Admin
    Ianko avatar
    1956 posts

    Posted 20 Jan 2014 Link to this post

    Hello,

    Generally, this alert pops up when the command is not being implemented. I suggest checking if the name of the command is the same as the one passed to the command list of the editor.

    Notice that the command should be implemented right after the editor's declaration, so that the command list gets initialized, although the script tag should be within the form element of the page.

    I am unable to reproduce the issue on my end and I suggest attaching a simple demo, that reproduces the issue locally, so that I could be able to investigate the used implementation and help you accordingly.

    Regards,
    Ianko
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  6. Sp
    Sp avatar
    19 posts
    Member since:
    Jan 2012

    Posted 11 Feb 2014 in reply to Ianko Link to this post

    this problem occurs when adding radeditor dynamically - with partialpost back , along with this issue at the first time radeditor not working
    with partial post back
    it is woking fine in postback.

    please give some solution - how to work with radeditor in partial postback , in my scenario i'll not do the complete postback.

    please find the screen shots - how it is rendering in partialpostback and complete postback

  7. Ianko
    Admin
    Ianko avatar
    1956 posts

    Posted 13 Feb 2014 Link to this post

    Hello,

    I am unable to reproduce the issue on my end. It would be helpful if you can provide a simple project that isolates the problem locally, so that I could be able to reproduce it and investigate it thoroughly.

    Regards,
    Ianko
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the UI for ASP.NET AJAX, subscribe to the blog feed now.
Back to Top