We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Its posible execute commands inside rich text editor, vue?

Thread ID:

Created:

Updated:

Platform:

Replies:

150906 Jan 23,2020 10:03 PM UTC Jan 29,2020 05:47 PM UTC Vue 4
loading
Tags: RichTextEditor
jose luis barajas
Asked On January 23, 2020 10:03 PM UTC

It´s possible to execute commands within the editor?

For example in your help


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 [Syncfusion]
Replied On January 24, 2020 09:54 AM UTC

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
Replied On January 25, 2020 08:02 PM UTC

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 [Syncfusion]
Replied On January 27, 2020 12:40 PM UTC

Hi Jose,  
   
Currently, we validating the reported scenario, will update further details shortly.  
   
Regards,
Indrajith
 


Indrajith Srinivasan [Syncfusion]
Replied On January 29, 2020 05:47 PM UTC

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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon