custom editor button and radwindow

12 posts, 0 answers
  1. Mike
    Mike avatar
    12 posts
    Member since:
    Mar 2013

    Posted 26 Mar 2013 Link to this post

    I am wanting to know if this is the best solution and if ultimately if it is doable. I am having an issue with how I will be able to inject the wanted data from the radWindow into the editor window at the point of where the cursor is.

    I working in the DNN framework and I have a need to create a custom button in the radEditor so that the Content Author can "Insert" a quote that is maintained in a separate DB as a library of sorts.

    I have poured over everything and I think I can create the button and utilize the radWindow and in the radWindow, I will have it point to a page that uses a custom module I will be building to pull in the wanted data. I am wanting to mimic the image manager or the hyperlink manager in a way.

    1) Choose the quote from a list or grid inside the radWindow
    2) inject the value from  one of the fields into the editor.

    i.e.     I pull up the radWindow showing the two  options with the 3 fields. ID, Quote, author. I choose option 1
    <1> Quote #1 Me
    <2> Quote #2 You

    my editor would now display the following.
    blah blah blah <1> blah blah blah

    Thanks for any direction and or tips.

    UPDATED:
    I have the custom button and radwindow all hooked up. Still trying to figure out how to inject the text that is on the page into the editor. I'll update as I figure it out. But any direction in the mean time would be helpful.
  2. Rumen
    Admin
    Rumen avatar
    14430 posts

    Posted 27 Mar 2013 Link to this post

    Hello,

    All you need to do is to implement your own custom dialog as shown in the following demo: Custom Dialogs. The RadEditor's dialogs handle and store the selection and restore it automatically when inserting data from them. The dialogs are also based on RadWindow.

    Kind regards,
    Rumen
    the Telerik team
    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 their blog feed now.
  3. Mike
    Mike avatar
    12 posts
    Member since:
    Mar 2013

    Posted 27 Mar 2013 Link to this post

    Thanks Rumen! I actually found that last night and was able to get it implemented. Thank your for sharing the link!

    I am however coming across an issue with the top close bar not showing up. I attached a screen shot. Any thoughts why it's not showing up? I retraced all the code and it appears correct. I will be trying to debug it but I thought I would throw it out there to see if you or anyone knew right off the bat what is missing or wrong..

    I found the culprit. This has display:none
    <table class="rwTitlebarControls" cellspacing="0" cellpadding="0" align="left" style="display: none;">
    Where or how is that inline style being injected there?


    When removing the display:none style it displays the titlebar but with a bunch of oddness. Screen cap attached. I did find an article here that seems the same. Can you verify that is the issue and if I can get the necessary css file to update?

    http://www.telerik.com/community/forums/aspnet-ajax/editor/custom-dialogs-and-aspx.aspx





  4. Mike
    Mike avatar
    12 posts
    Member since:
    Mar 2013

    Posted 02 Apr 2013 Link to this post

    Just trying to get a follow up to see if any ideas on how to proceed. I am at a loss...

  5. Marin Bratanov
    Admin
    Marin Bratanov avatar
    5792 posts

    Posted 04 Apr 2013 Link to this post

    Hello Mike,

    What I see in the screenshots looks more like CSS interference from the main page, especially the second one where the titlebar is stretched and the background image sprite leaks. This is usually due to global selectors like td, for example td { padding: 20px; } will cause a similar problem.

    Disabling all custom CSS on the page is the easiest way to see if this is the case. If the issue is gone then you can start putting it back in piece by piece to find the problematic rule and make it more specific.

    If you are familiar with the rendering of the RadWindow control you can also use the dev toolbar to follow the CSS rules that apply to each element around the titlebar and find the one that does not come from our stylesheets to identify the problem faster.


    Kind regards,
    Marin Bratanov
    the Telerik team
    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 their blog feed now.
  6. Mike
    Mike avatar
    12 posts
    Member since:
    Mar 2013

    Posted 10 Apr 2013 Link to this post

    Hi Marin,
    I removed all the CSS etc etc and I narrowed it down to this class - rwTitleRow that was on a TR However, there is a table nested within the above TR with a class of rwTitlebarControls that is mainly the culprit. This table has a inline style="display:none". I am still unable to find anything on how or why this is in here.


  7. Marin Bratanov
    Admin
    Marin Bratanov avatar
    5792 posts

    Posted 12 Apr 2013 Link to this post

    Hi Mike,

    At this point I advise that you isolate the problem in a small sample we can run and inspect. This will let us see what is going on with the code and what is the reason for the problem. The steps from this blog post can help.


    Regards,
    Marin Bratanov
    the Telerik team
    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 their blog feed now.
  8. Mike
    Mike avatar
    12 posts
    Member since:
    Mar 2013

    Posted 30 May 2013 Link to this post

    I'm back at trying to tackle this problem. I pulled down the sample code from the link you sent and it throws an error as downloaded. I'm sending you my code files. The next thing I can offer up for a project would be to create a fake DNN site and send it off but you wouldn't be able to run it anyways.

    It seems like this will pull me away into a never ending direction.... I don't own the telerik product. It's built into the DNN product. I thought if the code samples for the link worked, I could plug in the javascript that I am using..

    I zipped up the files that I have the code in. Also a video and source code, but it won't let me upload it.. not a supported file type....

    I will insert my code, the source code, and a screen cap of firebug... Hopefully this will help?
    I just tried to add all this in one ticket and it bombed. So I am separating it up....
  9. Mike
    Mike avatar
    12 posts
    Member since:
    Mar 2013

    Posted 30 May 2013 Link to this post

    <head runat="server">
        <title></title>
        <link href="localhost/DesktopModules/E3T_MeasureDocuments/module.css?cdv=103" type="text/css" rel="stylesheet"/>
        <style>
            .evenrow { background-color:#D0E0F3;}
            .oddrow {background-color:#ffffff}
            .refItems {background-color: rgb(218, 231, 246);
                       margin-bottom: 1em;
                       border-radius: 10px 10px 10px 10px;
                       padding: 0.5em;
                       }
        </style>
        <script type="text/javascript">
            $(function ($) {
                $(".reference").click(function () {
                    var currentId = $(this).data("id");
     
                    $(".reference").css("background-color", "");
                    $("#" + currentId).css("background-color", "#5C9CCC");
     
                    // Pull the values from the text below
     
                    //Going to add a css class to the div to identifiy if it's chosen
                    var currentDiv = $('#' + currentId);
                    $(this).addClass("highlighted");
                });
                $(".reference:odd").addClass("evenrow")
                $(".reference:even").addClass("oddrow")
            });
     
     
                function getSelText() {
                    var txt = '';
                    if (window.getSelection) {
                        txt = window.getSelection();
                    }
                    else if (document.getSelection) {
                        txt = document.getSelection();
                    }
                    else if (document.selection) {
                        txt = document.selection.createRange().text;
                    }
                    else return;
                    document.getElementById(selectedtext).value = txt;
                }
     
     
    //            $('#refList').children('.reference').each(function (index) {
    //                $(this).addClass(index % 2 ? 'evenrow' : 'oddrow');
    //            });
                
        </script>
         
    </head>
    <body>
        <form id="form1" runat="server">
        <h3>Choose Source to be sited</h3>
        <div id="refItems" style="padding:0x 5px" class="refItems">
        <% foreach (var ie_measureReferenceItem in ie_measureReferenceItems)
           {
               iCount++;
               %>
                <%if (ie_measureReferenceItems.ToList().Count < 1)
                {
                %>
                No References Have Been Added to this Technology
                <%} %>
                  <% else
                    { %>
                         <div data-id="<%= ie_measureReferenceItem.refId %>" id="<%= ie_measureReferenceItem.refId %>" class="reference">
                            <span class="refAuthorLast"><%= ie_measureReferenceItem.refAuthorLastName%></span>, <span class="refAuthor"><%= ie_measureReferenceItem.refAuthor%></span>, <span class="refDate"><%= Convert.ToDateTime(ie_measureReferenceItem.refDate).ToString("MMM dd")%></span>, <span class="refYear"><%= Convert.ToDateTime(ie_measureReferenceItem.refDate).ToString("yyyy")%></span>, <span class="refTitle"><%= ie_measureReferenceItem.refTitle%></span>.<br />
                            <span class="refName"><%= ie_measureReferenceItem.refName%></span>, <span class="refVolume"><%= ie_measureReferenceItem.refVolumeNumber%></span>
                          
                         </div>
                         <hr />
                  <% } %>
        <% } %>
        <br /><br />
        Page Numbers:<input type="text" id="pages" /><br />
                <input type="button" onclick="javascript:insertLink();" value="Insert Link" />
                <br /><br />
        </div>
                 
            <script type="text/javascript">
                if (window.attachEvent) {
                    window.attachEvent("onload", initDialog);
                }
                else if (window.addEventListener) {
                    window.addEventListener("load", initDialog, false);
                }
     
                var pages = document.getElementById("pages");
                var workLink = null;
     
                function getRadWindow() {
                    if (window.radWindow) {
                        return window.radWindow;
                    }
     
                    if (window.frameElement && window.frameElement.radWindow) {
                        return window.frameElement.radWindow;
                    }
     
                    return null;
                }
     
                function initDialog() {
                    var clientParameters = getRadWindow().ClientParameters; //return the arguments supplied from the parent page  
     
                      pages.value = clientParameters.innerHTML;
                      workLink = clientParameters;
                }
     
                function insertLink() //fires when the Insert Link button is clicked   
                {
                    //create an object and set some custom properties to it
                    var currentDiv = $('.highlighted');
                    var authorValue = currentDiv.children("span.refAuthor").text();
                    var authorLastValue = currentDiv.children("span.refAuthorLast").text();
                    var dateValue = currentDiv.children("span.refYear").text();
                    var currentId = $('.highlighted').attr('id');
     
                    var selectedText;
     
                    selectedText = "<a href=\"#citation_" + currentId + "\">(" + authorLastValue + ", " + authorValue + ", " + dateValue;
     
                    var pageValue = $('#pages').val();
                    if (pageValue != "") {
                        selectedText += " Pg " + pageValue;
                    }
     
                    currentDiv.removeClass("highlighted");
                    workLink.pages = pages.value;
                    selectedText += ")</a>";
                    workLink.selectedText = selectedText;
                    getRadWindow().close(workLink); //use the close function of the getRadWindow to close the dialog and pass the arguments from the dialog to the callback function on the main page.   
                }
                var myCallbackFunction = function (sender, args) { editor.pasteHtml(String.format("{4}{0}", args.pages, args.specialNote, args.className, args.name, args.selectedText)) }
     
            </script>
        </form>
    </body>
  10. Mike
    Mike avatar
    12 posts
    Member since:
    Mar 2013

    Posted 30 May 2013 Link to this post

    <dnn:TextEditor ID="DnnWysiwygEditor" runat="server" Width="820"/>
    <script type="text/javascript">
        RadEditorCommandList["References"] = function (commandName, editor, args) {
            // Execute your code here, provide it with any arguments that you need, etc.  
            //radopen("/citationlist.aspx", "RadWindow1");
     
            var elem = editor.getSelectedElement(); //returns the selected element.           
            if (elem.tagName == "A") {
                editor.selectElement(elem);
                argument = elem;
            }
            else {
                /*var content = editor.getSelectionHtml();
                var link = editor.get_document().createElement("A");
                link.innerHTML = content;
                argument = link;*/
                //remove links if present from the current selection - because of JS error thrown in IE
                editor.fire("Unlink");
     
                //remove Unlink command from the undo/redo list
                var commandsManager = editor.get_commandsManager();
                var commandIndex = commandsManager.getCommandsToUndo().length - 1;
                commandsManager.removeCommandAt(commandIndex);
     
                var content = editor.getSelectionHtml();
     
                var link = editor.get_document().createElement("A");
     
                //var qsTechnologyId = document.getElementById("qsCapture").value;
     
     
                link.innerHTML = content;
                argument = link;
            }
     
            var myCallbackFunction = function (sender, args) {
                editor.pasteHtml(String.format("{4}", args.pages, args.target, args.className, args.name, args.selectedText))
            }
            //This currently pulls the file for the diaglog to for the inline citation dialog box.
            //For future enhancement add it to the technologyDetails module as an ASCX
            editor.showExternalDialog(
            '/measurereferenceseditor.aspx?id=<%= Request.QueryString["id"] %>',
                argument,
                570,
                600,
                myCallbackFunction,
                null,
                'Insert Measure Reference',
                true,
                Telerik.Web.UI.WindowBehaviors.Close + Telerik.Web.UI.WindowBehaviors.Move,
                false,
                false);
        };
    </script>
    <style type="text/css">
    .reToolbar.Default .References
    {
            background-image: url(/images/resourceIcon_20x20.gif);
    }
    </style>
  11. Mike
    Mike avatar
    12 posts
    Member since:
    Mar 2013

    Posted 30 May 2013 Link to this post

    <table class="rwTable" cellspacing="0" cellpadding="0" style="height: 600px;"><tbody><tr class="rwTitleRow"><td class="rwCorner rwTopLeft"> … </td><td class="rwTitlebar" style="cursor: move;"><div class="rwTopResize"> … </div><table class="rwTitlebarControls" cellspacing="0" cellpadding="0" align="left" style="display: block;"> … </table></td><td class="rwCorner rwTopRight"> … </td></tr><tr class="rwContentRow"><td class="rwCorner rwBodyLeft"> … </td><td class="rwWindowContent rwExternalContent" valign="top"><iframe frameborder="0" name="Window" src="/measurereferenceseditor.aspx?id=108" style="width: 100%; height: 100%; border: 0px none; top: -10000px;" tabindex="0">#document<!DOCTYPE ><html xmlns="http://www.w3.org/1999/xhtml"> … </html></iframe></td><td class="rwCorner rwBodyRight"> … </td></tr><tr class="rwStatusbarRow" style="display: none;"> … </tr><tr class="rwFooterRow"> … </tr></tbody></table>
  12. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 04 Jun 2013 Link to this post

    Hi Mike,

    I tried to reproduce the problem outside of DNN environment using the provided sample code but to no avail.

    Please, note that version 5.0 or later of DNN uses the Professional provider of RadEditor, which is implementation of the DNN developers and it is not supported by Telerik. Our suggestion is to post your question in the DNN forums and contact the support of DNN for help.

    Regards,
    Dobromir
    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 their blog feed now.
Back to Top