customize tiny MCE blockqute

Hi we all know by default tiny MCE’s blockquote generates this

<blockquote> content here </blockquote>

I am styling this via CSS :

Read More

enter image description here

the css im using :

blockquote { border: none; font-family: 'Georgia', serif; color: #444; font-size: 1.2em;
           font-weight: bold; font-style: italic; font-weight: normal;
           padding: 0; text-indent: 1.2em; color: #222;
           border-bottom: 1px solid #888; 
           position: relative; bottom: 12px;  }

.no-js blockquote { position: static; bottom: auto; border: none; }

blockquote span { position: relative; top: 12px; background-color: white; padding: 0 15px; }

for the trailing line to appear without adding unneccesary unsemantic markup
i need to generate a span inside the blockquote :

<blockquote>
     <span>
        content here
    </span>
</blockquote>

preferably without making a separate shortcode for this and just use the native blockquote button.

can anybody help?

Related posts

Leave a Reply

3 comments

  1. If it’s for styling purpose, the fastest solution I could think of is by using Javascript. As far as I know, modifying the output of TinyMCE tag would require editing of WordPress core files, so it’s more practical to append a <span> with Javascript. Something like this would do:

    <script type="text/javascript>
       $('.post blockquote').wrapInner('<span />');
    </script>
    

    Where .post is the class for your single post container.

  2. SOLVED thanks to Deathlock :

    // unwrap inner
    var blockquotes = $('.post blockquote');
    blockquotes.html(blockquotes.find('p').text());
    
    // rewrap with span
    blockquotes.wrapInner('<span />');