Blueprint by Tiny
Return to Tiny.cloud
Return to Tiny.cloudTry TinyMCE for Free
Search by

How to enrich a Vue textarea with TinyMCE

Ben Long

January 25th, 2023

4 min read

Written by

Ben Long

Category

How-to Use 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 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
  1. Use the Vue create command for a basic Vue project.

vue create tinymce-vue-demo
  1. 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
  1. Test the project with the following npm command:

npm run serve
  1. Open http://localhost:8080/ in your browser:

The Vue.js app opening in the 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
  1. From within your project directory, open the src/App.vue file

  2. 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>
  1. Run the project from within the project directory (if it’s not already running):

cd tinymce-vue-demo
npm run serve
  1. Open or refresh http://localhost:8080/ in your browser:

The TinyMCE Vue.js app open in the 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.

VueTinyMCEConfigurationJavascript
byBen Long

Computer scientist, storyteller, teacher, and an advocate of TinyMCE. Reminisces about programming on the MicroBee. Writes picture books for kids. Also the wearer of rad shoes. “Science isn’t finished until you share the story.”

Related Articles

  • How-to Use TinyMCE

    How to enable HTML and JavaScript code snippets in your app

    by Joe Robinson in How-to Use TinyMCE
Subscribe for the latest insights served straight to your inbox every month.

Deploy TinyMCE in just 6 lines of code

Built to scale. Developed in open source. Designed to innovate.

Begin with your FREE API Key
Tiny Editor
Tiny logo
Privacy Policy - Terms of Use© 2023 Tiny Technologies Inc.TinyMCE® and Tiny® are registered trademarks of Tiny Technologies, Inc.

Products

  • TinyMCE
  • Tiny Drive
  • Customer Stories
  • Pricing