← Back
Darkan editor docs (see demo)
Include Darkan API file as external resource:
<script type="text/javascript" src="https://darkan.eu/js/editors/standard/api/darkan_editor_api.js"></script>
Add an iframe to your page. It will be Darkan editor window.
<iframe id="darkan-iframe" width="1280" height="720"></iframe>
Test API key:
YOUR_API_KEY = 88e1a99e1531edad4a6c20179ffc3b575ef3aa3f
Get token with post request and hash your apikey with it.
Request:
POST: https://darkan.eu/apiParams: {
"apikey": "YOUR_API_KEY",
"action": "generateToken"
}
Response:
{
"token":"3Ww540Ob7o11hUWvapXaT7UX2I8kFtsh",
"message":"success",
"status":"success"
}
Your api key must be hashed using SHA1 method:
YOUR_HASHED_API_KEY = sha1(YOUR_API_KEY + token)
Create DarkanEditorAPI instance. Then set iframe as editor container. Access to project will be blocked if you wont send proper (hashed with token) api key. After setting the API key use laodProject method and set project ID. Example:
// get iframe element
var darkanIFrame = document.getElementById('darkan-iframe');
// initialize Darkan API
var darkanEditorAPI = DarkanEditorAPI.getInstance();
// set iframe as editor window
darkanEditorAPI.setIframe(darkanIFrame);
// send hashed API key to Darkan
darkanEditorAPI.setCredentials({ apikey:'YOUR_HASHED_API_KEY' });
// load project with darkanProjectId parameter
darkanEditorAPI.loadProject({ darkanProjectId:35 })
Events from Darkan can be listened:
darkanEditorAPI.addEventListener(DarkanEditorAPI.ON_MESSAGE, onMessage);
darkanEditorAPI.addEventListener(DarkanEditorAPI.ON_CONNECT, onConnect);
darkanEditorAPI.addEventListener(DarkanEditorAPI.ON_PAGE_ADDED, onPageAdded);
darkanEditorAPI.addEventListener(DarkanEditorAPI.ON_PAGES_REMOVED, onPagesRemoved);
darkanEditorAPI.addEventListener(DarkanEditorAPI.ON_PAGE_SELECTED, onPageSelected);
darkanEditorAPI.addEventListener(DarkanEditorAPI.ON_PROJECT_LOADED, onProjectLoaded);
darkanEditorAPI.addEventListener(DarkanEditorAPI.ON_PAGES_COLLECTION_CHANGED, onPagesCollectionChanged);
darkanEditorAPI.addEventListener(DarkanEditorAPI.ON_PROJECT_CHANGED, onProjectChanged);
function onMessage(e){
console.log('darkanEditorAPI onMessage', e);
}
function onConnect(e){
console.log('darkanEditorAPI onConnect', e);
}
function onPageAdded(e){
console.log('darkanEditorAPI onPageAdded', e);
}
function onPagesRemoved(e){
console.log('darkanEditorAPI onPagesRemoved', e);
}
function onPageSelected(e){
console.log('darkanEditorAPI onPageSelected', e);
}
function onProjectLoaded(e){
console.log('darkanEditorAPI onProjectLoaded', e);
}
function onPagesCollectionChanged(e){
console.log('darkanEditorAPI onPagesCollectionChanged', e);
}
function onProjectChanged(e){
console.log('darkanEditorAPI onProjectChanged’, e);
}
Methods to control the editor from the outside.
Go to next page
darkanEditorAPI.goToNextPage();
Go to the previous page
darkanEditorAPI.goToPrevPage();
Go to page by index order
darkanEditorAPI.goToPage({pageIndex:1});
Sort page
darkanEditorAPI.sortPages({pageIndex:1, position:0});