Integrating TinyMCE into an Express JS App

This quick start guide walks through creating a basic Express JS application containing a TinyMCE editor.

Tiny Cloud users should use the Tiny Cloud quick start guide.

Prerequisites

This procedure requires Node.js (and npm).

Procedure

On a command line or command prompt, create a basic Express JS application:
```
npx express-generator --git --no-view my_tinymce_app
```
Change into the newly created directory.
```
cd my_tinymce_app
```
Add the tinymce package to your package.json with --save.
```
npm install --save tinymce
```
Download and install the TinyMCE and Express JS Node modules (and their dependencies):
```
npm install
```

Using a text editor, open /path/to/my_tinymce_app/app.js and add the following route:

app.use('/tinymce', express.static(path.join(__dirname, 'node_modules', 'tinymce')));

For example:

var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');

var app = express();

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

/* New Route to the TinyMCE Node module */
app.use('/tinymce', express.static(path.join(__dirname, 'node_modules', 'tinymce')));

app.use('/', indexRouter);
app.use('/users', usersRouter);

module.exports = app;

Create a new javascript file containing the TinyMCE configuration (tinymce.init), such as:

Linux/macOS/Unix:
```
touch public/javascripts/my-tinymce-config.js
```
Windows:
```
> type nul >public/javascripts/my-tinymce-config.js
```

Add the TinyMCE configuration to the newly created javascript file (my-tinymce-config.js):

tinymce.init({
  selector: 'textarea#my-expressjs-tinymce-app',
  plugins: 'lists link image table code help wordcount'
});

Update public/index.html to include:

The document type declaration, <!DOCTYPE html>.
A <script> element sourcing tinymce.min.js.
A <script> element sourcing the TinyMCE configuration (my-tinymce-config.js).

A <textarea> element with an id attribute matching the selector option in the TinyMCE configuration (my-expressjs-tinymce-app).

For example:

<!DOCTYPE html> <!-- Required for TinyMCE to function as intended -->
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>TinyMCE Demo</title>
    <link rel="stylesheet" href="/stylesheets/style.css">
  </head>

  <body>
    <h1>TinyMCE Demo</h1>
    <!-- Text area matching the selector specified in the TinyMCE configuration -->
    <textarea id="my-expressjs-tinymce-app">Hello, World!</textarea>

    <!-- Script element sourcing TinyMCE -->
    <script type="application/javascript" src= "/tinymce/tinymce.min.js"></script>
    <!-- Script element sourcing the TinyMCE configuration -->
    <script type="application/javascript" src= "/javascripts/my-tinymce-config.js"></script>
  </body>
</html>

Test the application using the Node.js development server.
- To start the development server, navigate to the my_tinymce_app directory and run:
  npm start
- Visit http://localhost:3000 to view the application.
- To stop the development server, select on the command line or command prompt and press Ctrl+C.

Next Steps

For information on customizing:
- TinyMCE, see: Basic setup.
- The Express JS application, see: the Express JS Documentation.