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 240 posts 941 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.

  • 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/

  • Martin Rud 240 posts 941 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

  • Martin Rud 240 posts 941 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>
    
  • Martin Rud 240 posts 941 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\"}"
            }
          },
    

    ..... } },

  • Tom Jones 17 posts 148 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.

  • Martin Rud 240 posts 941 karma points c-trib
    May 30, 2023 @ 20:17
    Martin Rud
    0

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

  • Simon Dingley 1472 posts 3429 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: {}

Please Sign in or register to post replies

Write your reply to:

Draft