Using the TinyMCE package with the Vue.js framework
The Official TinyMCE Vue.js component integrates TinyMCE into Vue.js projects. This procedure creates a basic Vue.js application containing a TinyMCE editor.
Version 4 of the tinymce-vue
package supports Vue.js 3.x, but does not support Vue.js 2.x. For Vue.js 2.x applications, use tinymce-vue
version 3.
TinyMCE Vue.js integration live examples
For examples of the TinyMCE Vue.js 3.x integration:
-
Clone the
tinymce/tinymce-vue
GitHub repository. For example:git clone https://github.com/tinymce/tinymce-vue.git
-
Install the required packages using
yarn
. For example:yarn install
-
To start the demo server, run:
yarn demo
The tinymce-vue
demo is now running. Visit: http://localhost:3001.
Prerequisites
This procedure requires Node.js (and npm).
Procedure
-
On a command line or command prompt, install the Vue CLI Tool package.
npm install -g @vue/cli
-
Create a new Vue.js project named
tinymce-vue-demo
.-
To use the interactive prompt, run:
vue create tinymce-vue-demo
-
To skip the interactive prompt:
-
For Vue.js 3.x users:
vue create --inlinePreset '{ "vueVersion": "3", "plugins": {} }' tinymce-vue-demo
-
For Vue.js 2.x users:
vue create --inlinePreset '{ "vueVersion": "2", "plugins": {} }' tinymce-vue-demo
-
-
-
Change into the newly created directory.
cd tinymce-vue-demo
-
Install the
tinymce
andtinymce-vue
packages and save them to yourpackage.json
with--save
.-
For Vue.js 3.x users:
npm install --save tinymce "@tinymce/tinymce-vue@^4"
-
For Vue.js 2.x users:
npm install --save tinymce "@tinymce/tinymce-vue@^3"
-
-
Using a text editor, open
/path/to/tinymce-vue-demo/src/App.vue
.-
Add a TinyMCE configuration to the
<template>
using the<editor>
tag. -
Add
import Editor from '@tinymce/tinymce-vue'
to the start of the<script>
. -
Add
editor: Editor
to thedefault {components}
.For example:
<template> <div id="app"> <img alt="Vue logo" src="./assets/logo.png"> <editor :init="{ plugins: 'lists link image table code help wordcount' }" /> </div> </template> <script> import Editor from '@tinymce/tinymce-vue' export default { name: 'app', components: { 'editor': Editor } } </script>
-
-
Bundle TinyMCE with the Vue.js application using a module loader (such as Webpack).
Tiny does not recommend bundling tinymce
andtinymce-vue
with a module loader. Bundling these packages can be complex and error prone.To bundle TinyMCE using a module loader (such as Webpack, Rollup, or Browserify), import or require the
tinymce
package, followed by thetinymce-vue
package, then the other required TinyMCE-related imports.Example of bundling:
/* Add the tinymce-vue wrapper to the bundle */ import { Editor } from '@tinymce/tinymce-vue'; /* For instructions on bundling TinyMCE, see the Bundling TinyMCE documentation. */
For instructions on bundling TinyMCE, see: Bundling TinyMCE.
-
Test the application using the Node.js development server.
-
To start the development server, navigate to the
tinymce-vue-demo
directory and run:npm run serve
-
To stop the development server, select on the command line or command prompt and press Ctrl+C.
-
Deploying the application to a HTTP server
The application will require further configuration before it can be deployed to a production environment. For information on configuring the application for deployment, see: Vue.js - Production Deployment.
Next Steps
-
For examples of the TinyMCE integration, see: the tinymce-vue storybook.
-
For information on customizing:
-
TinyMCE integration, see: Vue.js framework Technical Reference.
-
TinyMCE, see: Basic setup.
-
The Vue.js application, see: Vue.js Documentation.
-