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

Does the RichTextEditor support to insert the google map?

Thread ID:

Created:

Updated:

Platform:

Replies:

141129 Nov 26,2018 09:41 AM UTC Nov 27,2018 09:00 AM UTC Angular - EJ 2 1
loading
Tags: RichTextEditor
lorryl
Asked On November 26, 2018 09:41 AM UTC

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 [Syncfusion]
Replied On 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 


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