CODEWITHSUNDEEP
jqueryhtmlhtml-tabletinymce
Edward
Edward

Reputation: 3091

Add custom table style for tinyMCE

I wish to add custom table style for TinyMCE how can I specify how I want my table/header/rows styled?

    <table class="tdata " border="0" cellpadding="0" cellspacing="0" 
width="600" style="margin-top: 8px; font-family: tahoma, arial, sans-serif; 
width: 600px; color: #000000;">




<th style="margin: 0px; padding: 2px 0px; border-top-width: 2px; 
border-top-style: solid; border-top-color: black;
border-bottom-width: 2px; border-bottom-style: solid; 
border-bottom-color: #aaaaaa; vertical-align: bottom; 
font-size: 10px; width:144px; text-align:center;">Company</th>


     formats : {

     customformat : {inline : 'span', styles : {verticalAlign: 'middle',
 borderWidth: '0px 0px 1px', borderStyle:'none none solid', 
borderbottomcolor: '#aaaaaa', fontFamily: 'tahoma, arial,
 sans-serif', fontSize: '10px', color: '333333'}, attributes : 
{title : 'My custom format'}}
            },

Upvotes: 2

Views: 4305

Answers (2)

BJ Patel
BJ Patel

Reputation: 6278

Try adding following to

\config\tinyMceConfig.config

<config>

<config key="extended_valid_elements">table[class=tdata]</config>

</config>

And so on

Upvotes: 0

Thariama
Thariama

Reputation: 50840

You may add your own css file to the editor iframe head which will then get apllied to the editor content. To include this css file you simple need to use the tinymce configuration parameter content_css

tinyMCE.init({
        ...
        content_css : "http::/your_server/your_css/your_custom_content.css"    
});

Upvotes: 2

Related Questions