Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Rad Editor Custom Popup not working as expected

6 Answers 334 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Srikanth
Top achievements
Rank 1
Srikanth asked on 10 Jan 2014, 08:14 AM
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

6 Answers, 1 is accepted

Sort by
0
Ianko
Telerik team
answered on 14 Jan 2014, 02:48 PM
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.
0
Srikanth
Top achievements
Rank 1
answered on 17 Jan 2014, 12:42 PM

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.
0
Sp
Top achievements
Rank 1
Veteran
answered on 17 Jan 2014, 01:45 PM
plz reply .. i am also facing this issue.
0
Ianko
Telerik team
answered on 20 Jan 2014, 11:03 AM
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.
0
Sp
Top achievements
Rank 1
Veteran
answered on 11 Feb 2014, 02:31 PM
partialpostback.png
radeditor-render.png
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

0
Ianko
Telerik team
answered on 13 Feb 2014, 03:36 PM
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.
Tags
Editor
Asked by
Srikanth
Top achievements
Rank 1
Answers by
Ianko
Telerik team
Srikanth
Top achievements
Rank 1
Sp
Top achievements
Rank 1
Veteran
Share this question
or