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. Deadlines don’t wait for more time spent researching the best ways to get an enriched Vue textarea or WYSIWYG. So to make sure you have what you need to get started, we’ve put together this article.

TinyMCE provides fast integration and flexibility, and among its integration features are a specific integration of 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...

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.

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:

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:

npm install @tinymce/tinymce-vue

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

3. Replace the HelloWorld component with TinyMCE to enrich the Vue Textarea. Import it, declare it, and insert it in your template HTML (replacing APIKEY with your own):

Don’t have a cloud subscription? Get a free API Key. (You’ll even get a free trial of our Premium plugins!)

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <strong><!--</strong><HelloWorld msg="Welcome to Your Vue.js App"/><strong>--></strong>
    <strong><editor api-key="APIKEY" init="{plugins: 'wordcount'}" initial-value="TinyMCE has landed!"></editor></strong>
  </div>
</template>

<script>
<strong>//</strong>import HelloWorld from './components/HelloWorld.vue'
<strong>import Editor from '@tinymce/tinymce-vue'</strong>

export default {
  name: 'app',
  components: {
    <strong>//</strong>HelloWorld,
    <strong>'editor': Editor</strong>
  }
}
</script>

4. Run the project from within the project directory (if it’s not already running):

cd tinymce-vue-demo
npm run serve

5. Open or refresh http://localhost:8080/ in your browser:

Vue JS textarea input binding

For 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 JavaScript. It essentially involves setting up a variable that sets the maximum number of characters, and then uses an ‘if’ statement to check if the textarea contents is greater than that maximum number. The following article explains 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, try the live demo and refer to the documentation for comprehensive information about the configuration options available.

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