Hi kello,

I was thinking if the Table editor could be a solution / workaround. WIth the Simple V7 table editor that allows you to add styling for row/col styles. You can also add some basic class / styling for tables when you created them as I see it.

http://our.umbraco.org//projects/backoffice-extensions/table-editor

When you have installed the package you create a new data type, under the data types folder in the developer selection.The property editor you choose is simple the table editor.

Hope this helps,

/Dennis

Hi Dennis

Thank you for the pointer. I saw table editor before but the main issue is I have quite a bit of content inside tinymce where the Table is in the middle of the content (i..e existing content).

I am not sure about the integration of the table editor data-type in such scnearios, especially with existing content within tinymce and quite a number of pages...

Its a real pity that there is no way to add a 'style' to a table in the V7, unles Im missing something obvious..

I'm also having a same issue,

I'm currently looking at the table plugin option for the tinymce.

I'm not sure if I'm heading toward right direction but can you keep us updated if you find a solution?

I will also.

Cheers

Shinsuke

Hi Shinsuke

You mentioned you are looking at the table plug-in, from what I know the default implementation have the table plugin enabled already?

I would be interested to know which part of the plugin or approach you are looking. Are you referring to editing the JS file(s)?

Really do hope we are missing something obvious here as its simply not logical to have this feature (assigning class to table) missing in v7 shipped tinymce.

cheers

Hi Shinsuke

I noticed the tinymce online preview Table properties dialog have this Advanced Tab,

http://i.imgur.com/PGFhCkP.jpg

http://i.imgur.com/bdfn3dl.jpg

But this is missing from the tinymce shipped with v7 (using 7.1.6). Its the same exact dialog from the looks of it but the Advanced Tab is disabled.

When I goto plugins/table folder under tinymce folder in umbraco, i can see the table.html which contains the markup for Advanced Tab (like the in pictures above) but something is not activating it.

If we can find out how to enable it, or if someone can explain why its disabled in the first place (does it break something?), that would solve the problem altogether.

cheers

Yes i noticed that too, but that doesn't really help because it doesn't allow me to input class name into a table. and our client won't know anything about styling tables.

I'm still looking for a better solution but my best solution right now is injecting a class into a body tag of the iframe setup by the tinymce.

so then i can setup a unique styling in the rich text editor base on the field alias, and my css will look like this

.fieldAlias_rte table {}
.fieldAlias_rte table tr {}
.fieldAlias_rte table tr td {}

the code change i've made in the Umbraco code is this

Umbraco\Js\Umbraco.controllers.js @ line5555 ish

//added following code in the "baseLineConfigObj" preoprty.
body_class: $scope.model.alias + "_rte"

Only thing with this is you can't turn off and on the styling.

Cheers

Shinsuke

Thats an interesting hack. By adding _rte and overriding default table, tr, td styles are you creating a single class for all tables, rows, columns?

How would you handle variable styles, say if user wants to change row x color to orange (or style X) ?

I was reading the tinymce forums and I came up with this hack (this still doesnt solve the need of being able to give user option to change table class to another like table-with-stripes etc., it just makes the default created table of certain class);

in tinymce.config add the following line just before </customConfig>

<config key="extended_valid_elements">table[class=table|border:1|width=100%]</config>

And each time user creates a table within RTE, it will have the default class and properties.

Now, I need to find a way to let user change the table class, or add to it, like class="table table-with-stripes". Short of ideas here..

Do let me know if you can think of a way to accomplish that, as your hack is way too cooler than mine : )

cheers

Hi Keilo,

Sorry about the late reply, i'm creating a single class for a Rich Text Editor base on the unique field name (field alias).

I haven't found an easy way to change the row color but I can change the cell color, and if you change the all the cell in a row, then that basically changes the row color.

here's the css sample

body.sample_rte table tr td { position: relative; }
body.sample_rte table tr td .orange { display: inline-block; width: 100%; height: 100%; background: orange; }

and on Rich Text Editor, select a cell, and just press enter.

Then highlight the space bar and apply a format call orange.

Or if you just want the odd and even sequence, you can do this

.sample_rte table tr:nth-child(odd)     { background-color:#eee; }
.sample_rte table tr:nth-child(even)    { background-color:#fff; }

Cheers

Shinsuke

is working on a reply...