14-day Cloud trial
Start today. For free.

One editor. 50+ features. Zero constraints. After your trial, retain the advanced features.

Try Professional Plan for FREE
PricingContact Us
Log InGet Started Free

How to self-host TinyMCE for your website or application

September 15th, 2020

2 min read

Abstract illustration of physical servers depicting self-hosting concept.

Written by

Ben Long

Category

How-to Use TinyMCE

Once you’ve decided to enhance your product with TinyMCE, the world’s most popular open source editor, you can get it up and running in your applications with just 6 lines of code.

A number 6 sliced into pieces

One of these six lines of code is used to load the TinyMCE package on your page.

But where should you load it from?

Running TinyMCE from the cloud

For most setups, we recommend running TinyMCE from the cloud. That way, you’ll have peace of mind, knowing you’re always up-to-date with the latest version and newest features. 

Get started with a free API key (with a 14-day trial of our premium plugins) and load the TinyMCE package as follows, replacing no-api-key with your own.

<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>

Self-hosting TinyMCE

However, we understand that in some cases you might need to self-host TinyMCE. So here’s an overview to help you get started.

To do this, you need to get a copy of the TinyMCE package so your application can access it locally. You can get a copy of the TinyMCE package in one of two ways:

Once you have the TinyMCE package locally available to your application, you can load it on your application pages with the following script:

<script src="/path/to/tinymce/tinymce.min.js"></script>

For example, in a simple HTML page:

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

Also see our detailed guide specific to integrating TinyMCE into an Express JS application.

TinyMCE running with default configuration as described above.

Powering up TinyMCE

Regardless of whether you’re running TinyMCE from the cloud or your own self-hosted installation, you might want to take full advantage of the features and support provided by Tiny; for example:

  • Provide additional productivity, compliance, or collaboration tools like PowerPaste, Spell Checker Pro, Comments, and other Tiny premium plugins.
  • Access additional support, usage, or licensing options, for example, to access our commercial agreement options allowing you to utilize TinyMCE outside of our open source license.
  • Apply custom skins and icons to better match the rest of your product.

We have two packages available online - Cloud Essential and Cloud Professional - of increasing value depending on your requirements, plus custom plans available through our sales team. Start with a free 14 day trial. A comprehensive overview of all plans is available on our pricing page.

A blog built with TinyMCE as the WYSIWYG HTML editor.
SupportConfigurationTinyMCE
byBen Long

Computer scientist, storyteller, teacher, and an advocate of TinyMCE. Reminisces about programming on the MicroBee. Writes picture books for kids. Also the wearer of rad shoes. “Science isn’t finished until you share the story.”

Related Articles

  • How-to Use TinyMCEApr 16th, 2024

    How to enable a Bootstrap WYSIWYG editor: a step-by-step guide

Join 100,000+ developers who get regular tips & updates from the Tiny team.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Tiny logo

Stay Connected

SOC2 compliance badge

Products

TinyMCEDriveMoxieManager
© Copyright 2024 Tiny Technologies Inc.

TinyMCE® and Tiny® are registered trademarks of Tiny Technologies, Inc.