On-The-Fly find/replace of editor text

8 posts, 0 answers
  1. john
    john avatar
    8 posts
    Member since:
    Jun 2008

    Posted 13 Jun 2008 Link to this post

    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
  2. Rumen
    Admin
    Rumen avatar
    12851 posts

    Posted 17 Jun 2008 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. john
    john avatar
    8 posts
    Member since:
    Jun 2008

    Posted 17 Jun 2008 Link to this post

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

    John
  5. Rumen
    Admin
    Rumen avatar
    12851 posts

    Posted 20 Jun 2008 Link to this post

    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
  6. john
    john avatar
    8 posts
    Member since:
    Jun 2008

    Posted 25 Jun 2008 Link to this post

    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
  7. Tervel
    Admin
    Tervel avatar
    1337 posts

    Posted 01 Jul 2008 Link to this post

    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
  8. David Wilson
    David Wilson avatar
    2 posts
    Member since:
    Jun 2008

    Posted 01 Jul 2008 Link to this post

    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>

  9. Christian
    Christian avatar
    16 posts
    Member since:
    Mar 2008

    Posted 26 Sep 2008 Link to this post

    David,

    thanks! Great!

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

    Thanks,

    Chris
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017