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

Tag User in radeditor

1 Answer 129 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Bassam
Top achievements
Rank 1
Bassam asked on 20 Jan 2021, 11:16 AM

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

 

1 Answer, 1 is accepted

Sort by
0
Rumen
Telerik team
answered on 20 Jan 2021, 01:07 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Editor
Asked by
Bassam
Top achievements
Rank 1
Answers by
Rumen
Telerik team
Share this question
or