This is a migrated thread and some comments may be shown as answers.

custom editor button and radwindow

11 Answers 183 Views

General Discussions

This is a migrated thread and some comments may be shown as answers.

Mike asked on 26 Mar 2013, 04:39 PM

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.

11 Answers, 1 is accepted

answered on 27 Mar 2013, 02:05 PM

dialog.png

dialogue-odd-images.png

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

answered on 04 Apr 2013, 01:22 PM

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.

answered on 30 May 2013, 06:41 PM

changedSource.png

defaultSource.png

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

answered on 30 May 2013, 06:41 PM

<head runat="server">

<title></title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

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

answered on 30 May 2013, 06:42 PM

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

answered on 30 May 2013, 06:47 PM

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