60 lines
2.1 KiB
JavaScript
60 lines
2.1 KiB
JavaScript
tinymce.PluginManager.add('googleMaps', function (editor, url) {
|
|
function insertMap(location) {
|
|
editor.insertContent('<iframe src="https://www.google.com/maps/embed/v1/place?q=' + location + '&key=YOUR_GOOGLE_MAPS_API_KEY" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen></iframe>');
|
|
}
|
|
|
|
function openDialog(existingLocation, callback) {
|
|
editor.windowManager.open({
|
|
title: 'Embed Google Map',
|
|
body: [
|
|
{
|
|
type: 'textbox',
|
|
name: 'location',
|
|
label: 'Location',
|
|
value: existingLocation || '',
|
|
},
|
|
],
|
|
onsubmit: function (e) {
|
|
callback(e.data.location);
|
|
},
|
|
});
|
|
}
|
|
|
|
editor.addButton('googleMaps', {
|
|
text: 'Embed Google Map',
|
|
icon: false,
|
|
onclick: function () {
|
|
openDialog('', insertMap);
|
|
},
|
|
});
|
|
|
|
editor.addMenuItem('googleMaps', {
|
|
text: 'Embed Google Map',
|
|
context: 'insert',
|
|
onclick: function () {
|
|
openDialog('', insertMap);
|
|
},
|
|
});
|
|
|
|
// Register a callback to run when the selection changes
|
|
editor.on('NodeChange', function (event) {
|
|
var selectedNode = event.element;
|
|
|
|
// Check if the selected node is an iframe with the Google Maps source
|
|
if (selectedNode.nodeName === 'IFRAME' && selectedNode.src.includes('google.com/maps/embed')) {
|
|
var existingLocation = selectedNode.src.split('q=')[1].split('&')[0];
|
|
|
|
// Add an "Edit Map" button to the toolbar
|
|
editor.addButton('editGoogleMap', {
|
|
text: 'Edit Google Map',
|
|
icon: false,
|
|
onclick: function () {
|
|
openDialog(existingLocation, function (editedLocation) {
|
|
// Replace the existing map with the edited map
|
|
selectedNode.src = 'https://www.google.com/maps/embed/v1/place?q=' + editedLocation + '&key=YOUR_GOOGLE_MAPS_API_KEY';
|
|
});
|
|
},
|
|
});
|
|
}
|
|
});
|
|
}); |