How to enrich a Vue textarea with TinyMCE

Vue is a front end development framework with a low barrier to entry. It also integrates easily with other libraries and existing projects, which are some of the reasons why so many developers select the Vue framework. 

When your website requires an enriched Vue textarea, you can easily get bogged down trying to find the right library or project that can quickly integrate with Vue. When you spend a lot of time researching the best ways to get an enriched Vue textarea, or WYSIWYG, you risk pushing out project timelines. 

Deadlines don’t wait, so to make sure you have what you need to get started straight away, we’ve put together this article.

TinyMCE provides fast integration and flexibility, and there’s a specific integration of its WYSIWYG editor for the Vue framework. This article helps you integrate the TinyMCE WYSIWYG editor into your Vue project, and create an enriched Vue textarea for your end users.

Let’s get started…

NOTE: Just in case you don’t already know how to get started with a Vue project, we’ll start there. But you can skip ahead to the part about adding TinyMCE if you’re already well acquainted with Vue.

Start with a simple Vue project

The Vue CLI (command line interface) provides the ability to scaffold new projects and prototype new ideas. We’ll use it to set up a basic project to which we’ll add TinyMCE.

If you haven’t already, install node.js as well on your development workstation.

1. Install the Vue CLI

npm install -g @vue/cli

2. Use the Vue create command for a basic Vue project.

vue create tinymce-vue-demo

3. Press Enter when prompted (shown below), to select the default preset.

4. Choose your preferred package manager from Yarn or NPM.

Vue will then create the project, and install any CLI plugins.

Test your Vue project

1. Change into your new project directory the newly created directory:

cd tinymce-vue-demo

2. Test the project with the following npm command. This will build the project in development mode:

npm run serve

3. Open http://localhost:8080/ in your browser:

How to set up a an enriched Vue textarea

Now that you’ve got a simple Vue project running, it’s time to enrich the Vue textarea with TinyMCE.

The official TinyMCE Vue package provides a thin wrapper around TinyMCE to make the editor easier to add to your Vue applications.

1. Install the TinyMCE vue integration to enrich the Vue textarea. This example uses npm, and is set for For Vue.js 3.x users:

npm install --save "@tinymce/tinymce-vue@^5"

2. From within your project directory, open the src/App.vue file

3. Overwrite the default <template> and <script> content with the following TinyMCE template to enrich the Vue demo app with TinyMCE (the <style> content is not changed in this demo):

<script setup>

import Editor from '@tinymce/tinymce-vue'

</script>

<template>

Vue JS textarea input binding

To try out input binding with an enriched Vue textarea, navigate to the TinyMCE Vue integration repository on GitHub. There are several demos available for you to try out, including a controlled component.

NOTE: You can try out the enriched Vue demos by cloning the repository, and then running yarn install followed by yarn run within the cloned folder. Check on the TinyMCE Vue integration documentation for more information.

The demo Controlled.vue file shows how an input binding is possible:

1. Configure two editor components
2. Link the contents of one of the editors to the other with a ref value.

For more on input binding, and watching for changes in your enriched Vue textarea, a library that can support you is Vuex – it’s designed for making sure states can only mutate in a predictable fashion.

Another solution, noted in this Stack Overflow discussion, is that using an event handler, any changes in the WYSIWYG are monitored, and when the model changes, the imputed change is caught and registered.

How to limit characters in Vue textarea

Limiting characters is possible using TinyMCE with some additional configuration to your TinyMCE init script. As an example, the following demo modifies the Refreshable.vue file from the Vue integration demo collection:

1. Clone the tinymce/tinymce-vue GitHub repository:

git clone https://github.com/tinymce/tinymce-vue.git

2. Change into the tinymce-vue repository, and install the required packages using yarn:

yarn install

3. Create a branch to preserve the original demo by running the following git command:

git checkout -b <change-to-your-branchname>

4. Open the Refreshable.vue file in your rich text editor of choice.

5. Locate the setup TinyMCE option within the return value of the Editor component set up in the definedComponent section.

6. Change the setup content to limit the characters in the Vue textarea with the following example:

setup: (editor: any) => {
  editor.on("keypress", () => {
    const max = 2;
    const numChars = tinymce.activeEditor.plugins.wordcount.body.getCharacterCount();
    if (numChars > max) {
      alert("Only maximum " + max + " characters allowed.");
    }
  });
};

7. Start the demo server by using the yarn command:

yarn demo

8. Open the local host address in your browser, and navigate to the “Rerender” page, which is now replaced with a Vue textarea character limited demo:

The following article explains more on how to set up character limits.

How to set up automatic resizing of textarea in Vue

You can set TinyMCE to automatically adjust its size when content is entered, using the Autoresize plugin. Configure the plugin in your TinyMCE plugins list, and add some of the other related options, such as setting a maximum height and width for the Vue textarea. The documentation for the Autoresize plugin shows the configuration and options.

How to add autocomplete on inputs to the textbox

Using the Autocomplete API with TinyMCE, it’s possible to include autocomplete functionality within your enriched Vue textarea. Configure the API method to change the direction of the autocomplete menu, or include icons if needed – the following article explains how you can configure autocomplete for inputs in the textarea.

What to look at next for your Vue app

For more information, you can put a Vue application built for production to the test with a how-to guide written by Marty Friedel, one of the devs in the TinyMCE community. Also, refer to the documentation for comprehensive information about the configuration options available.

Interested in how to get rich text editing opportunities for the textarea of a different framework? We have guides to help you with this: learn how to configure and work with enriched

• React textarea
• Angular textarea
• Blazor textbox
• Django textfield.

Contact us now for more information about our WYSIWYG HTML editor and how it’s helping other developers with their apps.

Get your FREE TinyMCE API key today for a 14 day free trial of TinyMCE's premium plugins!