For your convenience I prepared an example demonstrating the requested solution. Here it is:
<telerik:RadEditor ID="RadEditor1" OnClientLoad="OnClientLoad" runat="server">
<ImageManager ViewPaths="~/Images" UploadPaths="~/Images" />
</telerik:RadEditor>
<script type="text/javascript">
function OnClientLoad(editor) {
var tree = $find("<%= RadListBox1.ClientID %>");
makeUnselectable(tree.get_element());
}
function OnClientNodeDragStart() {
setOverlayVisible(true);
}
function OnClientNodeDropping(sender, args) {
var editor = $find("<%=RadEditor1.ClientID%>");
var event = args.get_domEvent();
document.body.style.cursor = "default";
var result = isMouseOverEditor(editor, event);
if (result) {
var itemValue = sender.get_selectedItem().get_value();
editor.setFocus();
editor.pasteHtml(itemValue);
}
setOverlayVisible(false);
}
function OnClientNodeDragging(sender, args) {
var editor = editor = $find("<%=RadEditor1.ClientID%>");
var event = args.get_domEvent();
if (isMouseOverEditor(editor, event)) {
document.body.style.cursor = "hand";
}
else {
document.body.style.cursor = "no-drop";
}
}
/* ================== Utility methods needed for the Drag/Drop ===============================*/
//Make all treeview nodes unselectable to prevent selection in editor being lost
function makeUnselectable(element) {
var nodes = element.getElementsByTagName("*");
for (var index = 0; index < nodes.length; index++) {
var elem = nodes[index];
elem.setAttribute("unselectable", "on");
}
}
//Create and display an overlay to prevent the editor content area from capturing mouse events
var shimId = null;
function setOverlayVisible(toShow) {
if (!shimId) {
var div = document.createElement("DIV");
document.body.appendChild(div);
shimId = new Telerik.Web.UI.ModalExtender(div);
}
if (toShow) shimId.show();
else shimId.hide();
}
//Check if the image is over the editor or not
function isMouseOverEditor(editor, events) {
var editorFrame = editor.get_contentAreaElement();
var editorRect = $telerik.getBounds(editorFrame);
var mouseX = events.clientX;
var mouseY = events.clientY;
if (mouseX < (editorRect.x + editorRect.width) &&
mouseX > editorRect.x &&
mouseY < (editorRect.y + editorRect.height) &&
mouseY > editorRect.y) {
return true;
}
return false;
}
</script>
<telerik:RadListBox ID="RadListBox1" runat="server" Width="200px" Height="200px"
AllowTransfer="true" AllowReorder="true" AutoPostBackOnReorder="true" EnableDragAndDrop="true"
OnClientDragging="OnClientNodeDragging"
OnClientDropping="OnClientNodeDropping"
OnClientDragStart="OnClientNodeDragStart"
>
<Items>
<telerik:RadListBoxItem Text="Argentina" />
<telerik:RadListBoxItem Text="Australia" />
<telerik:RadListBoxItem Text="Brazil" />
<telerik:RadListBoxItem Text="Canada" />
<telerik:RadListBoxItem Text="Chile" />
<telerik:RadListBoxItem Text="China" />
<telerik:RadListBoxItem Text="Egypt" />
<telerik:RadListBoxItem Text="England" />
<telerik:RadListBoxItem Text="France" />
<telerik:RadListBoxItem Text="Germany" />
<telerik:RadListBoxItem Text="India" />
<telerik:RadListBoxItem Text="Indonesia" />
<telerik:RadListBoxItem Text="Kenya" />
<telerik:RadListBoxItem Text="Mexico" />
<telerik:RadListBoxItem Text="New Zealand" />
<telerik:RadListBoxItem Text="South Africa" />
</Items>
</telerik:RadListBox>