Important changes to Tiny Cloud pricing > Find out more

NOTE: TinyMCE 5 reached End of Support in April 2023. No more bug fixes, security updates, or new features will be introduced to TinyMCE 5. We recommend you upgrade to TinyMCE 6 or consider TinyMCE 5 Long Term Support (LTS) if you need more time.

Integrating TinyMCE into an Express JS App

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

Contribute to this page

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:

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

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.