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) {
alert(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.
DANGER!!!
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.
