Days
Hours
Minutes
Seconds
x

New Froala Editor v4.5.1 is here – Learn More

Skip to content

The Future-Proof Vue Rich Text Editor

User-friendly, highly customizable, and packed with features. It's the most powerful, flexible and future-proof Vue rich text editor available and is designed to grow with your app.

240+

API Options

40+

Plugins

100+

API Events

600+

Github Stars

220+

API Methods

7,000+

Weekly Downloads

40+

Plugins

7,000+

Weekly downloads

240+

API Option

100+

API Events

220+

API Methods

TRUSTED BY: Samsung Apple IBM Amazon Ebay Intel Salesforce Cisco Thomson Reuters

Reimagine Vue Editing with the
Vue Rich Text Editor

Add Froala as your
Vue WYSIWYG editor

1
Install from NPM

npm install vue-froala-wysiwyg --save

2
Import the Component and the Stylesheets

    
import 'froala-editor/css/froala_style.min.css';
import 'froala-editor/css/froala_editor.pkgd.min.css';
import 'froala-editor/js/plugins.pkgd.min.js';
import VueFroala from 'vue-froala-wysiwyg';
...
app.use(VueFroala);
...

3
Use the editor component

<froala :tag='textarea' :config={config} ></froala>

Why use Froala as your
Vue Rich Text Editor?

Thinking about integrating Froala into your Vue app?

Frequently Asked Questions

Froala Vue WYSIWYG editor is a React component that allows you to easily integrate and use the Froala WYSIWYG HTML rich text editor in your Vue applications.

Froala editor is a lightweight and customizable editor that offers many features, such as inline editing, image and video upload, file management, code view, and more. You can use Froala editor to create and edit rich text content for websites, blogs, emails, or other web-based applications.

Furthermore, Integrating Froala in Vue is easy and takes a few lines of code.

Absolutely! We invite you to explore the capabilities of the Froala editor by taking advantage of our complimentary trial. Simply download the Vue SDK package to begin testing.

This trial includes all the features you would find in the paid versions, allowing you to fully assess its functionality. Please note, during the trial, the editor will display a Froala attribution watermark and a red ‘unlicensed’ banner, which will be removed once you purchase a Froala license plan.

The Froala Vue WYSIWYG Editor offers extensive customization options, allowing you to tailor the editor to your specific needs. You can modify the editor’s behavior and appearance by passing in a configuration object as a component attribute.

Here’s an example of how to customize the editor configuration:

<froala 
  :tag="'textarea'" 
  :config="myConfig" 
  v-model:value="editorContent">
  Initial editor content
</froala>

In the example above, the :config="myConfig" attribute is where you would pass in your custom configuration options. The myConfig object could look something like this:

data() {
  return {
    myConfig: {
      toolbarButtons: ['bold', 'italic', 'underline', 'fontFamily', 'fontSize', 'align'],
      heightMin: 200,
      heightMax: 500,
      placeholderText: 'Enter your content here...'
    }
  }
}

The configuration options you can customize include the toolbar buttons, minimum and maximum editor height, placeholder text, and much more. You can find a full list of available options in the Froala API documentation

By customizing the editor configuration, you can ensure that the Froala Vue WYSIWYG Editor fits seamlessly into your application and provides the exact functionality your users need.

The Froala Vue WYSIWYG editor supports using the editor on several special HTML tags, including <img>, <button>, <input>, and <a>. This allows you to easily integrate the editor functionality with these common UI elements.

To use the editor on one of these special tags, you can specify the tag prop on the <froala> component, like this:

<froala :tag="'img'" v-model:value="imgModel"></froala>

In this example, the Froala editor is applied to an <img> element. The v-model:value prop is used to bind the editor’s content to a data property called imgModel.

The imgModel should be an object that contains the necessary attributes for the special tag. For example, with an <img> tag, the imgModel object might look like this:

imgModel: {
  src: require('./image.jpg')
}

This ensures that the image source and any other required attributes are properly set on the <img> element when the editor content is rendered.

You can follow a similar approach for the other supported special tags, such as <button>, <input>, and <a>. Just make sure the v-model:value bound object contains the appropriate attributes for each tag type.

For more details on using special tags with the Froala Vue WYSIWYG editor, be sure to check the Vue SDK documentation.

To display content created with the froala editor use the froalaView component.

<froala v-model:value="content"></froala>
<froalaView v-model:value="content"></froalaView>

 

Fit in Any Kind of Vue Projects

Let Froala power your editing needs

Unlimited users and developers no matter which plan you choose. For any questions, contact us or checkout our Help Center

G2's top WYSIWYG editor for three years in a row

G2 Leader summer 2023
G2 Leader Fall 2023
G2 Leader winter 2023
G2 Leader spring_2024
G2 Leader summer 2024
G2 Leaded Fall 2024
G2 Leaded Winter 2024