Vue HtmlEditor - mentions

Configures mentions.

Selector: DxMention
Type:

Array<Object>

Default Value: null

dataSource

Provides data for the suggestion list.

Selector: data-source
Default Value: null

Depending on your data source, specify this property 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 property.

  • Read-Only Data in JSON Format
    Set the dataSource property 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 UI components 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.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.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
jQuery
  • The stores are immutable. You cannot change their configurations at runtime. Instead, create a new store or DataSource and assign it to the dataSource property as shown in the following help topic: Get and Set Properties.
Angular
  • The stores are immutable. You cannot change their configurations at runtime. Instead, create a new store or DataSource and assign it to the dataSource property as shown in the following help topic: Two-Way Property Binding.
Vue
  • The stores are immutable. You cannot change their configurations at runtime. Instead, create a new store or DataSource and assign it to the dataSource property as shown in the following help topic: Two-Way Property Binding.
React
  • The stores are immutable. You cannot change their configurations at runtime. Instead, create a new store or DataSource and assign it to the dataSource property as shown in the following help topic: Controlled Mode.

displayExpr

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

Selector: display-expr
Type:

String

|

Function

Function parameters:
item:

Object

The current mention's data object.

Return Value:

String

The displayed value.

Default Value: 'this'

Set this property 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

itemTemplate

Specifies a custom template for suggestion list items.

Selector: item-template
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.

Selector: min-search-length
Type:

Number

Default Value: 0

See Also

searchExpr

Specifies one or several data fields to search.

Selector: search-expr
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.

Selector: search-timeout
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.

Selector: value-expr
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 UI component is bound to a remote data source. This is because valueExpr is used in a filter the UI component sends to the server when querying data. Functions with custom logic cannot be serialized for this filter.
See Also