React HtmlEditor - mentions

View Demo

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:

  • DevExtreme.AspNet.Data
  • DevExtreme-PHP-Data
  • devextreme-query-mongodb

  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.

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

• valueExpr

See Also

• Custom Templates

See Also

• searchTimeout

See Also

• minSearchLength

See Also

• Custom Templates

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

See Also

• displayExpr