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

On-The-Fly find/replace of editor text

7 Answers 365 Views
Editor
This is a migrated thread and some comments may be shown as answers.
john
Top achievements
Rank 1
john asked on 13 Jun 2008, 03:57 PM
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

7 Answers, 1 is accepted

Sort by
0
Rumen
Telerik team
answered on 17 Jun 2008, 04:05 PM
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
0
john
Top achievements
Rank 1
answered on 17 Jun 2008, 04:07 PM
Thanks very much. I tried to make a version of this myself using the API, but I couldn't get it to work.

John
0
Rumen
Telerik team
answered on 20 Jun 2008, 04:48 PM
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
0
john
Top achievements
Rank 1
answered on 25 Jun 2008, 03:17 PM
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
0
Tervel
Telerik team
answered on 01 Jul 2008, 08:58 AM
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
0
David Wilson
Top achievements
Rank 1
answered on 01 Jul 2008, 09:42 AM
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>

0
Christian
Top achievements
Rank 1
answered on 26 Sep 2008, 11:21 PM
David,

thanks! Great!

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

Thanks,

Chris
Tags
Editor
Asked by
john
Top achievements
Rank 1
Answers by
Rumen
Telerik team
john
Top achievements
Rank 1
Tervel
Telerik team
David Wilson
Top achievements
Rank 1
Christian
Top achievements
Rank 1
Share this question
or