jodit-vue

library3.1.0jsnpmunverified

jodit-vue is a Vue.js wrapper component for the Jodit WYSIWYG editor, facilitating its integration into Vue 2 and Vue 3 applications. The package's current stable version is 3.1.0, designed specifically for Vue 3 projects. Earlier major versions, such as 2.x, cater to Vue 2 compatibility. This library offers a declarative approach to embed the rich text editor, managing its lifecycle and data binding through the standard `v-model` directive. It supports extensive customization, allowing developers to define toolbar buttons, add custom extensions, and apply comprehensive Jodit editor configurations via a dedicated `config` prop. A key differentiator is its minimalist design: it does not bundle Jodit's core CSS styles, requiring users to explicitly import `jodit/build/jodit.min.css`. This design choice maintains a lightweight wrapper while ensuring flexibility for diverse build environments.

web-framework serialization

npm install jodit-vue

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · JODIT-VUE

jodit-vue

web-frameworkjavascriptv3.1.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

JoditEditor

✓ import { JoditEditor } from 'jodit-vue'

✗ import JoditEditor from 'jodit-vue'

JoditEditor is a named export for direct component usage in templates.

jodit/build/jodit.min.css

✓ import 'jodit/build/jodit.min.css'

✗ import 'jodit-vue/dist/jodit.min.css'

The core Jodit CSS must be imported directly from the 'jodit' package, not 'jodit-vue'.

JoditVue (global install)

✓ import JoditVue from 'jodit-vue'; Vue.use(JoditVue)

✗ import { JoditVue } from 'jodit-vue'; Vue.use(JoditVue)

For global installation (primarily Vue 2 applications), 'jodit-vue' is imported as a default export.

This quickstart demonstrates the setup of `jodit-vue` in a Vue 3 application, including the essential CSS import, component registration, and basic usage with `v-model` and a custom configuration object for the toolbar.

import { createApp, ref } from 'vue'; import 'jodit/build/jodit.min.css'; import { JoditEditor } from 'jodit-vue'; const App = { components: { JoditEditor }, setup() { const content = ref('<h1>Welcome to Jodit Vue!</h1><p>Start editing your rich text content here.</p>'); const config = { buttons: ['bold', 'italic', 'underline', '|', 'ul', 'ol', '|', 'link', 'image', '|', 'source'], height: 300, showCharsCounter: false, showWordsCounter: false, showXPathInStatusbar: false }; return { content, config }; }, template: ` <div style="padding: 20px;"> <h2>My Rich Text Editor</h2> <JoditEditor v-model="content" :config="config" /> <h3>Current Content:</h3> <div style="border: 1px solid #ccc; padding: 10px; min-height: 100px;"> {{ content }} </div> </div> ` }; createApp(App).mount('#app');

Debug

Known issues

breakingMajor version 3 of `jodit-vue` is designed exclusively for Vue 3 applications. Attempting to use `jodit-vue` v3.x in a Vue 2 project will result in runtime errors due to incompatible Vue APIs.

fix

For Vue 2 applications, you must use `jodit-vue` version 2.x. Ensure your `package.json` specifies the correct major version range (e.g., `"jodit-vue": "^2.0.0"` for Vue 2 or `"jodit-vue": "^3.0.0"` for Vue 3).

affects: >=3.0.0

gotchaThe `jodit-vue` wrapper does not bundle the Jodit Editor's CSS styles. The editor will appear unstyled and functionally incomplete unless the necessary CSS file is explicitly imported.

fix

Always include `import 'jodit/build/jodit.min.css'` in your application's entry point or component where the editor is used. Ensure `jodit` is installed as a dependency to provide this file.

affects: >=2.0.0

gotchaCustomizing the editor's behavior, such as toolbar buttons or specific features, requires passing a `config` object to the component. Without it, the editor will load with all default features, which might not be desirable for all use cases.

fix

Pass a `config` prop to the `JoditEditor` component. Refer to the Jodit documentation for available configuration options. For example: `<JoditEditor :config="{ buttons: ['bold', 'italic'] }" />`.

affects: >=2.0.0

Errors

Common errors & fixes

Module not found: Error: Can't resolve 'jodit/build/jodit.min.css'

The core Jodit Editor CSS file is missing because the 'jodit' package is not installed or the import path is incorrect.

fix

Ensure `jodit` is installed (`npm install jodit --save` or `yarn add jodit`) and verify the import statement is `import 'jodit/build/jodit.min.css'`.

Editor appears unstyled or with broken UI elements.

The required Jodit Editor CSS (`jodit.min.css`) has not been imported into the application.

fix

Add `import 'jodit/build/jodit.min.css'` to your application's main entry file (e.g., `main.js`/`main.ts`) or the component where `JoditEditor` is used.

[Vue warn]: Component provided with 'render' function but no 'template'.

This warning typically occurs when using `jodit-vue` v3.x (designed for Vue 3) in a Vue 2 application, or vice-versa, due to incompatible rendering contexts.

fix

Verify your `jodit-vue` version matches your Vue version. Use `jodit-vue@^2.0.0` for Vue 2 and `jodit-vue@^3.0.0` for Vue 3. Adjust your `package.json` accordingly and reinstall dependencies.

Upgrade

Version history

3.1.0latest on npm

Audit

Dependencies

joditrequiredProvides the core WYSIWYG editor functionality and required CSS assets. Must be installed alongside jodit-vue.

vuerequiredPeer dependency for the Vue component framework. Version 3.x for jodit-vue v3.x, and Vue 2.x for jodit-vue v2.x.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/WendellAdriel/jodit-vue ↗

packagehttps://www.npmjs.com/package/jodit-vue ↗

homepagehttps://jodit.net ↗