Integrating TinyMCE into an Express JS App

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

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

Prerequisites

This procedure requires:

Procedure

  1. On a command line or command prompt, create a basic Express JS application:

    $ npx express-generator --git --no-view my_tinymce_app
  2. Change into the newly created directory.

    $ cd my_tinymce_app
  3. Add the tinymce package to your package.json with --save.

    $ npm install --save tinymce
  4. Download and install the TinyMCE and Express JS Node modules (and their dependencies):

    $ npm install
  5. 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;
  6. 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
  7. 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'
    });
  8. 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"></link>
        </head>
      
        <body>
          <!-- 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>
  9. 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