Using TinyMCE from a .zip file
Install TinyMCE using a TinyMCE .zip package
TinyMCE 6 is a powerful and flexible rich text editor that can be embedded in web applications. This quick start covers how to add a TinyMCE editor to a web page using a TinyMCE .zip package.
Include the TinyMCE script
Include the following line of code in the <head>
of an HTML page.
<script src="/path/or/uri/to/tinymce.min.js" referrerpolicy="origin"></script>
Initialize TinyMCE as part of a web form
Initialize TinyMCE 6 on any element (or elements) on the web page by passing an object containing a selector
value to tinymce.init()
. The selector
value can be any valid CSS selector.
For example: To replace <textarea id="mytextarea">
with a TinyMCE 6 editor instance, pass the selector '#mytextarea'
to tinymce.init()
.
For example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="/path/or/uri/to/tinymce.min.js" referrerpolicy="origin"></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>
Adding this content to an HTML file and opening it in a web browser will load a TinyMCE editor, such as:
-
TinyMCE
-
HTML
-
JS
-
Edit on CodePen
<textarea id="default">Hello, World!</textarea>
tinymce.init({
selector: 'textarea#default'
});
Save the content from the editor
To retrieve content from the editor, either process the content with a form handler or use the getContent API.
If you use a form handler, once the <form>
is submitted, TinyMCE 6 will POST
the content in the same way as a normal HTML <textarea>
, including the HTML elements and inline CSS of the editor content. The host’s form handler can process the submitted content in the same way as content from a regular <textarea>
.
Next Steps
For information on:
-
Customizing TinyMCE, see: Basic Setup.
-
The three editor modes, see:
-
Adding TinyMCE plugins, see: Work with plugins to extend TinyMCE.
-
Localizing the TinyMCE editor, see: Localize TinyMCE.
-
For information on the CSS required to render some TinyMCE elements outside of the editor, see: CSS for rendering TinyMCE content outside the editor.