React HtmlEditor - mentions

Configures mentions.

Type:

Array<Object>

Default Value: null

component

An alias for the template property specified in React. Accepts a custom component. Refer to Using a Custom Component for more information.

dataSource

Provides data for the suggestion list.

Default Value: null

If you use DevExtreme ASP.NET MVC Controls, refer to the Bind Controls to Data article.

Depending on your data source, specify this option as described in the following list. The data source can provide string values or objects. In the latter case, also specify the displayExpr and valueExpr.

  • Data Array
    Assign the array to the dataSource option.

  • Read-Only Data in JSON Format
    Set the dataSource option to the URL of a JSON file or service that returns JSON data.

  • OData
    Implement an ODataStore.

  • Web API, PHP, MongoDB
    Use one of the following extensions to enable the server to process data according to the protocol DevExtreme widgets use:

    Then, use the createStore method to configure access to the server on the client as shown below. This method is part of DevExtreme.AspNet.Data.

    jQuery
    JavaScript
    $(function() {
        let serviceUrl = "https://url/to/my/service";
        $("#htmlEditorContainer").dxHtmlEditor({
            // ...
            mentions: [{
                dataSource: DevExpress.data.AspNet.createStore({
                    key: "ID",
                    loadUrl: serviceUrl + "/GetAction"
                })
            }]
        })
    });
    Angular
    app.component.ts
    app.component.html
    app.module.ts
    import { Component } from '@angular/core';
    import CustomStore from 'devextreme/data/custom_store';
    import { createStore } from 'devextreme-aspnet-data-nojquery';
    
    @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.css']
    })
    export class AppComponent {
        store: CustomStore;
        constructor() {
            let serviceUrl = "https://url/to/my/service";
            this.store = createStore({
                key: "ID",
                loadUrl: serviceUrl + "/GetAction"
            })
        }
    }
    <dx-html-editor ... >
        <dxi-mention [dataSource]="store"></dxi-mention>
    </dx-html-editor>
    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { AppComponent } from './app.component';
    
    import { DxHtmlEditorModule } from 'devextreme-angular';
    
    @NgModule({
        declarations: [
            AppComponent
        ],
        imports: [
            BrowserModule,
            DxHtmlEditorModule
        ],
        providers: [],
        bootstrap: [AppComponent]
    })
    export class AppModule { }
    Vue
    App.vue
    <template> 
        <DxHtmlEditor ... >
            <DxMention :data-source="store"></DxMention>
        </DxHtmlEditor>
    </template>
    
    <script>
    import 'devextreme/dist/css/dx.common.css';
    import 'devextreme/dist/css/dx.light.css';
    
    import CustomStore from 'devextreme/data/custom_store';
    import { createStore } from 'devextreme-aspnet-data-nojquery';
    import { DxHtmlEditor, DxMention } from 'devextreme-vue/html-editor';
    
    export default {
        components: {
            DxHtmlEditor,
            DxMention
        },
        data() {
            const serviceUrl = "https://url/to/my/service";
            const store = createStore({
                key: "ID",
                loadUrl: serviceUrl + "/GetAction"
            });
            return {
                store
            }
        }
    }
    </script>
    React
    App.js
    import React from 'react';
    import 'devextreme/dist/css/dx.common.css';
    import 'devextreme/dist/css/dx.light.css';
    
    import CustomStore from 'devextreme/data/custom_store';
    import { createStore } from 'devextreme-aspnet-data-nojquery';
    import HtmlEditor, { Mention } from 'devextreme-react/html-editor';
    
    const serviceUrl = "https://url/to/my/service";
    const store = createStore({
        key: "ID",
        loadUrl: serviceUrl + "/GetAction"
    });
    
    class App extends React.Component {
        render() {
            return (
                <HtmlEditor ... >
                    <Mention dataSource={store} />
                </HtmlEditor>
            );
        }
    }
    export default App;
  • Any other data source
    Implement a CustomStore.

NOTE

The stores are immutable. You cannot change their configurations at runtime. Instead, create a new store or DataSource and assign it to the dataSource option as shown in the articles about changing options in jQuery, Angular, React, and Vue.

displayExpr

Specifies the data field whose values should be displayed in the suggestion list.

Type:

String

|

Function

Function parameters:
item:

Object

The current mention's data object.

Return Value:

String

The displayed value.

Default Value: 'this'

Set this option to the name of a data field that provides displayed values...

displayExpr: "name"

... or to a function that returns the displayed value:

displayExpr: function(item) {
    // "item" can be null
    return item && 'ID: ' + item.id + ', Name: ' + item.name;
}

Do not change the default value if the data source contains primitives.

See Also

itemComponent

An alias for the itemTemplate property specified in React. Accepts a custom component. Refer to Using a Custom Component for more information.

itemRender

An alias for the itemTemplate property specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information.

itemTemplate

Specifies a custom template for suggestion list items.

Type:

template

Template Data:

Object

The item's data object.

Default Name: 'item'

See Also

marker

Specifies the prefix that a user enters to activate mentions. You can use different prefixes with different dataSources.

Type:

String

Default Value: '@'

minSearchLength

Specifies the minimum number of characters that a user should type to trigger the search.

Type:

Number

Default Value: 0

See Also

render

An alias for the template property specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information.

searchExpr

Specifies one or several data fields to search.

Type:

getter

|

Array<getter>

Default Value: 'this'

JavaScript
// Search a single data field
searchExpr: "name"
// Search several data fields
searchExpr: ["firstName", "lastName"]

searchTimeout

Specifies the delay between when a user stops typing and when the search is executed.

Type:

Number

Default Value: 500

See Also

template

Specifies a custom template for mentions.

Type:

template

Template Data:
Name Type Description
id

String

|

Number

The mention's identifier provided by the valueExpr.

marker

String

The marker that precedes the mention.

value any

The displayed value provided by the displayExpr.

Default Name: null

See Also

valueExpr

Specifies which data field provides unique values to the template's id parameter.

Type:

String

|

Function

Default Value: 'this'

Alternatively, you can specify the key in the store assigned to the dataSource.

NOTE
You cannot specify valueExpr as a function when the widget is bound to a remote data source. This is because valueExpr is used in a filter the widget sends to the server when querying data. Functions with custom logic cannot be serialized for this filter.
See Also