v8.78.1

This is the archived documentation for Doka Image Editor v7.

Please visit pqina.nl/pintura/docs/ to see documentation for the latest version of Pintura Image Editor.

Module

Importing the JavaScript module

The doka.js file exports all Doka Image Editor submodules.

The Doka Image Editor module supports tree-shaking. While we might import the entire module in some of the documentation examples, in a real project we should only import the functionality we need.

We can synchronously import the Doka JavaScript module in our project like this.

<script type="module">
    import * as doka from './doka.js';
</script>

Or we can use a dynamic import to load the module asynchronously.

<script type="module">
    import('./doka.js').then((doka) => {});
</script>

We can also use the async/await pattern.

<script type="module">
    const doka = await import('./doka.js');
</script>

Loading the styles

Styles aren't included in the doka.js module so we'll need to load them separately. We can so by adding a external resource link element to the <head> of the page.

<head>
    <link href="doka.css" rel="stylesheet" />
</head>

If our JavaScript bundler supports it we can alternatively import the CSS file in one of our JavaScript modules.

import './doka.css';

Installing the IIFE version

We advise against using the IIFE version of Doka Image Editor and to instead use the JavaScript module version.

We can install the IIFE version of Doka Image Editor by adding it to the page with a <script> tag.

<script src="doka/doka-iife.js"></script>

<!-- The Doka Image Editor API is now available on the `window.doka` variable -->

The IIFE version automatically creates a window.doka variable which contains all its functionality.

console.log(window.doka);
// logs: { appendEditor: …, openEditor: …, setPlugins: …, … }

Global variables can also be accessed without prepending window

console.log(doka);
// logs: { appendEditor: …, openEditor: …, setPlugins: …, … }

To use the Doka Image Editor functionality we can use Destructuring Assignment or we can call functions directly on the doka object.

const { appendEditor } = doka;

appendEditor(/* arguments here */);

Or we can call functions directly on the doka object.

doka.appendEditor(/* arguments here */);

Instead of the spread operator ... we can use Object.assign

// with spread operator
openEditor({
    locale: {
        ...locale_en_gb,
        ...plugine_locale_en_gb,
    },
});

// with Object.assign()
openEditor({
    locale: Object.assign({}, locale_en_gb, plugine_locale_en_gb),
});

Please note that in all documentation examples we import functionality from the JavaScript module version. This is not possible with the IIFE version.

Instead use Destructuring Assignment or access functionality directly on the window.doka object (see examples above).