Advanced installation choices
There are multiple ways to instantiate TinyMCE. Accessing TinyMCE through Tiny Cloud may not be the best use case for different deployment scenarios. This section explains additional installation options including package managers, SDK download, and other custom build options.
- TinyMCE Cloud
- Package Managers
- SDK / Download
- jQuery
- Custom Build
Cloud Install
Step 1: Include the TinyMCE script
Include this line of code in the <head> of your HTML page:
<script src="https://cloud.tinymce.com/5/tinymce.min.js"></script>
Step 2: Initialize TinyMCE as part of a web form
With the script included, initialize TinyMCE on any element (or elements) in your web page.
Since TinyMCE lets you identify replaceable elements via a CSS selector, all you need do is pass an object that contains a selector to tinymce.init().
In this example, let’s replace <textarea id='mytextarea'> with a TinyMCE editor instance by passing the selector '#mytextarea' to tinymce.init().
<!DOCTYPE html>
<html>
<head>
<script src="https://cloud.tinymce.com/5/tinymce.min.js"></script>
<script type="text/javascript">
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 editor mimics the behavior of a normal HTML <textarea> during the post. In your form handler you can process the content submitted as if it had come from a regular <textarea>.
Additional information about using TinyMCE Cloud
There are a few things you need to consider when using TinyMCE Cloud. If you wish to use any local plugins (like MoxieManager for example) you need to load them using the new external_plugins option.
Also, if you wish to use a custom language, you need to enter the location of the language file into the new language_url option.
You may also want to select a specific version of the editor from TinyMCE Cloud and you should head on over to Specify editor & plugin versions for details on that.
If you have decided to use TinyMCE Cloud, please move on to the next step working with plugins where you’ll start customizing TinyMCE. If you’d like to learn about other install options please keep reading.
Package Manager Install Options
- NPM
- Bower
- Composer
- NuGet
NPM
npm install tinymce
Step 1: Include the TinyMCE script
Include this line of code in the <head> of your HTML page:
<script src="/path/to/tinymce.min.js"></script>
Step 2: Initialize TinyMCE as part of a web form
With the script included, initialize TinyMCE on any element (or elements) in your web page.
Since TinyMCE lets you identify replaceable elements via a CSS selector, all you need do is pass an object that contains a selector to tinymce.init().
In this example, let’s replace <textarea id='mytextarea'> with a TinyMCE editor instance by passing the selector '#mytextarea' to tinymce.init().
<!DOCTYPE html>
<html>
<head>
<script src="/path/to/tinymce.min.js"></script>
<script type="text/javascript">
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 editor mimics the behavior of a normal HTML <textarea> during the post. In your form handler you can process the content submitted as if it had come from a regular <textarea>.
Use of local plugins & language packs when installing via package managers
When using package managers you might have local TinyMCE add-ons in your project such as plugins or language packs. Load these from your project location rather than from inside the package using these configuration options:
tinymce.init({
selector: 'textarea',
language: 'sv',
language_url: '/js/sv.js',
plugins: 'myplugin',
external_plugins: {
'myplugin': '/js/myplugin/plugin.min.js'
}
});
If you have decided to use this package manager, move on to the next step working with plugins, where you’ll start customizing TinyMCE. If you’d like to learn about other install options please keep reading.
Bower
bower install tinymce
If you’d like to install and build the source manually with Bower use these steps. This approach can be used when debugging or building custom plugins.
bower install tinymce-src=git://github.com/tinymce/tinymce
cd bower_components/tinymce-src
npm i
jake
Step 1: Include the TinyMCE script
Include this line of code in the <head> of your HTML page:
<script src="/path/to/tinymce.min.js"></script>
Step 2: Initialize TinyMCE as part of a web form
With the script included, initialize TinyMCE on any element (or elements) in your web page.
Since TinyMCE lets you identify replaceable elements via a CSS selector, all you need do is pass an object that contains a selector to tinymce.init().
In this example, let’s replace <textarea id='mytextarea'> with a TinyMCE editor instance by passing the selector '#mytextarea' to tinymce.init().
<!DOCTYPE html>
<html>
<head>
<script src="/path/to/tinymce.min.js"></script>
<script type="text/javascript">
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 editor mimics the behavior of a normal HTML <textarea> during the post. In your form handler you can process the content submitted as if it had come from a regular <textarea>.
Use of local plugins & language packs when installing via package managers
When using package managers you might have local TinyMCE add-ons in your project such as plugins or language packs. Load these from your project location rather than from inside the package using these configuration options:
tinymce.init({
selector: 'textarea',
language: 'sv',
language_url: '/js/sv.js',
plugins: 'myplugin',
external_plugins: {
'myplugin': '/js/myplugin/plugin.min.js'
}
});
If you have decided to use this package manager, move on to the next step working with plugins, where you’ll start customizing TinyMCE. If you’d like to learn about other install options please keep reading.
Composer
If you’re using Composer package manager, add the following to composer.json.
php composer.phar require "tinymce/tinymce" ">= 4"
Step 1: Include the TinyMCE script
Include this line of code in the <head> of your HTML page:
<script src="/path/to/tinymce.min.js"></script>
Step 2: Initialize TinyMCE as part of a web form
With the script included, initialize TinyMCE on any element (or elements) in your web page.
Since TinyMCE lets you identify replaceable elements via a CSS selector, all you need do is pass an object that contains a selector to tinymce.init().
In this example, let’s replace <textarea id='mytextarea'> with a TinyMCE editor instance by passing the selector '#mytextarea' to tinymce.init().
<!DOCTYPE html>
<html>
<head>
<script src="/path/to/tinymce.min.js"></script>
<script type="text/javascript">
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 editor mimics the behavior of a normal HTML <textarea> during the post. In your form handler you can process the content submitted as if it had come from a regular <textarea>.
Use of local plugins & language packs when installing via package managers
When using package managers you might have local TinyMCE add-ons in your project such as plugins or language packs. Load these from your project location rather than from inside the package using these configuration options:
tinymce.init({
selector: 'textarea',
language: 'sv',
language_url: '/js/sv.js',
plugins: 'myplugin',
external_plugins: {
'myplugin': '/js/myplugin/plugin.min.js'
}
});
If you have decided to use this package manager, move on to the next step working with plugins, where you’ll start customizing TinyMCE. If you’d like to learn about other install options please keep reading.
NuGet
Install-Package TinyMCE
Step 1: Include the TinyMCE script
Include this line of code in the <head> of your HTML page:
<script src="/path/to/tinymce.min.js"></script>
Step 2: Initialize TinyMCE as part of a web form
With the script included, initialize TinyMCE on any element (or elements) in your web page.
Since TinyMCE lets you identify replaceable elements via a CSS selector, all you need do is pass an object that contains a selector to tinymce.init().
In this example, let’s replace <textarea id='mytextarea'> with a TinyMCE editor instance by passing the selector '#mytextarea' to tinymce.init().
<!DOCTYPE html>
<html>
<head>
<script src="/path/to/tinymce.min.js"></script>
<script type="text/javascript">
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 editor mimics the behavior of a normal HTML <textarea> during the post. In your form handler you can process the content submitted as if it had come from a regular <textarea>.
Use of local plugins & language packs when installing via package managers
When using package managers you might have local TinyMCE add-ons in your project such as plugins or language packs. Load these from your project location rather than from inside the package using these configuration options:
tinymce.init({
selector: 'textarea',
language: 'sv',
language_url: '/js/sv.js',
plugins: 'myplugin',
external_plugins: {
'myplugin': '/js/myplugin/plugin.min.js'
}
});
If you have decided to use this package manager, move on to the next step working with plugins, where you’ll start customizing TinyMCE. If you’d like to learn about other install options please keep reading.
SDK Install
Step 1: Download the Self-hosted package
If you’d rather download and install the script manually, get the package from TinyMCE Downloads.
Unzip the package and move the 'path/to/tinymce/' directory into a web accessible location on your web server (for example, localhost).
Step 2: Include the TinyMCE script
Include this line of code in the <head> of your HTML page:
<script src="path/to/tinymce/js/tinymce.min.js"></script>
Step 3: Initialize TinyMCE as part of a web form
With the script included, initialize TinyMCE on any element (or elements) in your web page.
Since TinyMCE lets you identify replaceable elements via a CSS selector, all you need do is pass an object that contains a selector to tinymce.init().
In this example, let’s replace <textarea id='mytextarea'> with a TinyMCE editor instance by passing the selector '#mytextarea' to tinymce.init().
<!DOCTYPE html>
<html>
<head>
<script src="/path/to/tinymce/tinymce.min.js"></script>
<script type="text/javascript">
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 4: Saving content with a form POST
When the <form> is submitted the TinyMCE editor mimics the behavior of a normal HTML <textarea> during the post. In your form handler you can process the content submitted as if it had come from a regular <textarea>.
If you decided to use the Self-hosted package, move on to the next step working with plugins, where you’ll start customizing TinyMCE. If you’d like to learn about other install options please keep reading.
jQuery Install
Step 1: Download the jQuery package
We have a jQuery plugin available here if you’d rather install TinyMCE using this method.
Note: the above link will take you to the custom package download page. When building your jQuery package, select “TinyMCE core (jQuery) under the “Core Elements” section.
As with the self-hosted SDK Install option, unzip the package and move the 'path/to/tinymce/' directory into a web accessible location on your web server (for example, localhost).
Step 2: Installation
Include this line of code in the <head> of your page:
<script src="/path/to/tinymce/tinymce.min.js"></script>
<script src="/path/to/tinymce/jquery.tinymce.min.js"></script>
Step 2: Initialize TinyMCE as part of a web form
With the script included, initialize TinyMCE on any element (or elements) in your web page.
Since TinyMCE lets you identify replaceable elements via a CSS3 selector all you need do is pass an object that contains a selector to tinymce.init().
In this example, let’s replace <textarea id='mytextarea'> with a TinyMCE editor instance by passing the selector '#mytextarea' to tinymce.init().
<!DOCTYPE html>
<html>
<head>
<script src="/path/to/tinymce/tinymce.min.js"></script>
<script src="/path/to/tinymce/jquery.tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({
selector: '#mytextarea'
});
</script>
</head>
<body>
<h1>TinyMCE Getting Started Guide</h1>
<form method="post">
<textarea id="mytextarea"></textarea>
</form>
</body>
</html>
Step 3: Saving Content with a form POST
When the form is submitted the TinyMCE editor mimics the behavior of a normal HTML <textarea> during a form post. No additional configuration is required.
If you have decided the use the jQuery version, move on to the next step work with plugins, where you’ll start customizing TinyMCE. If you’d like to learn about other install options please keep reading.
Custom Build Install
TinyMCE tries to be as flexible to your project’s needs as possible. We have a customized package builder available here where you can select the core, plugins, skins, themes and compression options you’d like to include in your download.
If you selected the standalone core option in your custom build follow the self-hosted SDK Install install instructions; if you built the jQuery core option follow the jQuery instructions.
Next Work with plugins to extend TinyMCEOnce you have the editor installed, move on to the next step work with plugins, where you’ll start customizing TinyMCE.