Show table borders during editing in Tiny Editors

Created:
Author: Christoph Stoettner
Read in about 2 min · 279 words
hcl hclconnections hclcnx tinyeditors

Website Design books

Photo by Greg Rakozy | Unsplash

After updating HCL Connections to 8CR3 and Tiny Editors to 4.9.2.24 the lines of tables are no longer visible during editing.

Here is the edit form with Tiny Editors 4.8.2.0:

Edit form with Tiny Editors 4.8.2.0 and table with border=0

When you try the same in Tiny Editors 4.9.2.24 the editor shows just white space, and you have to have a good imagination of the table cells to click into the right one.

Edit form with Tiny Editors 4.9.2.24 and table with border=0

The CSS classes are still there, so why does the editor hide the borders in edit mode too?

Table tag in Tiny Editors 4.8.2.0:

<table dir="ltr" style="border-collapse: collapse; width: 100%;" data-mce-style="border-collapse: collapse; width: 100%;" class="mce-item-table" border="0">

Table tag in Tiny Editors 4.9.2.24:

<table style="border-collapse: collapse; width: 100%; border-width: 0px;" border="1">

So the difference is that the new version keeps border="1" and removes the border with style=...;border-width: 0px;

The CSS class that should show the dashed lines is defined as:

.mce-item-table:not([border]),
.mce-item-table:not([border]) caption,
.mce-item-table:not([border]) td,
.mce-item-table:not([border]) th,
.mce-item-table[border="0"],
.mce-item-table[border="0"] caption,
.mce-item-table[border="0"] td,
.mce-item-table[border="0"] th,
table[style*="border-width: 0px"],
table[style*="border-width: 0px"] caption,
table[style*="border-width: 0px"] td,
table[style*="border-width: 0px"] th {
         border:1px dashed #bbb;
 }

The CSS rule gets overwritten by the element and needs to be changed.

Edit form with Tiny Editors 4.9.2.24 and table with border=0

The easiest workaround is to go to your customization folder, edit <shared directory>/customization/javascript/tiny/editors/connections/tiny-editors.css and add this to the end:

.mce-item-table:not([border]),
.mce-item-table:not([border]) caption,
.mce-item-table:not([border]) td,
.mce-item-table:not([border]) th,
.mce-item-table[border="0"],
.mce-item-table[border="0"] caption,
.mce-item-table[border="0"] td,
.mce-item-table[border="0"] th,
table[style*="border-width: 0px"],
table[style*="border-width: 0px"] caption,
table[style*="border-width: 0px"] td,
table[style*="border-width: 0px"] th {
         border:1px dashed #bbb !important;
 }

Restart the Common App, and the dashed lines are back in the editor window.

Comments
Error
There was an error sending your comment, please try again.
Thank you!
Your comment has been submitted and will be published once it has been approved.
Success!
Your comment has been posted successfully.

Comments

Loading comments...

Leave a Comment

Your email address will not be published. Required fields are marked with *

Suggested Reading
Card image cap

Troubleshooting Top Updates in HCL Connections

Last week, I had three systems with issues displaying the Top Updates in the Orient Me. So I tried to find out which applications and containers are involved in generating the content for this view.

Created: Read in about 4 min
Card image cap

Hide widget from Highlights

With HCL Connections 6.5 and later, we got the add-on HCL Connections Engagement Center (aka CEC, HCEC, ICEC or XCC) included in a normal HCL Connections deployment.

Created:
Last Update: Read in about 6 min
Card image cap

Security Directory Integrator connecting to Active Directory LDAPS

I had one Connections’ environment that I wanted to switch from OpenLDAP to Active Directory LDAP. The old OpenLDAP environment used LDAPS to connect, and so I assumed that the change was done quickly.

The first step was to make a copy of the tdisol folder I used for OpenLDAP and start changing the configuration files for the new LDAP server.

Created: Read in about 4 min