CODEWITHSUNDEEP
tinymcedefaultmoodle
tschomue
tschomue

Reputation: 11

Own default table style in TinyMCE

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.

Upvotes: 1

Views: 9335

Answers (5)

Archonic
Archonic

Reputation: 5362

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

Upvotes: 1

rnjai
rnjai

Reputation: 1135

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

Upvotes: 2

zeros-and-ones
zeros-and-ones

Reputation: 4438

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

Upvotes: 0

Gaurang Jadia
Gaurang Jadia

Reputation: 1516

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.

Upvotes: 0

Thariama
Thariama

Reputation: 50832

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

Upvotes: 0

Related Questions