Tag User in radeditor

[Bassam]

hello,

Is there a way to tag a user from my db in radeditor/kendo

i need to display the list of users after clicking @ and filter based on typing.

i need it similar to facebook or devops editors.

thanks

 

[Rumen]

Hi Bassam,

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