Runtime¶

The saved HTML has no scripts: HTML cleaners remove them, and a block must work without them. The copy button of a block on the site, and the download button of a block offered as a file, come from a small runtime script (about 2 KB) that you add to the pages that show the content. Without it the blocks are shown as they are, without the buttons.

The block below is plain HTML saved by the editor, offered as a file named example; the runtime of this site added its buttons. Try them:

import { enhance } from 'jodit-plugin-code/runtime';

enhance();

With a script tag¶

<script src="https://cdn.jsdelivr.net/npm/jodit-plugin-code@1/dist/es2021/plugins/code/code-runtime.min.js" defer></script>

The script adds the buttons when the page is parsed. For blocks added later (a single-page application, content loaded on demand), call it again:

window.JoditCodeRuntime.enhance();

The runtime has builds for ES2015, ES2018 and ES2021, next to the plugin: dist/<build>/plugins/code/code-runtime.min.js.

With a bundler¶

import { enhance } from 'jodit-plugin-code/runtime';

enhance(); // the whole document
enhance(document.querySelector('#article')); // or a part of it

The runtime does not import Jodit or highlight.js, so it adds almost nothing to the bundle of the site.

API¶

enhance(root?, options?) adds the buttons to every block inside root (the document by default) that has none yet, and returns how many blocks it changed. Calling it again is safe.

Option	Default	Description
`label`	`'Copy code'`	Label and tooltip of the button
`copiedLabel`	`'Copied'`	Label for a moment after the code is copied
`downloadLabel`	`'Download'`	Label and tooltip of the download button

enhance(document, {
    label: 'Копировать',
    copiedLabel: 'Скопировано',
    downloadLabel: 'Скачать'
});

The copy button copies the text of the code without the line numbers. It uses the Clipboard API, and a fallback for pages without it (plain http, old browsers). The download button saves the same text as a file named after data-download (see Download as a file). Blocks inside an editor are skipped: the editor has buttons of its own, which are not saved.

The buttons have the classes jodit-code__copy and jodit-code__download; their hover color is the --jodit-code-copy-hover variable.