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 200 karma points
    Dec 02, 2015 @ 14:49
    Veronica Burd
    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.

    Empty Class dropdown in table properties

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

    Thanks

    Ver

  • Connie DeCinko 931 posts 1159 karma points
    Feb 03, 2016 @ 22:33
    Connie DeCinko
    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">
    
  • Tim Moxon 3 posts 94 karma points
    Jul 15, 2016 @ 15:25
    Tim Moxon
    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>
    
  • Veronica Burd 76 posts 200 karma points
    Jul 18, 2016 @ 07:33
    Veronica Burd
    0

    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"}
            ]
    
  • Martin Griffiths 781 posts 1178 karma points c-trib
    Aug 01, 2017 @ 14:57
    Martin Griffiths
    0

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

  • Veronica Burd 7 posts 118 karma points
    Aug 02, 2017 @ 06:03
    Veronica Burd
    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?

  • lori ryan 54 posts 237 karma points
    Aug 07, 2018 @ 13:06
    lori ryan
    0

    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"}
        ]
     ]
    

  • lori ryan 54 posts 237 karma points
    Aug 09, 2018 @ 12:05
    lori ryan
    1

    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>
    
Please Sign in or register to post replies

Write your reply to:

Draft