Registry / web-framework / vue-froala-wysiwyg

vue-froala-wysiwyg

library5.1.0jsnpmunverified

vue-froala-wysiwyg is an official Vue.js component that provides bindings for the Froala WYSIWYG HTML rich text editor. Currently at version 5.1.0, this package is specifically designed for Vue 3.x applications and integrates with Froala Editor version 3. It receives active maintenance with frequent patch releases addressing bug fixes, and periodic minor releases introducing new features like page breaks, export to Word, and enhanced table functionalities. A key differentiator is that the underlying Froala Editor is a commercial product known for its extensive feature set, mobile-first design, and enterprise-grade capabilities, requiring a license for production use. This wrapper simplifies the integration of the feature-rich Froala editor into Vue projects, handling component lifecycle and data binding.

web-framework

npm install vue-froala-wysiwyg

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · VUE-FROALA-WYSIWYG

vue-froala-wysiwyg

web-frameworkjavascriptv5.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.

VueFroala

✓ import VueFroala from 'vue-froala-wysiwyg';

✗ const VueFroala = require('vue-froala-wysiwyg');

For global registration with `app.use()`. The package is designed for Vue 3, so ESM imports are standard.

Froala component (as tag)

✓ <froala :tag="'textarea'" :config="config" v-model:value="model"></froala>

✗ <froala-editor ...></froala-editor>

After global registration with `app.use(VueFroala)`, the component is used as `<froala>`. The `v-model:value` binding is the Vue 3 explicit prop binding.

Froala Editor JS/CSS

✓ import 'froala-editor/js/plugins.pkgd.min.js'; import 'froala-editor/css/froala_editor.pkgd.min.css'; import 'froala-editor/css/froala_style.min.css';

✗ No direct import of 'froala-editor' package in main.js, assuming it's bundled or auto-imported by vue-froala-wysiwyg.

The core Froala Editor JavaScript and CSS must be manually imported into your application. This includes the main editor styles, theme styles, and any required plugins.

This quickstart demonstrates how to set up `vue-froala-wysiwyg` in a Vue 3 application, including global registration, importing necessary Froala Editor assets, and basic component usage with data binding and configuration.

import { createApp } from 'vue'; import App from './App.vue'; import VueFroala from 'vue-froala-wysiwyg'; // Import Froala Editor JS and CSS files directly import 'froala-editor/js/plugins.pkgd.min.js'; // Import specific third-party plugins if needed // import 'froala-editor/js/third_party/embedly.min'; // import 'froala-editor/js/third_party/font_awesome.min'; import 'froala-editor/css/froala_editor.pkgd.min.css'; import 'froala-editor/css/froala_style.min.css'; const app = createApp(App); app.use(VueFroala); app.mount('#app'); // App.vue /* <template> <div id="app"> <froala id="edit" :tag="'textarea'" :config="config" v-model:value="model"></froala> </div> </template> <script> export default { name: 'App', data () { return { config: { placeholderText: 'Edit Your Content Here!', events: { initialized: function () { console.log('Froala editor initialized'); } } }, model: '<h1>Hello, Froala!</h1><p>Edit Your Content Here!</p>' } } } </script> <style> body { font-family: sans-serif; margin: 20px; } #app { max-width: 800px; margin: 0 auto; border: 1px solid #eee; padding: 20px; } </style> */

Debug

Known issues

breakingVersions of `vue-froala-wysiwyg` from 3.0.0 onwards are exclusively compatible with Vue 3.x. Previous versions (v1.x, v2.x) supported Vue 1.x and Vue 2.x respectively. Attempting to use v5.x with a Vue 2 project will result in runtime errors.

fix

Ensure your project is running Vue 3.x. For new projects, always start with Vue 3. For existing Vue 2 projects, consider migrating to Vue 3 or using an older compatible version of this package if available.

affects: >=3.0.0

gotchaThe underlying Froala WYSIWYG HTML Editor is a commercial product and requires a license for production use. Without a valid license key, the editor will display a watermark or cease to function after a trial period.

fix

Purchase an appropriate Froala Editor license from the official website. The license key should then be passed in the editor's configuration object. For example: `{ licenseKey: 'YOUR_LICENSE_KEY' }`.

affects: >=3.0.0

gotchaThe `froala-editor` core JavaScript and CSS files, including plugins, must be explicitly imported in your application. The `vue-froala-wysiwyg` wrapper does not automatically bundle or import these assets. Missing imports will lead to a non-functional or unstyled editor.

fix

Add `import 'froala-editor/js/plugins.pkgd.min.js';`, `import 'froala-editor/css/froala_editor.pkgd.min.css';`, and `import 'froala-editor/css/froala_style.min.css';` to your main JavaScript entry file (e.g., `main.js` or `App.vue`). Ensure your build system (Webpack, Vite) is configured to handle CSS imports correctly.

affects: *

gotchaThe `immediateVueModelUpdate` option, when set to `true`, can lead to performance issues, especially with large or complex content, as it triggers a Vue model update on every key release.

fix

Use `immediateVueModelUpdate: false` (the default) unless real-time binding is absolutely critical and performance is not a concern. The model will still update on editor blur or when the editor's internal change events fire, which is often sufficient.

affects: *

Errors

Common errors & fixes

Failed to resolve component: froala

The Froala Vue component was not registered globally or locally in the current Vue application context.

fix

Ensure `app.use(VueFroala);` is called in your main application entry point (e.g., `main.js` for global registration). If using it locally in a component, you would need to import and register it in that component's `components` option, e.g., `import { FroalaEditorComponent } from 'vue-froala-wysiwyg'; components: { FroalaEditorComponent }`.

TypeError: Cannot read properties of undefined (reading 'registerPlugin') or similar errors related to FroalaEditor methods

The core Froala Editor JavaScript (`froala-editor/js/plugins.pkgd.min.js`) was not loaded or initialized before the `vue-froala-wysiwyg` component attempted to use its functionalities.

fix

Verify that `import 'froala-editor/js/plugins.pkgd.min.js';` (and any other necessary Froala JS files) is present and executed *before* your Vue application mounts or attempts to render the Froala component. Ordering of imports matters.

Froala Editor displays a watermark or stops functioning after a trial

This indicates that a valid Froala Editor license key has not been provided or is incorrect for the production environment.

fix

Obtain a valid Froala Editor license. Pass the `licenseKey` in the `config` prop of the `<froala>` component, for example: `:config="{ licenseKey: 'YOUR_LICENSE_KEY' }"`. Ensure the key matches the domain and usage rights of your application.

Froala editor styles are missing or incorrect

The Froala Editor CSS files are not being correctly loaded or processed by your build system (e.g., Webpack, Vite).

fix

Ensure `import 'froala-editor/css/froala_editor.pkgd.min.css';` and `import 'froala-editor/css/froala_style.min.css';` are present in your JavaScript entry file. Verify that your `webpack.config.js` or `vite.config.js` includes appropriate loaders (e.g., `style-loader`, `css-loader`, PostCSS, Sass loaders if applicable) for `.css` files.

Upgrade

Version history

5.1.0latest on npm

Audit

Dependencies

froala-editorrequiredThis package provides Vue bindings for the Froala WYSIWYG editor, which must be installed separately as its core JavaScript and CSS assets are directly imported and utilized by the wrapper. A specific Froala Editor version (v3) is implied by the compatibility statement.

Agent activity

7 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/froala/vue-froala-wysiwyg ↗

packagehttps://www.npmjs.com/package/vue-froala-wysiwyg ↗

homepagehttps://www.froala.com/wysiwyg-editor ↗