I there a way to apply a default class to an element?

[Macs75]

Hello, first thank you for this amazing library. The question in the title is to solve a problem with bootstrap. I'd like to create a table that has already the class="table" applyed from the start without having to add it manually from the style or property dialog. `

` this way the table is properly displayed in a bootstrap application without having to override direcly the style of table entity.

[anthonyjb]

Hi @Macs75,

Thanks for the kind words :+1: I'd recommend overriding the existing table tool to do this, for example:

class ContentTools.Tools.BootstrapTable extends ContentTools.Tools.Table

    # Insert/Update Bootstrap table

    ContentTools.ToolShelf.stow(@, 'table')

    @_createTable: (section, columns) ->
        table = ContentTools.Tools.Table._createTable(section, column)
        table.addCSSClass('table')
        return table

Another option would be to listen for the attach event and ensure the table has that class:

ContentEdit.Root.get().bind('attach', function(element) {

    // We're only interested in tables
    if (element.type() !== 'Table') {
        return;
    }

    // Add the table class to table
    element.addCSSClass('table')
});

Despite the above options I think supporting for a way to define defaults for elements when added could be very useful, so I'm going to tag this as an enhancement as well.

[Macs75]

Thank you for the workaround, just out of curiosity, why not @_adjustColumns and not in @_createTable ?

[anthonyjb]

@Macs75 Typing faster than I can think, you are entirely correct, I've updated the code in my previous comment.

[Macs75]

Verified and works fine, thanks again.

Now I've hit another problem with integration with bootstrap. Let's say you want a table inside a content editable area and slyle it to fill only part of the available width, in bootstrap it's done like this:

<div data-editable data-name="main-content">
    <blockquote>
        Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live.
    </blockquote>
    <p>John F. Woods</p>
    <div class="row">
         <div class="col-md-7"> 
              <table class="table table-bordered">
                  <tr>
                        <td>123455</td>
                        <td>ABCDEF</td>
                  </tr>
              </table>
         </div>   
    </div>
</div>

If I include those divs then the table is not editable anymore. It could be useful to have a sort of flag to make the inside table still be editable but part of "main-content" data. Maybe adding data-editable to the table without a data-name attribute makes it part of a father editable content even without being a direct child of the main div. Then at the moment of save the whole div is still sent to be saved. I understand there is already the handling of static content, in this case the static content has inside content-editable parts.

[anthonyjb]

@Macs75 at the moment there isn't an out of the box solution for layouts of this sort dynamically. There's some discussion on this here #13 and this is a planned enhancement. Some (@bfintal) have already added support for manageable grid layouts as extensions to CT, so depending on how soon you need it - developing a bootstrap style grid element for ContentEdit could be an option.

One option available now would be to split your content into multiple regions, for example:

<div>
    <div data-editable data-name="main-content-1">
        <blockquote>
            Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live.
        </blockquote>
        <p>John F. Woods</p>
    </div>
    <div class="row">
         <div class="col-md-7" data-editable data-name="main-content-2"> 
              <table class="table table-bordered">
                  <tr>
                        <td>123455</td>
                        <td>ABCDEF</td>
                  </tr>
              </table>
         </div>   
    </div>
</div>

[FrancoisYu]

For the following code, it's not working :

ContentEdit.Root.get().bind('attach', function(element) {

    // We're only interested in tables
    if (element.type() !== 'Table') {
        return;
    }

    // Add the table class to table
    element.addCSSClass('table')
});

Instead, I use:

ContentEdit.Root.get().bind('attach', function(element) {

    // We're only interested in tables
    if (element.type() !== 'Table') {
        return;
    }

    // Add the table class to table
    ContentEdit.addCSSClass(element._domElement, 'table');
});

[ghost]

Yep, lots of css framework require some classes in order to function well, so it would be a extremly useful feature.

[itsmelion]

I need stuff like this also for SEO purposes. But instead of a Default class, i need a default attribute for all anchors of a view: rel="external,nofollow"

am i missing something? how can i define this?

[anthonyjb]

@itsmelion specifically for the case in question if you wanted to rely on ContentTools to ensure rel="external,nofollow" is always in place then the simplest option would be to define your own link tool (based on the existing one but modifying the code here: https://github.com/GetmeUK/ContentTools/blob/master/src/scripts/tools.coffee#L364 to include element.a.ref = 'external,nofollow').

Links are a bit of a special case here because they're not an ContentEdit element type they only exist as elements within the contents of a ContentEdit.Text element so there's no simple way to set set a default for them - though I can see the need here and think this might be something to look at as a future feature.