Using Froala as a Vue Visual HTML Editor for Markdown: A Guide

If you want to provide text formatting options for your users, you have two popular choices: a visual html editor or a Markdown editor. Froala offers both options. Essentially, Froala is a visual html editor with the ability to convert to a Markdown editor. Since the Froala V4.1 release, it has supported Vue 3. This makes it a powerful Vue 3 WYSIWYG Markdown editor component. In this article, we will learn how to use Froala as a Markdown editor in your Vue app.

What’s a Markdown editor?

A Markdown editor is a text editor that allows users to write using Markdown syntax. Markdown is a lightweight markup language that uses plain text formatting to create structured documents. It is easy to read and write, making it a popular choice for content creation. Markdown editors provide a user-friendly interface for writing and editing Markdown content. With a Markdown editor, users can create well-formatted documents without needing to learn complex HTML or CSS. It is a great tool for users who want a simple and efficient way to create and format content.

What is the difference between WYSIWYG and Markdown editors?

A WYSIWYG editor, which stands for “What You See Is What You Get”, allows users to create and edit content in a visual manner. Users can see the final appearance of the content as they are editing it, including formatting, images, and other elements. It provides a more intuitive and familiar experience for users who are not familiar with coding or markup languages.

On the other hand, a Markdown editor requires users to write content using Markdown syntax. Markdown is a plain text formatting language that uses simple syntax to indicate formatting elements such as headings, lists, links, and more.

Is Froala a WYSIWYG editor or a Markdown editor?

Froala is primarily a WYSIWYG editor, but it also has a Markdown plugin that you can use to enable editing content using Markdown syntax. This allows users to have the flexibility to choose between the two editing modes based on their preferences and needs.

Does Froala Support Vue 3?

Froala V4.1 supports Vue 3 out of the box. This means you can easily integrate Froala visual html editor into your Vue 3 app and take advantage of its powerful features. With the Froala Vue component, you can create a WYSIWYG editor or a Markdown editor in your Vue app with just a few lines of code.

How do we integrate the Froala WYSIWYG editor with Vue 3?

Check out this guide on integrating the Froala WYSIWYG editor with Vue 3 for a detailed explanation. In summary, you will need to install the Froala Vue package using npm.

npm install -g @vue/cli

vue create my-froala-vue-app

cd my-froala-vue-app

npm install vue-froala-wysiwyg --save

Once installed, you can import the Froala Vue component in the “main.js” file.

import { createApp } from 'vue'
import App from './App.vue'

//Import Froala Editor plugins
import 'froala-editor/js/plugins.pkgd.min.js';


// Import Froala Editor css files.
import 'froala-editor/css/froala_editor.pkgd.min.css';
import 'froala-editor/css/froala_style.min.css';


// Import Froala Editor component
import VueFroala from 'vue-froala-wysiwyg';

const app = createApp(App);          

app.use(VueFroala);
app.mount('#app');

Then add the component to your Vue template.

<template>
  <froala
    id="edit"
    :tag="'textarea'"
    :config="config"
  ></froala>

</template>
<script>
export default {
  name: "App",
  data() {
    return {
      config: {},
    };
  },
};
</script>

You can customize the editor’s toolbar, configure its options, and handle events such as content changes.

Froala also provides extensive documentation and examples to help you get started quickly.

How to use the Froala Vue WYSIWYG editor as a Vue Markdown editor?

By default, the Froala editor toolbar displays an option for switching between Markdown and the WYSIWYG editor. But in case you want to display the Markdown editor only, you will need to customize the editor as follows.

First, remove the editor toolbar by setting the “toolbarButtons“ API option to an empty array.

config: {
toolbarButtons: [""],
}

Then, on the initialized API event, toggle to the Markdown editor using the markdown.toggle() API method.

    config: {
        toolbarButtons: [""],
        events: {
          initialized: function () {
            // Do something here.
            // this is the editor instance.
            if (!this.markdown.isEnabled()) this.markdown.toggle();
          },
        },
      },

By doing this, you have integrated Froala into our app as a Vue Markdown editor.

Conclusion

Froala is a powerful Vue WYSIWYG editor. Using its Markdown plugin, you can allow users to create well-formatted content using Markdown syntax. Froala supports both WYSIWYG and Markdown editing modes, providing users with flexibility. Froala V4.1 supports Vue 3 out of the box, making it easy to integrate into your Vue app. You can install the Froala Vue package and import the Froala Vue WYSIWYG editor component to get started. The toolbar can be customized to display only the Markdown editor option. With Froala, you can create a user-friendly and efficient editing experience for your Vue app.

See a working example.