Revolutionizing Web Editing with Froala’s Special Tags in Vue App

The people who are crazy enough to think they can change the world are the ones who do

— Steve Jobs.

When the Froala WYSIWYG editor idea started, many WYSIWYG editors were already on the market. The goal wasn’t to add another standard editor. We were obsessed with offering an out-of-box experience that would revolutionize web editing. It was founded on improving the drawbacks and exposing the strengths of the pre-existing editors, including TinyMCE.

From introducing the most mobile-friendly editor toolbar to being the first WYSIWYG editor with the popup with formatting controls appearing the same on mobile devices as on desktops, Froala continued pushing the boundaries in ways never seen before in the WYSIWYG editor market. With every update and new feature added, the underlying goal was to enhance the web editing process for the end-users and developers alike. Ensuring that, as Steve Jobs said, we are “the ones who do”.

Froala initialization modes

While other WYSIWYG editors were developed to provide the same user interface regardless of the HTML element they initialized on, Froala innovated this, making initializing the editor on different HTML elements generate a different user interface suitable for editing that element specifically.

For example, initializing the editor on the HTML <a> element will not open the full editor with the hundreds of toolbar buttons. Instead, it will display Froala’s Edit Link popup, which easily lets you change the URL and display the text of the hyperlink. This focus on user-centered design facilitated ease of interaction and enhanced the user experience tenfold.

<script>

var editor = new FroalaEditor('a#example');

</script>

If you prefer a more comprehensive editing experience, you can easily initialize the editor on a ‘textarea’ or a regular ‘div’ element.

<script>

var editor = new FroalaEditor('textarea#example');

</script>

In <img> element instance, when Froala initializes, it brings up a simple window to replace the image, adjust its alignment, insert alt text, and other relevant properties.

<script>

var editor = new FroalaEditor('img#example');

</script>

Besides the <img> and <a> HTML tags, it also outputs a specific user interface when used on the <button> and <input> elements.

This flexibility to adopt initiative UI depends on the specific HTML element it initializes upon distinguishing Froala from many of its competitors. It underlines our commitment to offering a highly personalized experience that eases and expedites the editing process for the end user.

This flexibility allows Froala to be used as a standalone Image uploader or in building a modern drag-and-drop web page builder.

How to implement initialization modes in the Vue app?

First, let us quickly recap how we can add Froala to a Vue app. It is a simple 3-step process:

3. Install the Froala package via NPM. Use the command

   npm install vue-froala-wysiwyg

   in the terminal to download and add it to your project’s node_modules folder.

4. After successfully installing the package, you need to import it into your main.js file. Add the code below to complete this:

   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");

5. Finally, to display the editor, all you need to the Froala component inside your template

   <froala tag=’textarea’ :config="config"></froala>

   See the following complete example:

   <template>
     <img alt="Vue logo" src="./assets/logo.png">
     <froala id="edit" :tag="'textarea'" :config="config" v-model:value="model"></froala>
   </template>
   
   <script>
   
   export default {
     name: 'App',
     data () {
       return {
         config: {
             toolbarButtons: {
   
               'moreText': {
   
                 'buttons': [ 'italic', 'underline', 'bold', 'strikeThrough', 'subscript', 'superscript', 'fontFamily', 'fontSize', 'textColor', 'backgroundColor', 'inlineClass', 'inlineStyle', 'clearFormatting']
   
               },
   
               'moreParagraph': {
   
                 'buttons': ['alignLeft', 'alignCenter', 'formatOLSimple']
   
               },
   
               'moreRich': {
   
                 'buttons': ['insertLink', 'insertImage', 'insertVideo', 'insertTable', 'emoticons', 'fontAwesome', 'specialCharacters', 'embedly', 'insertFile', 'insertHR']
   
               },
   
               'moreMisc': {
   
                 'buttons': ['undo', 'redo', 'fullscreen', 'print', 'getPDF', 'spellChecker', 'selectAll', 'html', 'help'],
   
                 'align': 'right',
   
                 'buttonsVisible': 2
   
               }
   
             },
           events: {
             initialized: function () {
               console.log('initialized')
             }
           }
         },
         model: '<i>Edit Your Content Here!</i>'
       }
     }
   }
   </script>
   
   <style>
   #app {
     font-family: Avenir, Helvetica, Arial, sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     text-align: center;
     color: #2c3e50;
     margin-top: 60px;
   }
   </style>
   

The Froala Vue component attributes are:

•  `tag` – This should match the HTML element on which you want to initialize the editor. By default, the tag is ‘textarea’. We set its value to ‘a’, ‘img’, ‘button’, or ‘input’ which we call the special tags, to implement the other initialization modes.
•  `config` – This is an optional attribute where you can pass the Froala configuration options.
•  v-model – Using this with the ‘froala’ component, Vue can handle automatic synchronization between the component and its underlying data model. This proves useful when integrating Froala alongside other components within your Vue application, as it promotes interactive and dynamic content creation.

Special tags

The Froala editor Vue special tags are img, button, input, and a tags. using these tags you can have different initialization modes. In this case, there are some considerations:

3. The model must be an object containing the attributes for your special tags.
4. The model can contain a special attribute named innerHTML which inserts innerHTML in the element, for example, If you are using ‘button’ tag, you can specify the button text like this

   buttonModel: {
   
   innerHTML: 'Click Me'
   
   }

5. Froala provides an additional option when using special tags. This option is
   vueIgnoreAttrs: (default: null) This option is an array of attributes that you want to ignore when the editor updates the v-model:

   config: {
   
   vueIgnoreAttrs: ['class', 'id']
   
   }

Examples of using special tags:

1. Img

<template>
  <froala
    id="edit"
    :tag="'img'"
    :config="imageOptions"
    v-model:value="imgModel"
  ></froala>
</template>

<script>
export default {
  name: "app",

  data() {
    return {
      imgModel: {
        src: "https://fakeimg.pl/350x200/?text=Click%20on%20me",
      },

      imageOptions: {
        vueIgnoreAttrs: ["style"],
      },
    };
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  text-align: center;

  color: #2c3e50;

  margin-top: 60px;
}
</style>

In the above example,  we have set the :tag attribute to “img”.

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

The model must be an object containing the attributes for your special tags. In the case of the img element, you must declare the “src“ attribute so you can render the image.

imgModel: {

src: "https://fakeimg.pl/350x200/?text=Click%20on%20me",

}

Note, the model will change as the attributes change during usage.

and we used the special option vueIgnoreAttrs to prevent “Style” from being updated in the model.

imageOptions: {

vueIgnoreAttrs: ["style"],

},

When you run your Vue app, you’ll see an image. Clicking on it will open the Froala edit image popup, allowing you to replace the image, add ALT text, insert a caption, and more.

2. Button

<template>
  <froala id="edit" :tag="'button'" v-model:value="buttonModel"></froala>
</template>

<script>
export default {
  name: "app",

  data() {
    return {
      buttonModel: {
        innerHTML: "Click Me",
      },
    };
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  text-align: center;

  color: #2c3e50;

  margin-top: 60px;
}
</style>

In the above example, you can see we have set the :tag attribute to “button”.

<froala id="edit" :tag="'button'" v-model:value="buttonModel"></froala>

We used the model’s special attribute “innerHTML” to specify the button

buttonModel: {

innerHTML: 'Click Me'

},

As the editor changes the button text, the innerHTML attribute from buttonModel model will change too.

When you run your Vue app, you’ll see a button with the text ‘Click me‘. Clicking on it will open a popup to update the button text.

3. input tag

<template>
  <froala id="edit" :tag="'input'" v-model:value="inputModel"></froala>
</template>

<script>
export default {
  name: "app",

  data() {
    return {
      inputModel: {
        placeholder: "I am an input!",
      },
    };
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  text-align: center;

  color: #2c3e50;

  margin-top: 60px;
}
</style>

In the above example, you can see we have set the :tag attribute to “input”.

<froala id="edit" :tag="'input'" v-model:value="inputModel"></froala>

We used the model to set the input placeholder attr

inputModel: {

placeholder: 'I am an input!'

},

This will show an input field with the placeholder text “I am an input!”. Clicking on it will open a popup to update the input text.

4. a tag

<template>
  <froala id="edit" :tag="'a'" v-model:value="linkModel"></froala>
</template>

<script>
export default {
  name: "app",

  data() {
    return {
      linkModel: {
        href: "https://www.froala.com/wysiwyg-editor",
      },
    };
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  text-align: center;

  color: #2c3e50;

  margin-top: 60px;
}
</style>

In the above example, you can see we have set the :tag attribute to “a”.

  <froala id="edit" :tag="'a'" v-model:value="linkModel"></froala>

We used the model to assign the href attribute to the desired URL.

      linkModel: {
        href: "https://www.froala.com/wysiwyg-editor",
      },

This will show a link named “My link” and has the URL “https://www.froala.com/wysiwyg-editor”. When this link is clicked, the Froala edit link popup will open allowing the link’s properties to be updated.

Easily edit multiple HTML elements

These examples illustrate how you can simplify the task of revising HTML tags in your Vue app while maintaining a dependable link to v-model values. This enables faster, more reactive application updates with minimal effort. Whether it’s tweaking an image property, editing button text, adjusting a link, or updating an input text, Froala provides a seamless and intuitive editing experience. By utilizing special tag attributes in combination with v-model, you can instantly reflect changes made in the editor on your Vue App. The potential of this feature paves the way for more flexible, user-friendly applications enhanced by real-time responses and modifications.

Start using the Froala editor Vue SDK now.

Learn how to migrate From TinyMCE to Froala.

Here are several Froala Vue WYSIWYG editor examples you can try: