Bramanto

Solving WYSIWYG Issue: Handling Character Truncation in TinyMCE Editor

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!

Quickly Code to Show All PHP Errors

Finally, I tried to work up the courage to write on the WordPress platform that I set up on my domain. I hope that I can continue to be consistent in writing anything that at least later or in the future can be useful for myself or my friends in the virtual. Hopefully, I am always eager to fill in the content here!

Background

When I am doing the coding and testing process, of course, it does not always run smoothly. Because I realized, I am still a human who can not be separated from sin. This is what causes me to have to trace what mistakes I have made in the coding process. I tried to trace it by doing debugging to find out what problem is being encountered. In this case, I use the PHP programming language. Actually, by default PHP already provides information according to what we are running, including errors in coding. However, in some cases, I cannot get error information on the system because error information is disabled for reasons of ignoring errors or for purposes in a production environment. Therefore, we can open or enable the error so that we can solve the problem.

So, what can I do with the Code?

Usually, I use the simple three lines of code below to see the error I get when debugging. I put it at the head or top of the process. Or usually, I put it in the main file (eg: index.php).

<?php

ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);

Conclusion

So that is my simple way of debugging the code I am running. But you need to remember, do not ever try it in a production environment! Note that!
So what do you think about this post? Leave this message in the comments section, thank you!