--- title: "Installing TinyMCE" description: "Learn how to install TinyMCE via TinyMCE Cloud, package manager options, Self-hosted, jQuery and custom build options." canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/installation/" md_url: "https://www.tiny.cloud/docs/tinymce/5/installation/index.md" version: "5" last_updated: "2024-04-09T10:06:54Z" tokens: 3480 --- Important This page documents TinyMCE 5. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../latest/installation/). # Installing TinyMCE 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, self-hosted download, and other custom build options. - [Tiny Cloud](#cloudinstall) - [Package Managers](#packagemanagerinstalloptions) - [Self-Hosted Download / Install](#self-hostedinstall) - [Custom Build](#custombuildinstall) ## Cloud Install ### Step 1: Include the TinyMCE script Include this line of code in the `` of your HTML page: ```html ``` ### 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 ` ``` ### Step 3: Saving content with a form POST When the `

` is submitted the TinyMCE editor mimics the behavior of a normal HTML `

` 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 Tiny Cloud. If you wish to use any local plugins (like [MoxieManager](http://www.moxiemanager.com/) for example) you need to load them using the new [`external_plugins`](../integration-and-setup/#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`](../content-localization/#language_url) option.

You may also want to select a specific version of the editor from Tiny Cloud and you should head on over to [Specify editor & plugin versions](../editor-plugin-version/) for details on that.

> **Note:** If you have decided to use Tiny Cloud, please move on to the next step [working with plugins](../work-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](#npm)
- [Bower](#bower)
- [Composer](#composer)
- [NuGet](#nuget)

## NPM

```sh
npm install tinymce@^5
```

### Step 1: Include the TinyMCE script

Include this line of code in the `<head>` of your HTML page:

```html
<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()`.

```html
<!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!

``` ### Step 3: Saving content with a form POST When the `

` is submitted the TinyMCE editor mimics the behavior of a normal HTML `

` 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:

```js
tinymce.init({
  selector: 'textarea',
  language: 'sv',
  language_url: '/js/sv.js',
  plugins: 'myplugin',
  external_plugins: {
    'myplugin': '/js/myplugin/plugin.min.js'
  }
});
```

> **Note:** If you have decided to use this package manager, move on to the next step [working with plugins](../work-with-plugins/), where you’ll start customizing TinyMCE. If you’d like to learn about other install options please keep reading.

## Bower

```sh
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.

```sh
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:

```html
<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()`.

```html
<!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!

``` ### Step 3: Saving content with a form POST When the `

` is submitted the TinyMCE editor mimics the behavior of a normal HTML `

` 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

```js
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](../work-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, run the following on a command line or command prompt:

```sh
composer require tinymce/tinymce
```

### Step 1: Include the TinyMCE script

Include this line of code in the `<head>` of your HTML page:

```html
<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()`.

```html
<!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!

``` ### Step 3: Saving content with a form POST When the `

` is submitted the TinyMCE editor mimics the behavior of a normal HTML `

` 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

```js
tinymce.init({
  selector: 'textarea',
  language: 'sv',
  language_url: '/js/sv.js',
  plugins: 'myplugin',
  external_plugins: {
    'myplugin': '/js/myplugin/plugin.min.js'
  }
});
```

## NuGet

```sh
Install-Package TinyMCE
```

### Step 1: Include the TinyMCE script

Include this line of code in the `<head>` of your HTML page:

```html
<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()`.

```html
<!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!

``` ### Step 3: Saving content with a form POST When the `

` is submitted the TinyMCE editor mimics the behavior of a normal HTML `

` 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

```js
tinymce.init({
  selector: 'textarea',
  language: 'sv',
  language_url: '/js/sv.js',
  plugins: 'myplugin',
  external_plugins: {
    'myplugin': '/js/myplugin/plugin.min.js'
  }
});
```

## Self-Hosted Install

### Step 1: Download the Self-hosted package

If you’d rather download and install the script manually, get the package from [TinyMCE Downloads](/get-tiny).

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:

```html
<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()`.

```html
<!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!

``` ### Step 4: Saving content with a form POST When the `

` is submitted the TinyMCE editor mimics the behavior of a normal HTML `

` during the `post`. In your form handler you can process the content submitted as if it had come from a regular `<textarea>`.

> **Note:** If you decided to use the Self-hosted package, move on to the next step [working with plugins](../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](/get-tiny/custom-builds/) (TinyMCE 4 only) 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 [Self-Hosted Install](#self-hostedinstall) install instructions; if you built the jQuery core option follow the [jQuery](../jquery-pm/) instructions.

> Once you have the editor installed, move on to the next step [work with plugins](../work-with-plugins/), where you’ll start customizing TinyMCE.