Blueprint by Tiny
Return to Tiny.cloud
Return to Tiny.cloudTry TinyMCE for Free
Search by
Tiny logo and Vue logo combined with a plus symbol.

How to add TinyMCE 5 to a simple Vue project

Ben Long

December 3rd, 2019

Written by

Ben Long
Ben Long

Category

Tips & How-Tos

Tagged

Many developers are choosing Vue for its low barrier to entry and easy integration with other libraries and existing projects. So we want to make sure you have what you need to get started with our WYSIWYG HTML editor in Vue, and evaluate whether this option will suit your next project or upgrade.

 

One of the devs in our Tiny community, Marty Friedel, says:

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

Marty has written a follow-up article about integrating TinyMCE with Vue in a real world application. So make sure you check that out once you’re finished with this one.

 

Let’s get started...

 

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

Install the Vue CLI

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 in the next step. (This assumes Node.js is already installed.)

npm install -g @vue/cli

Create a simple Vue project

Use the Vue CLI to create a basic Vue project.

vue create tinymce-vue-demo

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

Terminal window showing presets with default option - babel

Test your Vue project

Run the project from within the newly created directory:

cd tinymce-vue-demo
npm run serve

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

Browser window with the basic Vue app running.

Add TinyMCE to your Vue project

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

Install the official TinyMCE Vue component

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

npm install @tinymce/tinymce-vue

Add the Editor component

From within your project directory, open the src/App.vue file and replace the HelloWorld component with the Editor component. 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>

Test it!

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

cd tinymce-vue-demo
npm run serve

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

Browser window with TinyMCE running inside the Vue app

What next?

Try a real world application. Learn how to integrate TinyMCE with Vue in a real world application, from Marty Friedel, one of the devs in our Tiny community. Also, try the live demo and refer to the documentation for comprehensive information about the configuration options available.

Customize the look and feel. Boost your editor UI with ready-made premium skins and icon packs for popular design systems such as Material Design from Google, Bootstrap, and Fabric, the design system for Microsoft Office. And remember that, if you’re interested in taking advantage of more of our premium plugins, you’re better off going for the Tiny Pro Bundle.

 

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

Vue
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

  • Group of categories and tags made from the section titles within the related article.
    Tips & How-Tos

    16 features to include on your blog feed

    by Ben Long in Tips & How-Tos
Subscribe for the latest insights served straight to your inbox. Delivered weekly.

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