The use of WYSIWYG (What-You-See-Is-What-You-Get) as a text editor in blogging platforms, Content Management Systems (CMS), and management information systems are quite common. This feature is very helpful in creating paragraphs with diverse visual content, including colored text, tables, images, videos, emoticons, and more.

Background

A few days ago, I encountered an issue related to the use of WYSIWYG in the internal management information system at my workplace. This system has been in use for quite some time, approximately 12 years ago, before I joined the company. It presented a challenge for me to find the best solution. I noticed that the version of WYSIWYG being used was TinyMCE, but I couldn’t find the exact version, which made it difficult to search for specific solutions online.

Based on the information I gathered from internal users, they experienced a problem when editing data in the TinyMCE Textarea. When adding data, the characters appeared correctly, for example: “Disclosure of Environmental, Social, and Governance (ESG) on Film Performance Pre and Post Introduction of Integrated Reporting (<IR>): Evidence from ASEAN Countries.” However, when attempting to modify the data, the displayed characters became: “Disclosure of Environmental, Social, and Governance (ESG) on Film Performance Pre and Post Introduction of Integrated Reporting (): Evidence from ASEAN Countries.“

So, what can I do to resolve this issue?

I started by examining the previously written code, starting from the client-side code (HTML and JQuery) to the server-side code (PHP). After further analysis, the server-side code seemed to be functioning correctly, while the issue was on the client side, where the characters were being truncated by the TinyMCE plugins.

To solve the problem, I created some HTML and JQuery code to anticipate this issue. I added the following code snippet to the HTML:

<textarea name="titleOfThesis" id="titleOfThesis" cols="50" rows="10" class="tinymce">{TITLE_OF_THESIS}</textarea>
<!-- ADDED -->
<div id="titleOfThesisTemp" style="display:none;">{TITLE_OF_THESIS}</div>

Next, I added the following code snippet to the JQuery code:

/* ADDED */
setTimeout(function(){
    let titleOfThesisTemp = $('#titleOfThesisTemp').html();
    tinymce.get('titleOfThesisTemp').setContent(titleOfThesisTemp);   
}, 500);

In addition to the above JQuery code, an alternative approach could be using the following code:

/* ADDED */
setTimeout(function(){
	let titleOfThesisTemp = $('#titleOfThesisTemp').html();
	$(tinymce.get('titleOfThesisTemp').getBody()).html(titleOfThesisTemp);
}, 500);

Alternatively, you can also use the following code:

/* ADDED */
setTimeout(function(){
	let titleOfThesisTemp = $('#titleOfThesisTemp').html();
	tinyMCE.activeEditor.setContent(titleOfThesisTemp);        
}, 500);

Conclusion

In conclusion, the TinyMCE textarea interprets as an HTML tag because it is enclosed by “<” and “>”. Therefore, we need to create an alternative method to indirectly transfer content from the database to HTML (by using an intermediary step). Here, I attempted to store it in an HTML div, which is then set to the TinyMCE textarea (after the DOM-to-textarea TinyMCE process is complete) with a slight delay of a few seconds.

I would love to hear your thoughts on this blog post. Feel free to share your feedback and comments in the comments section below. Thank you!