Drag & Drop editor

Drag & Drop editor
Buy    $55.00

Version 1.03
Author ImpressPages
License: ImpressPages
Download count for paid plugins is not available

Integrate ImpressPages Drag & Drop editing to any website, built on any technology. Install ImpressPages with this plugin on a side of your project, add some JS and you are ready to go!


This plugin gives you power to integrate ImpressPages editor on any website. No matter if it is built using ImpressPages or other CMS / Framework. You can have Drag&Drop management on your website looking like this


Here is a demo URL. Please keep in mind that this is a public version. There may be any content inside (including a messy one).


How it works

DragDropEditor works as a separate software running alongside your existing project. It may be on the same host / domain, but may be on separate host and even under separate domain. It doesn't matter.

You have to add some JavaScript (read installation section) to your website. That JavaScript opens ImpressPages editor when user press "Edit" button or so. Editor opens in an iFrame, but user doesn't sees it. Resulting HTML is returned back to your JavaScript for later processing. Store it in the database to display when needed.


ImpressPages side

  1. Install standard ImpressPages installation alongside your existing project. It may be on the same host / domain or separate host and separate domain. It doesn't matter.
  2.  Install this plugin as you would do it with any other plugin: upload files & activate in Plugins section of admin.
  3. Enter secret phrase on the settings page of the Plugin

Your project side (client)

If you are inpatient, please follow to "Example" section bellow and then come back for more details.

You have to generate a management URL for each page you want to be edited using DragDropEditor plugin. Here is a PHP line that generates a management URL. This example is in PHP, but you can use any language to do this. Just avoid doing it in JavaScript as it will expose your $secret.

$impressInstallationUrl . 'edit/' . $userId . '/' . $pageId . '/' . md5($userId . $pageId . $Secret);

This will generate a secret URL. Anyone having this URL can access the content of that page on DragDropEditor installation. If you try to open this URL, yoy will see a blank page. Please read bellow about JavaScript needed to get use of this URL. You don't have to register $pageId / $userId in any way. DragDropEditor creates pages on the fly if new combination of $userId / $pageId is given. And vice versa. If you visit the same URL, you will get the data that has been edited the last time.

But that's just part of set up on your side as this doesn't cover how you should get the resulting HTML. And this is done by adding some JavaScript to your website.

To get the content back from the editor, you have to add following JS files to your project: jquery-2.1.1.min.js, easyXDM.min.js, dragDropEditor.js. You will find them in "CLIENT-EXAMPLE" folder of DragDropEditor plugin. Then you can initialize the editor using JavaScript function:

dragDropEditor.edit(editUrl, finishedEditing)

where editUrl is the URL we have generated above and finishedEditing is a callback that will be executd after user press 'Save'. Here is an example of callback:

function finishedEditing(html) {

That's it. It is up to you where to store given HTML and how to display it. Additionally we provide an example CSS (CLIENT-EXAMPLE/ipContent.css) that styles resulting HTML in a responsive manner.

If you want a Lithbox to work, add following files to your page:

  • colorbox.css
  • jquery-2.1.1.min.js
  • jquery.colorbox-min.js
  • colorboxInit.js

For map widget:

  • https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places&callback=ipGoogleMapsLoadedCallback
  • map.js

You will find all these files in CLIENT-EXAMPLE folder.


If you are using DragDropEditor to be used for your internal content management purposes accessible only by authorised personel you have trust in, you are fine and can skip the rest of this paragraph.

If you want to give Drag & Drop experience for the visitors of your website who may be interested in breaking your system, you have to sanitise the resulting HTML before displaying it. Because of the nature of the web, user can submit absolutely any HTML code including some JavaScript in it. That could be used to steal cookies from other website's users. So before storing HTML to the database, clean it up from any appearances of JavaScript. Again we provide an example for that in CLIENT-EXAMPLE/cleanup.php file.

Quick example

If you have completed "ImpressPages side" installation steps, then you can quickly do a test run. Plese open CLIENT-EXMAPLE/index.php file and enter $impressPagesUrl and $impressPagesSecret variables. Then upload CLIENT-EXAMPLE to your web hosting and access it in the browser. You will see how it works in action.

Other options

By default Html and Form widgets are disabled.

  • HTML - seems to be too powerful. You can turn it on if you like
  • Form - requires a bunch of JavaScript and ImpressPages infrastructure in the back-end to work. Won't work unless you do the implementation of the back-end.