TinyMCE Vue.js integration quick start guide
The Official TinyMCE Vue.js component integrates TinyMCE into Vue.js projects. This procedure creates a basic Vue.js application containing a TinyMCE editor based on our Basic example.
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 2.x integration, visit: the tinymce-vue storybook.
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).
-
Access to
tinymce.min.js
on either:- Tiny Cloud.
- TinyMCE Self-hosted. See:
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-vue
package and save it to yourpackage.json
with--save
.-
For Vue.js 3.x users:
$ npm install --save "@tinymce/tinymce-vue@^4"
-
For Vue.js 2.x users:
$ npm install --save "@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 api-key="no-api-key" :init="{ height: 500, menubar: false, plugins: [ 'advlist autolink lists link image charmap print preview anchor', 'searchreplace visualblocks code fullscreen', 'insertdatetime media table paste code help wordcount' ], toolbar: 'undo redo | formatselect | bold italic backcolor | \ alignleft aligncenter alignright alignjustify | \ bullist numlist outdent indent | removeformat | help' }" /> </div> </template> <script> import Editor from '@tinymce/tinymce-vue' export default { name: 'app', components: { 'editor': Editor } } </script>
This TinyMCE editor configuration should replicate the example on the Basic example page.
- Add a TinyMCE configuration to the
-
Provide access to TinyMCE using either Tiny Cloud or by self-hosting TinyMCE.
-
Tiny Cloud
Include the
api-key
option in the editor element and include your Tiny Cloud API key.Such as:
<editor api-key='your-api-key' :init="{ /* your other settings */ }" />
-
TinyMCE Self-hosted
TinyMCE can be self-hosted by: deploying TinyMCE independent of the Vue.js application, or bundling TinyMCE with the Vue.js application.
-
Deploy TinyMCE independent of the Vue.js application
To use an independent deployment of TinyMCE, add a script to either the
<head>
or the end of the<body>
of the HTML file, such as:<script src="/path/to/tinymce.min.js"></script>
To use an independent deployment of TinyMCE with the create a Vue.js application, add the script to
/path/to/tinymce-vue-demo/public/index.html
.For information on self-hosting TinyMCE, see: Installing TinyMCE.
-
Bundling TinyMCE with the Vue.js application using a module loader
To bundle TinyMCE using a module loader (such as Webpack and Browserify), see: Usage with module loaders.
-
-
-
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, see: Basic setup.
- The Vue.js application, see: Vue.js Documentation.
TinyMCE Vue.js technical reference
Covered in this section:
- Installing the TinyMCE Vue.js integration using NPM
- Using the TinyMCE Vue.js integration
- Form Input Bindings:
v-model
- Event binding
Installing the TinyMCE Vue.js integration using NPM
To install the tinymce-vue
package and save it to your package.json
.
-
For Vue.js 3.x users:
$ npm install --save "@tinymce/tinymce-vue@^4"
-
For Vue.js 2.x users:
$ npm install --save "@tinymce/tinymce-vue@^3"
Using the TinyMCE Vue.js integration
- Load the component.
-
For bundle loader users (such as
webpack
,rollup
, orbrowserify
):// es modules import Editor from '@tinymce/tinymce-vue'; // commonjs require // NOTE: default needed after require var Editor = require('@tinymce/tinymce-vue').default;
-
To load
tinymce-vue
in a HTML file:<script src="/path/to/tinymce-vue.min.js"></script>
-
-
Add the editor to the
components
property of the app:// This might look different depending on how you have set up your app // but the important part is the components property var app = new Vue({ el: '#app', data: { /* Your data */ }, components: { 'editor': Editor // <- Important part }, methods: { /* Your methods */} })
-
Add the
<editor>
tag to thetemplate
<editor api-key="API_KEY" :init="{plugins: 'wordcount'}" />
Configuring the editor
The editor accepts the following properties:
<editor
api-key="your-api-key"
cloud-channel="5"
:disabled=false
id="uuid"
:init= "{ }"
initial-value=""
:inline=true
model-events= ""
plugins=""
tag-name="div"
toolbar=""
value=""
/>
None of the configuration properties are required for tinymce-vue
to work. Specify a Tiny Cloud API key using api-key
to remove the This domain is not registered...
warning message.
api-key
Tiny Cloud API key. Required for deployments using the Tiny Cloud to provide the TinyMCE editor.
To register for a Tiny Cloud API key, visit the Tiny Account sign-up page. To retrieve the Tiny Cloud API key for an existing Tiny Account, login and visit the Tiny Account Dashboard.
Default value: no-api-key
Type: String
Example: Using api-key
<editor
api-key="your-api-key"
/>
cloud-channel
Default value: 5
Possible values: 5-stable
, 5-testing
, 5-dev
Changes the TinyMCE build used for the editor to one of the following Tiny Cloud channels:
5
,5-stable
(Default): The current enterprise release of TinyMCE.5-testing
: The current release candidate for the next enterprise release of TinyMCE.5-dev
: The nightly-build version of TinyMCE.
Such as:
<editor
api-key="your-api-key"
cloud-channel="5-dev"
:init="{ /* your other settings */ }"
/>
For information TinyMCE development channels, see: Specifying the TinyMCE editor version deployed from Cloud - dev, testing, and stable releases.
disabled
The disabled
property can dynamically switch the editor between a “disabled” (read-only) mode (true
) and the standard editable mode (false
).
Default value: false
Possible values: true
, false
Example: Using disabled
<editor
:disabled=true
/>
id
An id for the editor. Used for retrieving the editor instance using the tinymce.get('ID')
method. Defaults to an automatically generated UUID.
Default value: Automatically generated UUID.
Type: String
Example: Using id
<editor
id="uuid"
/>
init
Object sent to the tinymce.init
method used to initialize the editor.
For information on the TinyMCE selector (tinymce.init
), see: Basic setup.
Default value: "{ }"
Type: Object
Example: Using init
<editor
:init="{
plugins: [
'lists link image paste help wordcount'
],
toolbar: 'undo redo | formatselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | help'
}"
/>
initial-value
Initial content of the editor when the editor is initialized.
Default value: " "
Type: String
Example: Using initial-value
<editor
initial-value="Once upon a time..."
/>
inline
Used to set the editor to inline mode. Using <editor :inline=true />
is the same as setting {inline: true}
in the TinyMCE selector (tinymce.init
).
For information on inline mode, see: User interface options - inline
and Setup inline editing mode.
Default value: false
Possible values: true
, false
Example: Using inline
<editor
:inline=true
/>
model-events
Sets the trigger events for v-model events.
For a list of available TinyMCE events, see: Available Events - Editor events.
Default value: "change keyup undo redo"
.
Type: String
Example: Using model-events
<editor
model-events="change keydown blur focus paste"
/>
output-format
Used to specify the format of the content emitted via the input
event. This affects the format of the content used in conjunction with data binding.
Type: String
Default value: html
Possible values: html
, text
Example: Using output-format
<editor
output-format="text"
/>
plugins
Used to include plugins for the editor. Using <editor plugins="lists code" />
is the same as setting {plugins: 'lists code'}
in the TinyMCE selector (tinymce.init
).
For information on adding plugins to TinyMCE, see: Add plugins to TinyMCE.
Type: String or Array
Example: Using plugins
<editor
plugins="lists code"
/>
tag-name
Only valid when <editor :inline=true />
. Used to define the HTML element for the editor in inline mode.
Default value: div
Type: String
Example: Using tag-name
<editor
:inline=true
tag-name="my-custom-tag"
/>
toolbar
Used to set the toolbar for the editor. Using <editor toolbar="bold italic" />
is the same as setting {toolbar: 'bold italic'}
in the TinyMCE selector (tinymce.init
).
For information setting the toolbar for TinyMCE, see: User interface options - toolbar.
Possible values: See Toolbar Buttons Available for TinyMCE.
Type: String
Example: Using toolbar
<editor
plugins="code"
toolbar="bold italic underline code"
/>
tinymce-script-src
Use the tinymce-script-src
prop to specify an external version of TinyMCE to lazy load.
Type: String
Example: Using tinymce-script-src
<editor
tinymce-script-src="/path/to/tinymce.min.js"
/>
Form Input Bindings: v-model
The v-model
directive can be used to create a two-way data binding. For example:
<editor v-model="content" />
For information on v-model
and form input bindings, see: Vue.js documentation - Form Input Bindings.
Event binding
Functions can be bound to editor events, such as:
<editor @selectionChange="handlerFunction" />
When the handler is called (handlerFunction in this example), it is called with two arguments:
event
- The TinyMCE event object.editor
- A reference to the editor.
The following events are available:
activate
addUndo
beforeAddUndo
beforeExecCommand
beforeGetContent
beforeRenderUI
beforeSetContent
beforePaste
blur
change
clearUndos
click
contextMenu
copy
cut
dblclick
deactivate
dirty
drag
dragDrop
dragEnd
dragGesture
dragOver
drop
execCommand
focus
focusIn
focusOut
getContent
hide
init
keyDown
keyPress
keyUp
loadContent
mouseDown
mouseEnter
mouseLeave
mouseMove
mouseOut
mouseOver
mouseUp
nodeChange
objectResizeStart
objectResized
objectSelected
paste
postProcess
postRender
preProcess
progressState
redo
remove
reset
saveContent
selectionChange
setAttrib
setContent
show
submit
undo
visualAid
Was this article helpful? Yes - No
Well, that's awkward . Would you mind opening an issue or helping us out?
Thanks for the feedback!
Can't find what you're looking for? Let us know.
Except as otherwise noted, the content of this page is licensed under the Creative Commons BY-NC-SA 3.0 License, and code samples are licensed under the Apache 2.0 License.