Question

I need to create like a panel made out of text for example

MY PANEL

    Drag any of the items below into the editor:

    CUSTOMER
    BUSINESS_PHONE
    BUSINESS_ADDRESS

So when dragging this into the editor it will add it in the following way

This is an example of how [[CUSTOMER]] has improved his business. 
You may contact them directly by dialing [[BUSINESS_PHONE]].

Its like creating a template. I am just not sure what to use to make this work.. We are using a RadEditor. Any suggestions would be much appreciated, please note that we can not change the editor since we use in many multiple places the solution if there is any has to integrate with the editor.

Thank you very much

Answer 1

I’ve done something similar to what you’re attempting to achieve, you will have to add some code to that instance of the radEditor, specifically add in some Javascript to your OnClientLoad function to catch the drop event and then handle the data appropriately. The tricky part is maintaining cursor positioning since you will have to parse the HTML once it’s dropped not before.

I would really suggest if possible to use an insert button and a list/object that you can select from, click the button and have it inserted at the cursor, it’s much easier to implement.

However here’s the code without the parsing of how I attached the drop event to the editor, I’m using a RadPanelBar to drag and drop from. This even will fire with anything drag and dropped into the editor, I’d also suggest using some kind of markup like <span class="dragableItem">BusinessPhone</span> that you can look for when parsing your content.

If you could make your list simply [[BusinessPhone]] and drag and drop that in that would obviously be the simplest solution, although not elegant.

function OnClientLoad(editor)
{

    var element = document.all ? editor.get_document().body : editor.get_document();
    //var eventHandler  = document.all ? "drop" : "dragdrop";
    var eventHandler = "drop";
    $telerik.addExternalHandler(element, eventHandler, function(e) {
        setTimeout(function() {
            contentDropped(editor);
        }, 300);
    });
//....
}


function contentDropped(editor)
{
    var content = editor.get_html();
    //parse the content of the editor  
    editor.set_html(content);
}