React HtmlEditor - mentions

View Demo

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:

  • 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.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.

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

• 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