Monday, 14 October 2013

adding custom pop up in Telerik RadEditor

What we want to achieve through this :-

We basically want the user get some kind of tips while filling content using Telerik RadEditor

How can this be done/what all do we need

1.We need a div which can be shown and hide
2.We need some jqury/javacript and Telerik exposed API ,so that we can basically hook up few things
like
               a)Show hide div
               b)Do some custom validation
               c) Populate div with custom contents

 in the end we also want user should also able to key in text if he is not happy what we have provided with ..... now we see below


  1. RadEditor API function OnClientSelectionChange(editor, args)
  2. A div to show and hide contents
  3. To differentiate between  normal elements and the elements which needs to have auto suggest(popup) we will place these elements in span.
  4.  function OnClientSelectionChange(editor, args) {selElement = editor.getSelectedElement()
  5.  if (selElement != null && selElement.localName == 'span' ) { 
    //show popup
    }
    to determine popup offset  
    selElementOff = $(selElement)
    selElementOffset = selElementOff.offset();
selElementOffset.top,selElementOffset.left will give the values we are looking for .
in order to replace text once the user has clicked

var currentHtml = editor.get_html(true)
var selElement = editor.getSelectedElement()
var spanToReplace = selElement.outerHTML;
stringVal = $(event.target).text();
replaced = currentHtml.replace(spanToReplace, stringVal)
editor.set_html(replaced);

we can also add a input text box 




in order to get the complete code you can write to me on dotnetcrackpot@gmail.com











     

No comments:

Post a Comment