If you look at today’s software applications that deal with content creation, you’ll notice that they have one thing in standard – comment sections. These allow users to interact with other users of an application, boosting the application’s usage while giving voice to the public.
Comment sections are everywhere, on social media, blogs, forums, and even productivity tools such as project management software. They are also widely used because of how versatile they are. Some let users upload images and other files.
Others allow only text content. Some allow more interactions, like reactions and editing. In essence, they have become an essential feature of most software applications.
Because comment sections are a large part of the user experience, users expect applications to provide a near-perfect editing experience. Thus, developers must build a reliable, feature-rich, fast, and secure comment section.
And what better way to implement such a comment section than to use a WYSIWYG HTML editor? That’s precisely what we’ll show you in this guide.
What is a WYSIWYG HTML editor?
HTML editors are classified into two types. The first is text editors, applications where developers can write code. These are usually purely text-based with helpful features such as syntax highlighting, making them more suitable for experienced developers.
The other type is WYSIWYG (What You See Is What You Get) HTML editors. These allow developers to see changes in their code instantly while minimizing coding work. They already have a complete set of editing features, an optimized user experience, and a better UI.
WYSIWYG Editors and Comment Sections
The sophistication of a comment section gets more work and spending time. Making a simple text-based comment section is easy. What if we add more features like spelling and grammar checkers, file uploading, reactions, edit history, and support for other languages and RTL typing?
Complicated parts are going to take developers months or even years to implement. Not to mention the maintenance you would have to do to keep things updated and working. So that’s where WYSIWYG editors come in.
As you’ll see below, WYSIWYG editors can provide what every comment section needs. So let’s get to building one.
How to Build a Comment Section Using a WYSIWYG Editor
We’ll add an essential comment section for general use. The components we’ll create would be:
- A parent post (can be just a regular, stylized <div> with a title for simplicity)
- The comment section itself, containing all posted comments
- A <textarea> field where you can write a comment
- A post button that saves a new comment
If you haven’t already, download and install the WYSIWYG HTML editor of your choice. Once you have finished setting it up and implementing it in your project, proceed to the next step.
The parent post is the primary content where the comments will revolve around it. It should contain some subject or title, the creator’s username (and photo), and the main content (images, text, videos, and so on).
Let’s use only a title and some placeholder text for this guide. For example, to create a sample parent post, just make a <div> wrapper that spans a certain width (entire width if mobile). Within it, add a title (of a specific heading size and style) and some text below.
The comment section is where all the comments will be displayed. It will also house the input field for comments and the post button. Add it as a new row below the parent post. Next, we must ensure that all further comments will be displayed.
To do this, create JavaScript code that sends a request to the server, where the backend code then queries a database for the comments. The comments will then be returned to the front end, ready to display.
Once the comments are received, use a loop to dynamically generate text (and associated metadata like username, profile picture, and date/time posted). And that’s it.
Let’s now move on to the comment area itself. Usually, to make one from scratch, you’d have to make a textarea element, then send its input to the server for processing and storage.
However, that would just be for text content. What if you want rich-text editing? Word count? Grammar and spell checkers? Autosaving? Making those from scratch would be too time-consuming.
To make your comments the WYSIWYG way, initialize your chosen editor within a <textarea> element. For example,
| // HTML: <textarea id=“commentBox”>Type your comment here…</textarea> // JS: <script> new FroalaEditor(‘textarea#commentBox’) </script> |
With the very few lines of code above, you’ll already have a textarea with powerful rich-text editing capabilities. The generated textarea would have character/word count, text and paragraph formatting, file uploads, emojis, special characters, link support, and so much more.
That’s already most of the things you’ll want from a comment section. For example, the above method would take a few seconds compared to months’ worth of developing a comment feature from scratch.
Once you implement the WYSIWYG textarea, you only need to save the content using a post button. It’s usually positioned beside the comment box (or at the lower right corner for bigger comment boxes). To do this using a WYSIWYG editor, simply include the save button in the editor’s toolbar button options, then define the corresponding save options.
Now you’re all set to make an HTTP request and send the data to a server for processing and storing. Note that you should always sanitize your input on the server side, along with constraint checking and other security measures.
And that’s it! Your very own comment section is made easy with WYSIWYG editors.
Let’s review some features you’ll probably want in your comments.
Autosave
Autosaving or message drafts is an excellent feature for those wanting to make comments. Sometimes, users would need to leave the application for various reasons. Other times, there would be unexpected power outages.
Sometimes, users don’t know what they’ll type yet. Thus, they’ll most likely need their content saved from time to time or their comments to be still drafted after they leave.
Autosaving can be enabled in WYSIWYG editors easily. In most WYSIWYG editors, you will only need to set some parameters and events, which are as follows:
- A parameter for the interval (in ms) between autosaves
- A URL is where the save request is made
- The HTTP request type
- An event is triggered before the save request is made (either for setting up additional parameters or canceling the save)
- An event is triggered after the content is successfully saved (for reloading the comments list or page, among other uses)
- An event is triggered in the case of any errors (“Connection lost” or other error messages and handling)
Localization
Another critical feature to have in your comments is localization. It allows your comment box or editor to adapt to your users’ language.
Some WYSIWYG editors offer support for other languages. To implement this efficiently, add a language option within your editor’s initialization script, then adjust accordingly.
The Spelling and Grammar Checker
People tend to make spelling and grammatical mistakes because of hasty typing, tiny/unintuitive mobile phone buttons, or drowsiness. And most definitely, people wouldn’t want to have many errors, especially on social media. Hence, it’s crucial to implement a spelling and grammar checker in your comments if you can.
Some WYSIWYG HTML editors integrate with third-party checkers like WProofreader. Activating such checkers requires you to subscribe to their service (free with some editors), receive an activation key, and pass the key to your script as an option.
Themes
Modern requirements for software applications today are themes. They allow users to have a personalized experience. Users who use dark mode on their device or browser prefer a comment section that fits. Themes let your comments section look the same as your entire application, and WYSIWYG editors can help.
To add themes to your comments section using WYSIWYG editors, you can either create your own or use one of the presets when initializing your editor. In addition, you’ll help your application be more personalized for your users with just one line.
Conclusion
This article discusses how you can build a comments section using a WYSIWYG editor and the other advanced features you could implement. WYSIWYG HTML editors, particularly those that can do everything discussed above, significantly improve user experience and program efficiency while greatly reducing costs and development time.
We’ve seen that it’s easy to create a comments section using WYSIWYG editors because they already have a complete set of features you’ll only have to call. However, you still need to find the right editor for your project.
Of course, you’ll want something with as many features as possible while still being affordable, beautiful, and lightweight.
But that’s a topic for another time. What matters right now is that you’ve learned how to build a solid comments section using a WYSIWYG HTML editor. So just by doing that, you’d be able to make both the developers and your users very happy.
