Its posible execute commands inside rich text editor, vue?

[jose luis barajas]

It´s possible to execute commands within the editor?

For example in your help

https://ej2.syncfusion.com/vue/demos/#/material/rich-text-editor/ajax-load.html

for example in your help, there is a demo that calls an api, but the event is activated when the component is created.

Is there any option to interpret what is captured and in that sense call the api?

for example execute a command as follows

@ get_client = 123

and this brings me in the editor the customer information with id 123 from my api?

I see a very similar example with

the demo they have in

Tribute JS, but I want to know if there is any more advisable option to do it ...

[Indrajith Srinivasan]

Hi Jose, 

 

We have validated your query, we have integrated Tribute JS with our RichTextEditor. Based on your requirement we have implemented it in the Vue Lifecyle mounted rather than calling from an event. We have also prepared a sample for this.

Online Demo: https://ej2.syncfusion.com/vue/demos/#/material/rich-text-editor/tribute.html 

Following are the features available with Tribute JS: https://github.com/zurb/tribute

Sample: https://codesandbox.io/s/vue-template-vlpfq

Could you please try out the above solution and let us know if you face any difficulties.

Regards, 

Indrajith 

[jose luis barajas]

Thanks for your response

But my question is, is it possible to bring real-time data from an api, for example

When I typing @code123, this should connect to the api and bring me the response data in the editor.

Can you help me how to implement this in the codesandbox sample?

Loading remote data

If your data set is large or would like to pre filter your data you can load dynamically by setting the values to a function.

{
  //..other config options
  // function retrieving an array of objects
  values: function (text, cb) {
    remoteSearch(text, users => cb(users));
  },
  lookup: 'name',
  fillAttr: 'name'
}

You would then define a function, in this case remoteSearch, that returns your data from the backend.

function remoteSearch(text, cb) {
  var URL = 'YOUR DATA ENDPOINT';
  xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        var data = JSON.parse(xhr.responseText);
        cb(data);
      } else if (xhr.status === 403) {
        cb([]);
      }
    }
  };
  xhr.open("GET", URL + "?q=" + text, true);
  xhr.send();
}

[Indrajith Srinivasan]

Hi Jose,  

   

Currently, we validating the reported scenario, will update further details shortly.  

   

Regards,
Indrajith 

[Indrajith Srinivasan]

Hi Jose, 

 

Sorry for the delayed response. 

 

Have achieved getting the real-time data using the TributeJs. In the following example I have fetched the remote data from a DataEndpoint url into the RichTextEditor with CodeSandBox.

Sample: https://codesandbox.io/s/vue-template-9pp03

Can you please try out the above solution and let us know if you face any difficulties. 

 

Regards, 

Indrajith