Integrating TinyMCE into an Express JS App

A quick start guide on integrating TinyMCE into an Express JS Application

This quick start guide walks through creating a basic Express JS application containing a TinyMCE editor based on our Basic example.

NOTE: 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',
   height: 500,
   menubar: false,
   plugins: [
     'advlist autolink lists link image charmap print preview anchor',
     'searchreplace visualblocks code fullscreen',
     'insertdatetime media table paste code help wordcount'
   ],
   toolbar: 'undo redo | formatselect | ' +
   'bold italic backcolor | alignleft aligncenter ' +
   'alignright alignjustify | bullist numlist outdent indent | ' +
   'removeformat | help'
 });

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>
     <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>
   </body>

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

Was this article helpful? Yes - No

Well, that's awkward . Would you mind opening an issue or helping us out?

Thanks for the feedback!

Can't find what you're looking for? Let us know.

Except as otherwise noted, the content of this page is licensed under the Creative Commons BY-NC-SA 3.0 License, and code samples are licensed under the Apache 2.0 License.