Build a Chat App With the WYSIWYG Editor
This article shows 9 different product examples you can create with TinyMCE, specifically the steps in configuring TinyMCE for chat apps.
Join the DZone community and get the full member experience.
Join For FreeThere are more than 100M+ products globally that use TinyMCE as its text entry element. Masses of developers creating the nextgen of collab and productivity applications trusted it. Check out 9 different product examples you can create with TinyMCE.
The possibilities are endless as to what TinyMCE can do, building chat applications included. In our previous writeups, we talked about how we utilized TinyMCE in improving a Deno developed open-source chat application.
This time, let’s look closely at the steps in configuring TinyMCE for chat apps.
Initiate the TinyMCE Default Configuration
Is this your initial use of TinyMCE? If so, let’s set up an uncomplicated project for you to easily follow along. You may skip this part to the next step if you already know how TinyMCE works.
An HTML file must be created using the code below from the quickstart guide of TinyMCE. Substitute no-API-key with your very own Tiny API key. You can get an API key for free now in case you don’t have an API key yet.
HTML
xxxxxxxxxx
1
29
1
2
3
<html lang="en">
4
5
<head>
6
7
<meta charset="utf-8">
8
9
<meta name="viewport" content="width=device-width, initial-scale=1">
10
11
12
13
14
15
</head>
16
17
<body>
18
19
<h1>TinyMCE Example</h1>
20
21
<form method="post">
22
23
<textarea id="mytextarea"></textarea>
24
25
</form>
26
27
</body>
28
29
</html>
In your browser, try opening the HTML file. The default TinyMCE editor is then displayed, initialized from the element using the same id specified by its selector option.
Remember warning notification prompts – This domain is not registered with Tiny Cloud – for those that run TinyMCE with a local machine external to the webserver. It could also be because the domain the TinyMCE is run from is registered against the account. You may revoke this notification by opening TinyMCE on localhost that’s been by default a pre-approved domain. You may also register the domain as your account’s approved domain.
Removal of Menu Bar
By default, TinyMCE contains its menu bar. But, a chat application typically has no provided menu bar since you probably want to maintain an easy and simple interface. Eliminate the default menu bar of TinyMCE by adding menubar: false to your code’s init script:
HTML
xxxxxxxxxx
1
1
tinymce.init({
2
3
selector: "#mytextarea",
4
5
menubar: false
6
7
});
Moving the Toolbar to the Frame’s Bottom
The toolbar in most chat applications is found below the text box. However, you can position the toolbar to the frame’s bottom. Add toolbar_location: bottom.
HTML
xxxxxxxxxx
1
1
tinymce.init({
2
3
selector: "#mytextarea",
4
5
menubar: false,
6
7
toolbar_location: "bottom"
8
9
});
Automatic Resizing
You want full control of the editor’s behavior every time users input two or more text lines. For instance, the editor can be initialized for one line of text, but it can be automatically resized to accommodate additional lines of text. You can add and use the auto-resize plugin into the TinyMCE configuration’s plugins option.
HTML
xxxxxxxxxx
1
15
1
tinymce.init({
2
3
selector: "#mytextarea",
4
5
menubar: false,
6
7
toolbar_location: "bottom",
8
9
plugins: "autoresize",
10
11
autoresize_bottom_margin: 0,
12
13
max_height: 500
14
15
});
The autoresize_bottom_margin option enabled us to indicate that we wanted to go for zero padding’s initial size. Additionally, the maximum height was set wherein a vertical scroll bar is introduced the moment the editor reached this height.
Auto resize in our docs provides more info as well as configuration options. Check it out.
Adding Placeholder Text
The majority of current content creation apps and HTML editors use placeholder text to prompt users. This placeholder option allows you to include placeholder text.
HTML
xxxxxxxxxx
1
17
1
tinymce.init({
2
3
selector: "#mytextarea",
4
5
menubar: false,
6
7
toolbar_location: "bottom",
8
9
plugins: "autoresize",
10
11
autoresize_bottom_margin: 0,
12
13
max_height: 500,
14
15
placeholder: "Enter message . . ."
16
17
});
Customization of Toolbar Options
TinyMCE is designed for flexibility and can fit multiple use cases. You can get started with our provided default set of toolbar options, while still be able to customize it suitable for any UX. You can include specific options such as strikethrough, italics, and bold as well as inserting images, quotes, emojis, links, and lists. You can override the default toolbar options with the toolbar option.
HTML
xxxxxxxxxx
1
21
1
tinymce.init({
2
3
selector: "#mytextarea",
4
5
menubar: false,
6
7
toolbar_location: "bottom",
8
9
plugins: "autoresize link lists emoticons image",
10
11
autoresize_bottom_margin: 0,
12
13
max_height: 500,
14
15
placeholder: "Enter message . . .",
16
17
toolbar:
18
19
"bold italic strikethrough link numlist bullist blockquote emoticons image"
20
21
});
Some of these toolbar options rely on specific plugins, so you will have to load the matching plugins as well. Let’s say you want to load the plugins for emoticons, images, links, and lists. Check out the complete list of existing toolbar options. The core functionality includes the “core” toolbar buttons, which simply means they will work even without additional plugins.
In enhancing the user experience of your product, you might want to consider adding some of our premium plugins.
- AtMention (allows users to tag particular people in their community)
- Spell Checker Pro (allows users to highlight every spelling error)
- Enhanced Media Embed (allows users for automatic conversion of links to any corresponding media
Integrate a Custom Send Button
TinyMCE allows you a number of ways to include a send button. One example is our Deno application wherein a button interacts with the editor notwithstanding the fact that it’s not from within TinyMCE. Fortunately, we can further demonstrate adding custom buttons to TinyMCE. Let’s give it a try!
Let’s call this example my send button. Here, register a button by using the add button. Then, use the given name to include it in the toolbar configuration.
You can define your button options like button text, tooltip, or even an icon. Whereas, you can define the button’s functionality with on Action.
This is a simple alert example, demonstrating how the entered keys are accessed and used, and a call for resetting the editor content. Then again, you would want your app to pass the editor wherein your message is displayed in the chat window.
HTML
xxxxxxxxxx
1
29
1
tinymce.init({
2
3
/* ... */
4
5
toolbar:
6
7
"bold italic strikethrough code link numlist bullist blockquote emoticons image | mySendButton",
8
9
setup: function(editor) {
10
11
editor.ui.registry.addButton("mySendButton", {
12
13
tooltip: "Send Message",
14
15
text: "Send",
16
17
onAction: function() {
18
19
alert(editor.getContent());
20
21
editor.resetContent();
22
23
}
24
25
});
26
27
}
28
29
});
Check out our docs for more info and config options on creating custom toolbar buttons. Again, you can look into ways on setting it up to include the TinyMCE options positioned on the right.
Customizing the Skin and Icons
By this time, you might wonder if it’s possible customizing the editor’s look and feel aligned you’re your existing UI as well as design styles.
Our and Icon Packs and Premium Skins were designed to provide a variety of options to style the editor to fit any UI/UX. It’s now available with the newest Tiny Cloud Essential plan.
Let’s use the borderless skin and small icons as an example.
HTML
xxxxxxxxxx
1
1
tinymce.init({
2
3
/* ... */
4
5
skin: "borderless",
6
7
icons: "small"
8
9
});
Then wrap our border, with the rounded corners, round the editor.
HTML
x
1
<div>
2
3
<textarea id="mytextarea"></textarea>
4
5
</div>
Complete Example
You can look at the complete example. Use CodePen and type your message. Click send.
What’s Next?
In this article, some ways to configure TinyMCE for a chat app is demonstrated. Yet, the possibilities are endless should you want to take things further. Take a screenshot and feel free to tag us with your own TinyMCE configuration on Twitter @joinTiny.
Check out our previous article on building a simple chat app using a WYSIWYG Editor to see the TinyMCE editor works in a chat application.
Topics:
html,
wysiwig,
chat apps,
tinymce,
configuration
Opinions expressed by DZone contributors are their own.
Comments