DevExtreme - HTML Editor - Mentions (v19.1)

Good news for users of our DevExtreme HTML Editor widget: the new Mentions functionality is available starting with v19.1. It is a special auto-complete mechanism that triggers when the user types specific prefixes. This feature is common in many web apps today and you can now achieve the same for your own projects.

As usual, the features described in this blog post apply to all platforms supported by DevExtreme, including Angular, Vue, React, jQuery and ASP.NET MVC and ASP.NET Core.

Suggestion Lists

As you can tell from the image, multiple single-character prefixes – they are called markers – are supported: @ for people and # for issues are used in the example. Each marker is associated with its own datasource, which can work with either local or remote data. You can also configure various other details per marker, such as the minimum number of characters a user has to type after the marker before the popup content is filtered, and of course the data fields that will be searched and displayed.

The image also shows an example for the itemTemplate, which is responsible for the formatting of items in the suggestion list.

Finally, it is also possible to change the appearance of a mention in the document by setting the template. For example:

mentions: [{
  ...,
  displayExpr:  'Name',
  valueExpr: 'ID',
  template: ({ id, value }) => `<a href="https://.../users/${id}>${value}</a>"`
}]

Mention Template

Try It Yourself

The public beta version of v19.1 includes the Mentions feature. Use the npm pre-release package:

npm install --save devextreme@19.1-next

What Do You Think?

We appreciate your feedback! Please feel free to comment below or to take part in the discussion in this GitHub issue. Your response to this quick survey would also be very useful:

Join The Webinar

If you’d like to see all the new features introduced in v19.1, please sign up for our upcoming webinar using this link: Sign Up For DevExtreme v19.1 Webinar

5 comment(s)
Suter Sandro
Suter Sandro

Does this also exist in Winforms?

10 May, 2019
Peter CaoZheng
Peter CaoZheng

Does this also exist in Winforms? +1

11 May, 2019
Oliver Sturm (DevExpress)
Oliver Sturm (DevExpress)

This feature is not available in our WinForms suite yet. The team has been made aware of your request. Thank you!

13 May, 2019
Steve Sharkey
Steve Sharkey

Perhaps your surveys should have a special Winforms+1 button for any feature you advertise that is non-winforms... I can think of several instances where I would use this functionality (but alas most of my development is still winforms based).

13 May, 2019
Thomas Kastner
Thomas Kastner

WinForms +1

13 May, 2019

Please login or register to post comments.