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.

Author

Christoph Stoettner

I work at Vegard IT GmbH as a senior consultant with a focus on collaboration software, Kubernetes, security and automation. I mainly deal with HCL Connections, WebSphere Application Server, Kubernetes, Ansible, Terraform and Linux.

Sometimes my daily work results in technical talks and blog articles, which you can follow here more or less regularly. You can find the presentations in the main menu under public speaking .

I created a list of tools I use regularly, most of which have been released under an open source license.

In my spare time I read a lot, test all kinds of technical software and gadgets and try to follow about 200 RSS feeds.
Here you can find a collection of them.

This is my private blog, all opinions are my own.

           

Add a comment
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.

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

Suggested Reading
Card image cap

Migrate MongoDB in HCL Connections Component Pack 8

The official documentation, “Migrating data from MongoDB 3 to 5”, wants to dump the MongoDB databases in 3.6 and then restore this data into the newly deployed MongoDB 5.

One issue with this process is that we can’t run the two MongoDB versions in parallel on Kubernetes because the provided helm charts and container for MongoDB 3.6 stop running after Kubernetes 1.21. On the other side, the helm chart providing MongoDB 5 can’t be installed on those old Kubernetes versions. So the process to update is:

Migration process

  1. Dump databases in MongoDB 3.6 (version delivered with Connections 7)
  2. Update Kubernetes to 1.25 or 1.27
  3. Restore MongoDB databases to version 5.0
Created:
Last Update: Read in about 6 min
Card image cap

HorizontalPodAutoscalers (HPA) with HCL Connections Component Pack

During a troubleshooting session in Component Pack, I checked the Kubernetes events.

Created: Read in about 3 min
Card image cap

Engage 2023

This year, Engage took place at the Felix Meritis in Amsterdam . The Engage board (Hilde, Theo and Kris) did a great job and made this very special conference a great success.

Created: Read in about 1 min