Does the RichTextEditor support to insert the google map?

[lorryl]

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

[Prince Oliver]

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  

URL: https://www.google.com/maps/place/CenturyLink+Field/@47.5951518,-122.3316394,17z/data=!4m12!1m6!3m5!1s0x54906aa3b9f1182b:0xa636cd513bba22dc!2sCenturyLink+Field!8m2!3d47.5951518!4d-122.3316394!3m4!1s0x54906aa3b9f1182b:0xa636cd513bba22dc!8m2!3d47.5951518!4d-122.3316394 

Regards, 

Prince