Getting Started
via npm
npm install jodit
via yarn
yarn add jodit
jsdelivr
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/jodit@latest/es2021/jodit.fat.min.css"
/>
<script src="https://cdn.jsdelivr.net/npm/jodit@latest/es2021/jodit.fat.min.js"></script>
unpkg
<link
rel="stylesheet"
href="https://unpkg.com/jodit@latest/es2021/jodit.min.css"
/>
<script src="https://unpkg.com/jodit@latest/es2021/jodit.min.js"></script>
cdnjs
Unfortunatelly, cdnjs does not have the latest version of Jodit. The latest version is 4.2.47.
https://github.com/cdnjs/cdnjs/issues/14261
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/jodit/4.2.47/es2021/jodit.min.css"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jodit/4.2.47/es2021/jodit.min.js"></script>
Usage
Jodit Editor can be initialized by calling the Jodit.make
method with the selector of the textarea element.
<textarea id="editor"></textarea>
<script>
const editor = Jodit.make('#editor', {
buttons: ['bold', 'italic', 'underline', '|', 'ul', 'ol']
});
</script>
Full example
You can use the following code to create a simple HTML page with Jodit Editor.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
name="viewport"
content="width=device-width, height=device-height, initial-scale=1.0,
maximum-scale=1.0"
/>
<link
href="https://cdn.jsdelivr.net/npm/jodit@latest/es2021/jodit.fat.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body>
<div id="jodit-editor"></div>
<script
type="text/javascript"
src="https://cdn.jsdelivr.net/npm/jodit@latest/es2021/jodit.fat.min.js"
></script>
<script>
Jodit.make('#jodit-editor');
</script>
</body>
</html>
Full example PRO version
Same as above, but with the PRO version.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
name="viewport"
content="width=device-width, height=device-height, initial-scale=1.0,
maximum-scale=1.0"
/>
<link
href="https://cdn.jsdelivr.net/npm/jodit-pro@latest/es2021/jodit.fat.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body>
<div id="jodit-editor"></div>
<script
type="text/javascript"
src="https://cdn.jsdelivr.net/npm/jodit-pro@latest/es2021/jodit.fat.min.js"
></script>
<script>
Jodit.make('#jodit-editor', {
license: '%your license key%'
});
</script>
</body>
</html>