A reader reached out to us on LinkedIn this week (thank you for the idea, MK, and thank you for reading!) The conversation concerned the concept of Rich Text in Text Areas. Now, we have already touched on that in an earlier article which showcased four different things that you could do to make a TextArea a bit more attractive to users. These included counting characters, using drag and drop and also using TinyMCE, the world-famous content-creation platform and editing toolset, that you and I have probably seen on a thousand websites.
This article returns to the subject of TinyMCE to look at integrating it into an Interview in a little more detail. We still start the process with a TextArea of course, but we end up with a couple of interesting features that might come in handy.
The first is the ability to see both the text content and the HTML content of the TextArea, because of course the whole point of using TinyMCE is to allow the user to enter some richly formatted text. TinyMCE version 5 produces XHTML output – that is, the content of the editing area is in reality expressed (and therefore stored in Oracle Intelligent Advisor) as XHTML. Here is a simple side-by-side comparison:
But this does bring up a serious issue – the difference between the number of characters in the users eyes (212 in this case) and the actual number of characters consumed (257 in this case because the Textarea has HTML tags inside it.
Beware when setting limits for data entry, since it might not actually be the limit that your user is focussed on. Here is a demonstration in video form of the Textarea using TinyMCE and displaying a few nice features of the platform – the ability to create template text and let the user click to enter it, the ability to create custom menu options and finally the ability to extract data and display it for whatever your purpose is (in this case, creating 2 different counters). Note that in TinyMCE 5 it is no longer possible to add custom buttons to the status bar, to maintain accessibility features. So in this demo, the counters are displayed outside the Textarea. You can also view the demo on YouTube.
The Zip File is in the shop as usual, remember that if you are a premium member you get 15% off everything for the duration of your membership.
TinyMCE is now completely cloud-friendly, so this example requires you to create a free account and use the associated link to access the library. You assign it to domains you wish to use it on, and localhost is also available. This video was recorded on local hardware using the debugger (Ctrl+F5 to start the browser).