Blueprint by Tiny
Return to Tiny.cloud
Return to Tiny.cloudTry TinyMCE for Free
Search by
Chat app with text "Time for a catch up".

Build a chat app with our WYSIWYG editor

Ben Long

November 3rd, 2020

Written by

Ben Long
Ben Long

Category

How-tos & Tutorials

TinyMCE is used as the text entry component in over 100M+ products worldwide. It’s trusted by millions of developers who are creating the next generation of productivity and collaboration applications - check out examples of 9 products you can build with TinyMCE.

Among the many possibilities, TinyMCE can be used to build chat applications; previously, we wrote up how we used TinyMCE to enhance an open source chat app developed in Deno.

In this article, we’re going to take a step by step look at how to configure TinyMCE for chat applications.

TinyMCE configured for a chat application.

Start with the default config

If this is your first time using TinyMCE, let’s just take a moment to set up a simple project so you can follow along. If you’re already familiar with TinyMCE, you can jump ahead to the next section.

Create an HTML file using the following code from the TinyMCE quickstart guide, replacing no-api-key with your own Tiny API key. If you haven’t yet got an API key, you can get a free API key now.

<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
   <script>
     tinymce.init({
       selector: "#mytextarea"
     });
   </script>
 </head>
 <body>
 <h1>TinyMCE Example</h1>
   <form method="post">
     <textarea id="mytextarea"></textarea>
   </form>
 </body>
</html>

Open the HTML file in a browser and the default TinyMCE editor will be displayed, initialized on the element with the same id as that specified by the selector option.

NOTE: You will be presented with a warning notification - This domain is not registered with Tiny Cloud - if you are running TinyMCE on your local machine outside of a web server, or if the domain on which you’re running TinyMCE is not registered against your account. To remove the notification, open it on localhost (which is already an approved domain by default), or register your domain as an approved domain in your account.

TinyMCE default configuration.

Remove the menu bar

TinyMCE comes with a menu bar by default; however, you don’t typically provide a menu bar in a chat application - you want to keep the interface sleek and simple. To remove the TinyMCE menu bar, add menubar: false to the init script in your code:

tinymce.init({
  selector: "#mytextarea",
  menubar: false
});
TinyMCE with menu bar removed.

Move the toolbar to the bottom

In most chat applications, the toolbar is positioned below the text box. You can move the toolbar to the bottom of the frame by adding toolbar_location: bottom.

tinymce.init({
  selector: "#mytextarea",
  menubar: false,
  toolbar_location: "bottom"
});
TinyMCE configured with the toolbar on the bottom.

Automatic resizing

You want to be able to control how the editor behaves when users enter more than one line of text. For example, you might like to initialize the editor for a single line of text, then have it resize automatically to fit more lines of text. You can do this using the autoresize plugin, which can be added to your TinyMCE config with the plugins option.

tinymce.init({
  selector: "#mytextarea",
  menubar: false,
  toolbar_location: "bottom",
  plugins: "autoresize",
  autoresize_bottom_margin: 0,
  max_height: 500
});

Here we’ve also indicated that we want the initial size of the padding to be zero using the autoresize_bottom_margin option. Also, we’ve set a maximum height - once the editor reaches this height, a vertical scroll bar will be introduced.

For more information and configuration options, check out autoresize in our docs.

Add placeholder text

In many modern content creation apps, placeholder text is used to prompt users. You can add placeholder text using the placeholder option.

tinymce.init({
  selector: "#mytextarea",
  menubar: false,
  toolbar_location: "bottom",
  plugins: "autoresize",
  autoresize_bottom_margin: 0,
  max_height: 500,
  placeholder: "Enter message . . ."
});
TinyMCE configured with placeholder text.

Customize the toolbar options

TinyMCE is built to be flexible and to fit all kinds of use cases. We provide a default set of toolbar options to get you started, but you can configure it to suit just about any UX. For example, in your chat applications, you might want options like bold, italics, and strikethrough, plus options for inserting links, lists, quotes, emojis, and images. The default toolbar options can be overridden with the toolbar option.

tinymce.init({
  selector: "#mytextarea",
  menubar: false,
  toolbar_location: "bottom",
  plugins: "autoresize link lists emoticons image",
  autoresize_bottom_margin: 0,
  max_height: 500,
  placeholder: "Enter message . . .",
  toolbar:
    "bold italic strikethrough link numlist bullist blockquote emoticons image"
});

Some toolbar options depend on particular plugins, in which case, you’ll need to load the corresponding plugins too. For example, here we need to load the link, lists, emoticons and image plugins. See the full list of available toolbar buttons; “core” toolbar buttons are part of the core functionality, which means no additional plugin needs to be loaded for them to work.

TinyMCE configured with specific toolbar buttons.

Some of our premium plugins you might consider adding to enhance your product’s user experience are:

Further reading:

Add a custom send button

There are many ways you could integrate a send button with TinyMCE. For example, you could use a button outside of TinyMCE that interacts with the editor as done in our Deno app. But there’s also a good opportunity here to demonstrate how to add custom buttons to TinyMCE. So let’s try it out!

Put simply, we need to register the button using addButton, and then add it to the toolbar config using the name we’ve given it. For example, here we’ve called it mySendButton.

When defining your button, there are options to provide a tooltip, button text (or, alternatively, an icon), and the onAction option is where you define the functionality your button will provide.

In this example, we’ve used a simple alert to demonstrate how to access and use the entered text, and then a call to reset the editor content. Of course, in your applications, you’ll want to pass the content through to where your messages appear in your chat window.

tinymce.init({
  /* ... */
  toolbar:
    "bold italic strikethrough code link numlist bullist blockquote emoticons image | mySendButton",
  setup: function(editor) {
    editor.ui.registry.addButton("mySendButton", {
      tooltip: "Send Message",
      text: "Send",
      onAction: function() {
        alert(editor.getContent());
        editor.resetContent();
      }
    });
  }
});

For more information and configuration options, check out how to create custom toolbar buttons in our docs. Again, you might like to look at how you can set it up to have TinyMCE toolbar options aligned on the right.

TinyMCE configured with a custom Send button.

Customize the skin and icons

At this point, you might be wondering if you can customize the look and feel of the editor to be more consistent with your UI and design styles.

Tiny’s Premium Skins and Icon Packs have been designed to give you loads of options when it comes to styling the editor to match your desired UI/UX. And they are now included with Tiny’s new Cloud Essential plan.

For instance, we could use the borderless skin with small icons:

tinymce.init({
  /* ... */
  skin: "borderless",
  icons: "small"
});

Then wrap our own border, with rounded corners, around the editor:

<div style="border: 1px solid #ccc; border-radius: 5px; padding: 1px">
  <textarea id="mytextarea"></textarea>
</div>

Complete example

Check out the complete example on CodePen. Type a message and click Send.

What next?

This article demonstrates just some of the ways in which you can configure TinyMCE for a chat app; however, there really are so many possibilities to take it further from here. Why not tag us on Twitter @joinTiny with a screenshot of your TinyMCE configuration.

To see the TinyMCE editor working in a chat application, check out our article on how to build a simple chat app with a WYSIWYG editor.

Deno chat app with WYSIWYG HTML editing.
Configuration
Ben Long
byBen Long

Developer Advocate at Tiny. Computer scientist turned storyteller. Reminisces about programming on the MicroBee. Writes picture books for kids. Also the wearer of rad shoes. “Science isn’t finished until you share the story.”

Related Articles

  • Screenshot of an online word processor built with TinyMCE.
    How-tos & Tutorials

    Build an online word processor with our WYSIWYG editor

    by Ben Long in How-tos & Tutorials
Subscribe for the latest insights served straight to your inbox every month.

Deploy TinyMCE in just 6 lines of code

Built to scale. Developed in open source. Designed to innovate.

Begin with your FREE API Key
Tiny Editor