Quick start in STATIC HTML
Get an instance of TinyMCE up and running in less than 5 minutes.
TinyMCE 5.0 is a powerful and flexible rich text editor that can be embedded in the user’s web application.
TinyMCE 5.0 is perfect for developers who want to see how the new version of TinyMCE integrates into their ecosystem.
Step 1: Include the TinyMCE script
Include this line of code in the <head> of the HTML page and link to the tinymce.min.js source file:
<script src="https://cloud.tinymce.com/5/tinymce.min.js?apiKey=your_API_key"></script>
Tip: A complete HTML snippet is provided in Step 2.
Step 2: Initialize TinyMCE as part of a web form
With the script included, initialize TinyMCE 5.0 on any element (or elements) in the web page.
Since TinyMCE enables identifying replaceable elements via a CSS selector, the only requirement is to pass an object that contains a selector to tinymce.init().
In this example, replace <textarea id='mytextarea'> with a TinyMCE 5.0 editor instance by passing the selector '#mytextarea' to tinymce.init().
<!DOCTYPE html>
<html>
<head>
<script src='https://cloud.tinymce.com/5/tinymce.min.js?apiKey=your_API_key'></script>
<script>
tinymce.init({
selector: '#mytextarea'
});
</script>
</head>
<body>
<h1>TinyMCE Quick Start Guide</h1>
<form method="post">
<textarea id="mytextarea">Hello, World!</textarea>
</form>
</body>
</html>
Step 3: Saving content with a form POST
When the <form> is submitted, the TinyMCE 5.0 editor mimics the behavior of a normal HTML <textarea> during the POST. In the user’s form handler, the content submitted can be processed in the same way as the content created from a regular <textarea>.
That is all there is to it!
To download TinyMCE 5.0 and install it locally, the More installation choices page in the Introduction and getting started guide has instructions. This document also provides information about TinyMCE features such as advanced installation options, working with plugins, learning about content filtering, and spell checking.
Quick start in React.js
Official TinyMCE React component
About
This package is a thin wrapper around tinymce to make it easier to use in a React application.
For some quick demos, check out the storybook.
Installation
$ npm install @tinymce/tinymce-react
Usage
Importing the component
First you have to import the component, and how you do this depends on how the app you are developing is set up.
// es modulesimport { Editor } from '@tinymce/tinymce-react';// commonjs requirevar { Editor } = require('@tinymce/tinymce-react');
Using the component in your app
Use the editor in your app like this:
<Editor apiKey="API_KEY" init={{ plugins: 'link table' }}/>
Configuring the editor
The editor accepts the following props:
disabled: Using this prop that takes a boolean value you can dynamically set the editor into a “disabled” readonly mode or into the normal editable mode.id: An id for the editor so you can later grab the instance by using thetinymce.get('ID')method on tinymce, defaults to an automatically generated uuid.init: Object sent to thetinymce.initmethod used to initialize the editor.initialValue: Initial value that the editor will be initialized with.inline: Shorthand for setting that the editor should be inline,<Editor inline />is the same as setting{inline: true}in the init.tagName: Only used if the editor is inline, decides what element to initialize the editor on, defaults todiv.plugins: Shorthand for setting what plugins you want to use,<Editor plugins="foo bar" />is the same as setting{plugins: 'foo bar'}in the init.toolbar: Shorthand for setting what toolbar items you want to show,<Editor toolbar="foo bar" />is the same as setting{toolbar: 'foo bar'}in the init.apiKey: Api key for TinyMCE cloud, more info below.cloudChannel: Cloud channel for TinyMCE Cloud, more info below.textareaName: Sets the name attribute on the textarea that the editor is initialised on for use in forms.
None of the configuration props are required for the component to work – other than if you are using TinyMCE Cloud you will have to specify the apiKey to get rid of the This domain is not registered... warning message.
Event binding
You can bind editor events via a shorthand prop on the editor, for example:
<Editor onSelectionChange="this.handlerFunction" />
Where the handler function will be called with the event and a reference to the editor.
Here is a full list of the events available:All available events
Using as a controlled component
If you want to use the component as a controlled component you should use the onEditorChange instead of the onChange event, like this:
class MyComponent extends React.Component { constructor(props) { super(props); this.state = { content: '' }; this.handleEditorChange = this.handleEditorChange.bind(this); } handleEditorChange(content) { this.setState({ content }); } render() { return ( <Editor value={this.state.content} onEditorChange={this.handleEditorChange} /> ) }}
Loading TinyMCE
Auto-loading from TinyMCE Cloud
The Editor component needs TinyMCE to be globally available to work, but to make it as easy as possible it will automatically load TinyMCE Cloud if it can’t find TinyMCE available when the component is mounting. To get rid of the This domain is not registered... warning, sign up for the cloud and enter the api key like this:
<Editor apiKey='YOUR_API_KEY' init={{ /* your other settings */ }} />
You can also define what cloud channel you want to use, for more info on the different versions see the documentation.
Loading TinyMCE by yourself
To opt out of using TinyMCE cloud you have to make TinyMCE globally available yourself. This can be done either by hosting the tinymce.min.js file by youself and adding a script tag to you HTML or, if you are using a module loader, installing TinyMCE with npm. For info on how to get TinyMCE working with module loaders check out this page in the documentation.
Quick start in Vue.js
Official TinyMCE Vue component
About
This package is a thin wrapper around tinymce to make it easier to use in a Vue application.
For some quick demos, check out the storybook.
Installation
$ npm install @tinymce/tinymce-vue
Usage
Loading the component
First you have to load the component and how you do this depends on how the app you are developing is set up. If you are using some kind of bundle loader like webpack, rollup or browserify you can add the import like this:
// es modulesimport Editor from '@tinymce/tinymce-vue';// commonjs require// NOTE: default needed after requirevar Editor = require('@tinymce/tinymce-vue').default;
If you aren’t using a module loader and just adding the javascript file imports to your html files you will have to copy the tinymce-vue.min.js file, found in the lib/browser folder of the npm package, to your app and add something like this:
<script src="path/to/tinymce-vue.min.js"></script>
You can then add the editor to the components property of your app:
// This might look different depending on how you have set up your app// but the important part is the components propertyvar app = new Vue({ el: '#app', data: { /* Your data */ }, components: { 'editor': Editor // <- Important part }, methods: { /* Your methods */}})
Using the component in your templates
Use the editor in your templates like this:
<editor api-key="API_KEY" :init="{plugins: 'wordcount'}"></editor>
Configuring the editor
The editor accepts the following props:
disabled: Using this prop that takes a boolean value you can dynamically set the editor into a “disabled” readonly mode or into the normal editable mode.id: An id for the editor so you can later grab the instance by using thetinymce.get('ID')method on tinymce, defaults to an automatically generated uuid.init: Object sent to thetinymce.initmethod used to initialize the editor.initial-value: Initial value that the editor will be initialized with.inline: Shorthand for setting that the editor should be inline,<editor inline></editor>is the same as setting{inline: true}in the init.tag-name: Only used if the editor is inline, decides what element to initialize the editor on, defaults todiv.plugins: Shorthand for setting what plugins you want to use,<editor plugins="foo bar"></editor>is the same as setting{plugins: 'foo bar'}in the init.toolbar: Shorthand for setting what toolbar items you want to show,<editor toolbar="foo bar"></editor>is the same as setting{toolbar: 'foo bar'}in the init.model-events: Change on what events you want to trigger the v-model events, defaults to'change keyup'.api-key: Api key for TinyMCE cloud, more info below.cloud-channel: Cloud channel for TinyMCE Cloud, more info below.
None of the configuration props are required for the component to work – other than if you are using TinyMCE Cloud you will have to specify the api-key to get rid of the This domain is not registered... warning message.
v-model
You can also use the v-model directive (more info in the VueJS documentation) on the editor to create a two-way data binding:
<editor v-model="content"></editor>
Event binding
You bind editor events via a shorthand prop on the editor, for example:
<editor @onSelectionChange="handlerFunction"></editor>
Here is a full list of the events available:All available events
Loading TinyMCE
Auto-loading from TinyMCE Cloud
The Editor component needs TinyMCE to be globally available to work, but to make it as easy as possible it will automatically load TinyMCE Cloud if it can’t find TinyMCE available when the component has mounted. To get rid of the This domain is not registered... warning, sign up for the cloud and enter the api key like this:
<editor api-key='YOUR_API_KEY' :init="{/* your settings */}>"</editor>
You can also define what cloud channel you want to use, for more info on the different versions see the documentation.
Loading TinyMCE by yourself
To opt out of using TinyMCE cloud you have to make TinyMCE globally available yourself. This can be done either by hosting the tinymce.min.js file by youself and adding a script tag to you HTML or, if you are using a module loader, installing TinyMCE with npm. For info on how to get TinyMCE working with module loaders check out this page in the documentation.
