Own default table style in TinyMCE - tinymce

Question

I would like to set an own table style as default style within the TinyMCE editor (version 3.4.9 within Moodle 2.2.3).
Right now, my new styles are shown in the dropdown, but I cannot manage to get one as the default table style. The default value is always "-- not set --", which means that no table style will be used.
This is how it looks at the moment:
https://img.skitch.com/20111226-f4wgp8kudx45t6e2s17yse4cq6.jpg
This is how it should look like at the end ("Tircia Style" should be default):
https://img.skitch.com/20111226-dcf3t3w7qxagst1xgr2ieas26b.jpg
Pictures are from the TinyMCEforum.

Answer 1

When you initialize tinymce please add the path to a new css file which will define the styles used within the editor.
tinymce.init({
content_css: [
'/css/innerLayout.css'
]
});
Some sample styles for innerLayout.css for tables -
.mce-content-body table{width:100%;border-spacing:0;border-collapse:separate;border:0}
.mce-content-body table tr:nth-child(even){background:#FAFAFA}
.mce-content-body table caption,.mce-content-body table td,.mce-content-body table th{padding:15px 7px;border:0;font:inherit}
.mce-content-body table th{font-weight:400;color:#6E6E6E;border-bottom:2px solid #B9B9B9!important;
Other styles can be found here - link

Answer 2

Don't modify core files. I realize there previously wasn't a choice, but in TinyMCE 4.x there is now a way to set default table styles with table_default_styles.
http://fiddle.tinymce.com/iUeaab

Answer 3

in tables.js add the following code:
function init() {
settings = tinyMCE.settings;
settings["table_styles"] = "default1=red;default2=blue;" + settings["table_styles"];
tinyMCE.settings["table_styles"] = settings["table_styles"];

Answer 4

I had the same issue and I tried to solve it by passing Configuration or changing library JavaScript files. I started doing reverse engineering of table.js (/tiny_mce/plugins/table/js/table.js). But, no luck.
So, I went to table.htm (/tiny_mce/plugins/table/table.htm) which is template file for table plugin's modal dialog box. Commented out preset option {#not_set} form the select control.
<tr id="styleSelectRow">
<td><label id="classlabel" for="class">{#class_name}</label></td>
<td colspan="3">
<select id="class" name="class" class="mceEditableSelect">
<!--<option value="" selected="selected">{#not_set}</option>-->
</select>
</td>
</tr>
Now, you should pass table_styles always to the initial configuration when we initiate TinyMCE.
var varTimyMCE = $("textarea").tinymce({
table_styles : "Custom 1=classTable1",
});
This is not the ideal solution but it works for now. I hope TinyMCE developer will give configuration options to control select control in the future releases.

Answer 5

You can edit the plugin.js(\tinymce\js\tinymce\plugins\table\plugin.js) if you are using the unminified tinyMCE.js. On the current version it is line 1872. I added to make the default table styling responsive.
html = '<div class="table-responsive"><table class="table"><tbody>'; // line 1882 or 1916
html += '</tbody></table></div>'; // line 1884 or 1928