Sign in Register
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 261 posts 1022 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 261 posts 1022 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 261 posts 1022 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 261 posts 1022 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 261 posts 1022 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 3451 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

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies