WebForms version of the WinForms "Mentions" feature

[Jeff]

I recently discovered your "Mentions" feature in WinForms and am looking to produce a WebForms version of this.  I did get close to creating this functionality; very close, actually.  Building it within the RadEditor has proven to be problematic, as the HTML created by the Editor tended to wreak havoc on my code.  It was pretty granular, in that I used character counts to track and locate "tagged"/"mentioned" users.  

Is there a WebForms version of this coming soon?  If not, can you offer some guidance on how to overcome some issues the Editor creates?

 

[Rumen]

Hi Jeff,

A similar scenario is discussed in this forum thread: On-The-Fly find/replace of editor text. Please take a look at the solution provided at https://www.telerik.com/forums/on-the-fly-find-replace-of-editor-text#-c-9-PyGVEiOrNDHf3VM-g. It searches for ~m special combination of symbols and replaces them. In your scenario you need to display a popup/content menu with the items your end-user will choose from and depending on the chosen item to replace the ~m selection in the content area:

<script type="text/javascript">
    var oDoc = null;

    function OnClientLoad(editor, args) {

        oDoc = editor.get_document();

        editor.attachEventHandler("onkeyup", function (e) {
            var content = editor.get_html();
            var searchFor = "~m";

            if (content.toLowerCase().indexOf(searchFor) > -1) {

                var textRect = $telerik.getBounds(editor.getSelectedElement());
                alert("X: " + textRect.x + " Y: " + textRect.y);

            }
        });

    }

</script>
<telerik:RadEditor runat="server" ID="RadEditor1" OnClientLoad="OnClientLoad" ContentAreaMode="Div">
    <Content>
        Some text on line 1 <br /> Some text on line 2 <br /> Some text on line 3 <br />
    </Content>
</telerik:RadEditor>

Here is an example on how to replace the ~m string with other content. The <span id='marker'></span> HTML in the newContent variable is the marker which gets replaced and its sibling selected at cursor position. You can add your DIV element inside the newContent string so that it gets inserted at cursor position as shown below:

var newContent = content.replace(/\~m/gi, "<div>my div<span id='marker'></span> inserted at cursor position</div>");

  editor.set_html(newContent);

  var marker = editor.findContent("#marker"); //find the span marker with id='marker'
  var previous = marker[0].previousSibling; //get the previous sibling of the marker
  marker.remove(); //remove the marker

  var range = Telerik.Web.UI.Editor.DomRange.createRange(editor.get_document());
  range.setStart(previous, previous.length);
  range.setEnd(previous, previous.length);
  range.select();

 

 

Regards,
Rumen
Progress Telerik