Setting up Doka Image Editor with Cordova

To set up the editor with Cordova it's highly recommended to use the included Cordova preset project as a starting point or guideline. It includes an example loading images from camera, photo library, or local file URL.

For compatibility with Android and iOS we need to make the following changes to the default Cordova project.

On iOS we need to be able to read from the file protocol

To load files Doka Image Editor needs the cordova-plugin-wkwebview-file-xhr plugin, run the following command to add it to your project.

add https://github.com/oracle/cordova-plugin-wkwebview-file-xhr

The Content Security Policy needs to allow the Blob protocol

We need to add blob: after img-src 'self' in the default CSP meta tag.

<meta
    http-equiv="Content-Security-Policy"
    content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' blob: data: content:;"
/>

File access plugin corrections

If we need to use the cordova-plugin-file plugin it's good to be aware that this plugin overwrites the browser native File, FileReader, and ProgressEvent APIs.

See GitHub issue #316 for details

Add the following script to backup native web APIs in the global object. The script is located in the www/js/ directory of the Cordova preset project.

Doka Image Editor will try to access the native API from the backup object before trying the native web API.

This script needs to run before the Cordova script is loaded.

<script src="js/doka-backup-webapi.js"></script>

Positioning of the editor modal

Depending on how our app is rendered we might have to reposition the editor modal. We can use the CSS custom properties described in the Modal layout entry in style docs to add some padding or limit the size.

Next steps

Depending on the JavaScript framework used in your project you can now follow the matching installation guide.