Vue.js Froala WYSIWYG Editor Wrapper

5.1.0 verified Sat Apr 25 auth: no javascript

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.

Common errors

error Failed to resolve component: froala ↓

cause 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 }.

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

cause 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.

error Froala Editor displays a watermark or stops functioning after a trial ↓

cause 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.

error Froala editor styles are missing or incorrect ↓

cause 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.

Warnings

breaking Versions 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.

gotcha The 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' }`.

gotcha The `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.

gotcha The `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.

Install

npm install vue-froala-wysiwyg

yarn add vue-froala-wysiwyg

pnpm add vue-froala-wysiwyg

Imports

VueFroala
wrong
```
const VueFroala = require('vue-froala-wysiwyg');
```
correct
```
import VueFroala from '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)
wrong
```
<froala-editor ...></froala-editor>
```
correct
```
<froala :tag="'textarea'" :config="config" v-model:value="model"></froala>
```
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

wrong

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

correct

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';

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.

Quickstart

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>
*/