tinymce config table_class_list - UI Questions

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

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

Veronica Burd 76 posts 201 karma points

Dec 02, 2015 @ 14:49
0

tinymce config table_class_list
Hi,

While reading the tinymce documentation (https://www.tinymce.com/docs/plugins/table/) I found a mention of a setting called tableclasslist

This option enables you to specify a list of classes to present in the table options dialog box. This is useful if you want users to assign predefined classes to table elements.

This seems to be just what I need to allow my editors to apply bootstrap formatting to a whole table.

I added a custom config key to the tinyMceConfig.config file like this:
```
<config key="table_class_list">
    [
    {title: 'None', value: ''},
    {title: 'Striped', value: 'table table-striped'},
    {title: 'Border', value: 'table table-bordered'}, 
    {title: 'StripedBorder', value: 'table table-striped table-bordered'}, 
    ]
</config>
```
This causes the Class dropdown to appear in the table properties dialog box but there are no entries in the list.

Has anyone ever tried to use this functionality and has a working config they could share?

Thanks

Ver
Copy Link
Connie DeCinko 931 posts 1160 karma points

Feb 03, 2016 @ 22:33
0
Any luck on this? I wonder if you have to tie it to the theme somehow like some of the other settings.
```
<config key="theme_umbraco_styles">
```
Maybe?
```
<config key="theme_umbraco_table_class_list">
```
Copy Link
Tim Moxon 3 posts 94 karma points

Jul 15, 2016 @ 15:25
100
Owing to a slight peculiarity with the way the configuration is evaluated you need to format the customConfig node as json that can be parsed by JSON.parse. To follow through the tinymce stock example, you need to format it as such (note specifically the use of quotes to delimit both key and value):
```
  <config key="table_class_list">
     [
        {"title": "None", "value": ""},
        {"title": "Dog", "value": "dog"},
        {"title": "Cat", "value": "cat"}
     ]
  </config>
```
Copy Link

Veronica Burd 76 posts 201 karma points

Jul 18, 2016 @ 07:33

Thanks Tim that worked a treat!

Just in case any else needs this, this is how I set up mine:

    <config key="table_class_list">
        [
        {"title": "None", "value": ""},
        {"title": "Striped", "value": "table table-striped"},
        {"title": "Border", "value": "table table-bordered"},
        {"title": "StripedBorder", "value": "table table-striped table-bordered"}
        ]

Copy Link

Martin Griffiths 826 posts 1269 karma points c-trib

Aug 01, 2017 @ 14:57

0

Has anyone tried this recently in Umbraco 7.6.x? I'm getting the long empty list despite formatting for JSON.

Copy Link
Veronica Burd 7 posts 118 karma points

Aug 02, 2017 @ 06:03

0

I've upgraded my project to 7.6.3 and this still works. You could try posting your config here see if anyone can spot any issues?

Copy Link

lori ryan 239 posts 573 karma points

Aug 07, 2018 @ 13:06

Hi Veronica Just wondering was this all that was needed to get the class attribute to show up ? Just cant get it working :-(

<config key="table_class_list">
    [
    {"title": "None", "value": ""},
    {"title": "Striped", "value": "table table-striped"},
    {"title": "Border", "value": "table table-bordered"},
    {"title": "StripedBorder", "value": "table table-striped table-bordered"}
    ]
 ]

Copy Link

lori ryan 239 posts 573 karma points

Aug 09, 2018 @ 12:05

Just in case anybody stumbles upon this - this works

    <config key="table_default_attributes">{ "border" : "0", "class": "table"}</config>
<config key="table_class_list">
  [
  {"title": "Responsive", "value": "table"},{"title": "None", "value": ""},{"title": "Hover", "value": "table table-hover"},{"title": "Striped", "value": "table table-striped"},{"title": "Condensed", "value": "table table-condensed"},{"title": "Bordered", "value": "table table-bordered"}
  ]
</config>

Copy Link

is working on a reply...

Please Sign in or register to post replies