On-The-Fly find/replace of editor text

[john]

I am evaluating RadEditor for use in a product we are creating. One key feature I need is as follows. We want the user to be able to call on a set of "canned phrases" that they can include into the editor text as they are typing. The user should be able to include canned phrases by typing a special code into the editor. This code should be replaced with the corresponding canned phrase on-the-fly while the user continues to type the rest of their text.

So for example, the user can type something like "~N" in their text editor, and this will be replaced with "A bag of nails", or they type "~T" and it is replaced by "A set of new tires". They could therefore type the sentence: "The customer bought ~N on Thursday" and this would be expanded in the editor to "The customer bought a bag of nails on Thursday".

A key point is that it should happen automatically, instantly, and with no disruption to the user.

Any idea how I can achieve this please? I'm using IE6 or 7, and ASP.net2

[Rumen]

Hello John,

Basically the requested functionality is not supported out-of-the box by RadEditor and to achieve it you should use the underlying browser's API. Nevertheless, we will try to provide a solution for IE tomorrow.

Best regards,
Rumen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[john]

Thanks very much. I tried to make a version of this myself using the API, but I couldn't get it to work.

John

[Rumen]

Hi John,

Here is the promised solution for RadEditor for ASP.NET AJAX:

<script type="text/javascript">
function OnClientLoad(editor, args)
{                 
   editor.attachEventHandler("onkeyup", function(e)
   {                         
      var content = editor.get_html();
      var searchFor = "~m";
               
      if (content.toLowerCase().indexOf(searchFor) > -1)
      {
         var newContent = content.replace(/\~m/gi, "A bag of nails");
        
         editor.set_html(newContent);                         
      }
   });
}
</script>
<telerik:radeditor runat="server" ID="RadEditor1"
    OnClientLoad="OnClientLoad">
</telerik:radeditor>

The solution does not work well in all scenarios and we plan to further enhance it.

Best regards,
Rumen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[john]

Yes, you are right that it doesn't quite do the job properly. Specifically, if your cursor position is halfway through the text when you type the shortcut command "~m", the command is replaced by the canned phrase, but the cursor position is taken to the end of the text.

I need a way to store the cursor position, do the find/replace, then restore the cursor position.

John

[Tervel]

Hello John,

The editor does 50% of what you need by providing you with the pasteHtml method that will paste any content at the current selection in a cross-browser manner.

There are two more tasks that you need to solve on your own. Please note that in case you need to implement a cross-browser solution, the code will be very different for IE and FireFox due to the great differences in the rich-edit implementation of both browsers. Usually, it is a bit easier to implement the desired functionality in IE, and we suggest you start with it first.

Here is what you need to implement:

1. Attach to the editor's onkeyup event (already showed you how it's done).
2. Get the current cursor position by using browser-specific method.
In fact the editor can assist you nicely here, because you can use another of its cross-browser methods:
var range  = editor.getSelection().getRange();

This range object is specific for each browser, and its API will differ greatly, so from this point on you will need to write browser-specific code.

3. You will need to duplicate the range (var newRange = range.duplicate()), expand the duplicated range to encompass the previous couple of characters, and examine whether those are "~m".

4. In case that there is a match, all you need to do is make the duplicated range to be the selected one (newRange.select())

5. Then call editor.pasteHtml and your new content will be inserted right at the cursor location.


Here are some useful links with information on TextRange object implementation in different browsers and its usage:

Working with the Cursor Position.
Mouse Cursor Position
How to set/get caret position of a textfield in IE?
Inserting Text at the Cursor Position in a Textarea

IE
duplicate(), move(), moveStart(), moveEnd() and select()

FireFox
http://developer.mozilla.org/en/docs/DOM:Selection
http://www.mozilla.org/docs/dom/domref/dom_range_ref.html


Best regards,
Tervel
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[David Wilson]

Fantastic! Thanks very much. I now have this working exactly how I want it. Here is the finished script:

<

script type="text/javascript">

function

OnClientLoad(editor, args)

{

editor.attachEventHandler(

"onkeyup", function(e)

{

var range = editor.getSelection().getRange();

var newRange = range.duplicate();

newRange.moveStart(

'character', -3);

if (newRange.text == '~bl') {

newRange.select()

editor.pasteHtml(

"Blood Sample");

}

else if (newRange.text == '~cc') {

newRange.select()

editor.pasteHtml(

"Cell Count");

}

}

);

}

</

script>

[Christian]

David,

thanks! Great!

Could anybody tell me, why David´s funtions doesn´t work in firefox?

Thanks,

Chris