Sign in Register
Go to solution
Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Martin Rud 260 posts 1001 karma points c-trib
    Mar 01, 2023 @ 12:50
    Martin Rud
    0

    Rich text editor: How to add class ".table" to inserted tables?

    I want to use Bootstrap table styling and therefore would like that tables inserted in TinyMCE have class .table added:

    <table class="table">
...
</table>

    According to https://www.tiny.cloud/docs/plugins/opensource/table/#exampleusingtabledefaultattributes I have tried to do this in the Umbraco appsettings.json: 

          "Umbraco": {
        "CMS": {
          "RichTextEditor": {
            "CustomConfig": {
              "table_default_attributes": "{\"class\": \"table\"}"
            }
          },
.....
        }
      },

    But it has no effect, so I guess I am not doing it right.

    Copy Link
  • JoskerVemeulen 68 posts 262 karma points
    Mar 01, 2023 @ 13:03
    JoskerVemeulen
    0

    Which version bootstrap?

    Did you include bootstrap styling/scripting to your page? You will need this to take effect.

    https://getbootstrap.com/docs/5.0/content/tables/

    Copy Link
  • Martin Rud 260 posts 1001 karma points c-trib
    Mar 01, 2023 @ 13:08
    Martin Rud
    0

    Yes, Bootstrap is included in my frontend setup. The problem is that in the rich text source view I can see no class added: enter image description here

    Copy Link
  • Martin Rud 260 posts 1001 karma points c-trib
    Mar 09, 2023 @ 06:48
    Martin Rud
    0

    It must have been some kind of caching tricking me because now it does insert the class: 

    <table border="0" class="table" style="border-collapse: collapse; width: 100%;">
<tbody>
<tr>
<td style="width: 49.5513%;">Lorem</td>
<td style="width: 49.5513%;">ipsum</td>
</tr>
<tr>
<td style="width: 49.5513%;">Lorem</td>
<td style="width: 49.5513%;">apsum</td>
</tr>
</tbody>
</table>
    Copy Link
  • Martin Rud 260 posts 1001 karma points c-trib
    Mar 09, 2023 @ 06:49
    Martin Rud
    103

    The solution is to add this "RichTextEditor" node in appsettings.json :

      "Umbraco": {
    "CMS": {
      "RichTextEditor": {
        "CustomConfig": {
          "table_default_attributes": "{\"class\": \"table\"}"
        }
      },

    ..... } },

    Copy Link
  • Tom Jones 19 posts 150 karma points
    May 29, 2023 @ 11:25
    Tom Jones
    0

    How did you get around whatever caching is in place? I've added the same thing but it's not updating after an app restart.

    Copy Link
  • Martin Rud 260 posts 1001 karma points c-trib
    May 30, 2023 @ 20:17
    Martin Rud
    0

    I have no good advice since the above worked for me, sorry.

    Copy Link
  • Simon Dingley 1474 posts 3431 karma points c-trib
    May 17, 2024 @ 12:11
    Simon Dingley
    0

    Great answer and does solve the original issue but unfortunately it does not remove the border="1" attribute that is added by default. Have you managed to achieve that?

    The following applies the default class and removes the border value but not the attribute unfortunately:

    "table_default_attributes": "{ \"class\": \"table\", \"border\": \"\" }"

    The TinyMCE docs indicate the athis should remove all attributes but it doesn't:

    table_default_attributes: {}

    Copy Link
  • Tal Winter 21 posts 51 karma points
    Jul 30, 2024 @ 14:13
    Tal Winter
    0

    Did you solve it? happening to me now too. No class is added

    Copy Link
  • Tom Jones 19 posts 150 karma points
    Jul 30, 2024 @ 14:16
    Tom Jones
    0

    I wrote up a post a while covering a few things I needed solving. The table class solution is on this anchor:

    https://tomjones.dev/blog/configure-and-customise-the-umbraco-rich-text-editor/#mcetoc_1h5us4a7h37

    Copy Link
  • Tal Winter 21 posts 51 karma points
    Jul 30, 2024 @ 14:23
    Tal Winter
    0

    SO weird! I added the tabledefaultattributes for the 1st time now and it was added. Then I change the class to another class and it still on the previous class. I cleared caches and everything. the class doesn't change. Any ideas?

    Copy Link
  • Tom Jones 19 posts 150 karma points
    Jul 30, 2024 @ 14:30
    Tom Jones
    0

    Depending on the version of .NET, appsettings.json changes aren't always updated until the server is restarted.

    Copy Link
  • Tal Winter 21 posts 51 karma points
    Jul 30, 2024 @ 15:06
    Tal Winter
    0

    I am working localhost so it always restarts :) It's so weird .. it doesn't catch.

    Copy Link
Please Sign in or register to post replies

Write your reply to:

Draft