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. Image for the cookie policy date

Does the RichTextEditor support to insert the google map?

I didnot find the function in the synfcusion document, so I need to know, does the RichTextEditor support to insert the google map? 

1 Reply

PO Prince Oliver Syncfusion Team November 27, 2018 09:00 AM UTC

Hi Lorryl, 

Thank you for using Syncfusion products. 

To insert google maps into EJ2 RTE, we suggest you insert it through embedly url. Kindly refer to the following code snippet. 

[HTML] 
<div class="control-section"> 
  <ejs-richtexteditor id='defaultRTE' #toolsRTE id='alltoolRTE' [toolbarSettings]='tools' (actionComplete)="onComplete($event)">  
  </ejs-richtexteditor> 
</div> 

[TS] 
import { Component ,ViewChild} from '@angular/core'; 
import { ToolbarService, LinkService, ImageService, HtmlEditorService,RichTextEditorComponent } from '@syncfusion/ej2-angular-richtexteditor'; 
@Component({ 
    selector: 'control-content', 
    templateUrl: 'rich-text-editor.html', 
 
}) 
export class DefaultRTEComponent { 
    @ViewChild('toolsRTE') public rteObj: RichTextEditorComponent; 
    public tools: object = { 
        items: ['Bold', 'Italic', 'Underline', 'StrikeThrough', 
        '|', 'CreateLink' ] 
    }; 
    onComplete(args) 
    { 
         if (args.requestType === 'Links') { 
            if (args.elements[0].parentNode && args.elements[0].parentNode.tagName === 'A') { 
              let emberEle=document.createElement('blockquote') 
              emberEle.setAttribute('class', 'embedly-card') 
              emberEle.appendChild(args.elements[0].parentElement); 
              emberEle.appendChild(document.createElement('p')) 
              args.range.insertNode(emberEle) 
            }   
        } 
    } 
} 

You need to refer the below script in your sample to get this work as expected 

<script async src="https://cdn.embedly.com/widgets/platform.js" charset="UTF-8"></script> 

We have attached a sample for your reference, please find the sample at the following location: https://stackblitz.com/edit/angular-wxljrw 

To insert the map, kindly follow the below steps 

  • Click on the “Link” toolbar item
  • On the “Insert Link” dialog, paste the Google map Url  in input area.
  • Click on insert button and map will be inserted .

You can try this in the above sample with below demo URL  

Regards, 
Prince 


Loader.
Live Chat Icon For mobile
Up arrow icon