Blueprint by Tiny
Return to Tiny.cloud
Return to Tiny.cloudTry TinyMCE for Free
Search by
Vue logo sitting within a number 3.

TinyMCE support for Vue 3

Ben Long

November 16th, 2020

Written by

Ben Long
Ben Long

Category

News & Updates

We are excited to announce version 4 of the tinymce-vue package, built to support Vue.js 3.x.

Vue.js 3.0 (otherwise known as “One Piece”) was officially released on 19 September this year, providing improved performance, smaller bundle sizes, better TypeScript integration, new APIs for handling large scale applications, and a solid foundation for future iterations of the framework. Read more about the Vue.js 3.0 release here.

With over 1.3 million users worldwide, Vue is being used in a diverse range of emerging applications, with many requiring a quality textual input component like a WYSIWYG editor; for example, see 9 products you can build with TinyMCE.

Tiny has done a brilliant job of creating an integration for Vue and making it very straight forward (and insanely flexible).

Marty Friedel, Mity Digital

In this article, we demonstrate how to get an instance of TinyMCE up and running quickly within the Vue 3 framework using our official TinyMCE Vue.js component (tinymce-vue).

NOTE: Version 4 of tinymce-vue does not support Vue.js 2.x. For Vue.js 2.x applications, use tinymce-vue version 3.

A more comprehensive overview of our TinyMCE Vue integration, including instructions for self-hosted installations, is available in our Tiny documentation.

Start with a simple Vue 3 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 then add TinyMCE.

Install the Vue CLI by running the following command (assumes Node.js is already installed).

npm install -g @vue/cli

Use vue create to scaffold a new project. Here we’re calling our project tinymce-vue-demo:

vue create tinymce-vue-demo

When prompted, select the Vue 3 preset, and your preferred package manager if asked. (We’re using npm.)

Run the project from within the newly created directory:

cd tinymce-vue-demo
npm run serve

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

Simple Vue project.

Add TinyMCE to your Vue 3 project

Now that you’ve got a simple Vue project running, it’s time to add our WYSIWYG HTML editor.

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

Install the package and save it to your package.json:

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

From within your project directory, open the src/App.vue file. By default, it makes use of a HelloWorld component:

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

Instead of importing and declaring the HelloWorld component within the <script> tags, import and declare the Editor component; and replace the HelloWorld component within the <template> tags with the editor instance:

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <editor
    api-key="no-api-key"
  />
</template>

<script>
import Editor from '@tinymce/tinymce-vue'

export default {
  name: 'App',
  components: {
    'editor': Editor
  }
}
</script>

To run TinyMCE from the cloud, replace no-api-key with your own API key from the Tiny account dashboard. If you don’t yet have one, you can get a free API key now. For self-hosted installations, check out our TinyMCE Vue integration docs for more information.

Run the project from within the project directory (if it’s not still running from earlier):

cd tinymce-vue-demo
npm run serve

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

Simple Vue project with default TinyMCE instance.

Customizing TinyMCE

By default, TinyMCE comes with a menu and some basic formatting options on the toolbar. However, TinyMCE is highly flexible and can be configured to create any UI/UX - check out 9 products you can build with TinyMCE.

The editor configuration is provided by the init attribute. So, continuing with our example, you could remove the menu bar using the menubar option:

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <editor
    api-key="no-api-key"
    :init="{
      menubar: false
    }"
  />
</template>

Or you could start customizing it further with the plugins and toolbar options:

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <editor
    api-key="no-api-key"
    :init="{
      menubar: false,
      plugins: 'lists link image emoticons',
      toolbar: 'styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist | link image emoticons'
    }"
  />
</template>

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

Simple Vue project with customized TinyMCE configuration.

Using Vue 2?

If you’re using Vue 2, when adding TinyMCE to your project, instead of installing the version 4 package of tinymce-vue, install version 3 as follows:

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

What next?

This is just the tip of the iceberg when it comes to customizing TinyMCE to suit your specific project and user requirements. If it’s imaginable, it’s possible with TinyMCE - check out 9 products you can build with TinyMCE

For more information about customizing TinyMCE, read our articles:

For more information about using the official TinyMCE Vue.js component, refer to our Tiny documentation about the Vue integration. Or contact us to talk more about the requirements of your project and how TinyMCE can help you make the most of your user experience.

TinyMCE configured to enhance the user experience for a blog.
VueSupport
Ben Long
byBen Long

Developer Advocate at Tiny. Computer scientist turned storyteller. 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

  • CacheFly logo with arrow pointing towards a cloud with Tiny logo inside.
    News & Updates

    Reminder: Decommissioning TinyMCE CacheFly CDN

    by Ben Long in News & Updates
  • Rain cloud with background text "stable 4 -> 5".
    News & Updates

    Announcement: Change to TinyMCE Cloud stable

    by Ben Long in News & Updates
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