<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Welcome to Dhrusya Solutions &#187; WordPress</title>
	<atom:link href="http://demo.dhrusya.com/wordpress/feed/" rel="self" type="application/rss+xml" />
	<link>http://demo.dhrusya.com</link>
	<description>Web Development</description>
	<lastBuildDate>Mon, 29 Sep 2014 09:36:59 +0000</lastBuildDate>
	<language>en-US</language>
		<sy:updatePeriod>hourly</sy:updatePeriod>
		<sy:updateFrequency>1</sy:updateFrequency>
	<generator>https://wordpress.org/?v=4.0.38</generator>
	<item>
		<title>Working with TinyMCE</title>
		<link>http://demo.dhrusya.com/working-with-tinymce-2/</link>
		<comments>http://demo.dhrusya.com/working-with-tinymce-2/#comments</comments>
		<pubDate>Wed, 11 Jun 2014 08:57:01 +0000</pubDate>
		<dc:creator><![CDATA[wp-admin]]></dc:creator>
				<category><![CDATA[Wordpress]]></category>

		<guid isPermaLink="false">http://demo.dhrusya.com/?p=189</guid>
		<description><![CDATA[You can not enhance the drop down list formatselect. Bu [&#8230;]]]></description>
				<content:encoded><![CDATA[<div>
<p>You can not enhance the drop down list <code>formatselect</code>. But you can enhance with the hook <code>tiny_mce_before_init</code> the second drop down <code>styleselect</code>, there is hide in a default WordPress install. The <a href="http://www.tinymce.com/wiki.php/Configuration%3aformats" rel="nofollow">documentation</a> list all defaults and possibilities.</p>
<ul>
<li>inline – Name of the inline element to produce for example “span”. The current text selection will be wrapped in this inline element.</li>
<li>block – Name of the block element to produce for example “h1″. Existing block elements within the selection gets replaced with the new block element.</li>
<li>selector – CSS 3 selector pattern to find elements within the selection by. This can be used to apply classes to specific elements or complex things like odd rows in a table.</li>
<li>classes – Space separated list of classes to apply the the selected elements or the new inline/block element.</li>
<li>styles – Name/value object with CSS tyle items to apply such as color etc.</li>
<li>attributes – Name/value object with attributes to apply to the selected elements or the new inline/block element.</li>
<li>exact – Disables the merge similar styles feature when used. This is needed for some CSS inheritance issues such as text-decoration for underline/strikethough.</li>
<li>wrapper – State that tells that the current format is a container format for block elements. For example a div wrapper or blockquote.</li>
</ul>
<h2>The Style Button</h2>
<p>Note that, by default, the Style dropdown is hidden in WordPress. At first add the button for custom formats to a menu bar of TinyMCE, in example line 2 with hook <code>mce_buttons_2</code>.</p>
<blockquote>
<pre><code>add_filter( 'mce_buttons_2', 'fb_mce_editor_buttons' );
function fb_mce_editor_buttons( $buttons ) {

    array_unshift( $buttons, 'styleselect' );
    return $buttons;
}</code></pre>
</blockquote>
<h2>The Custom Styles</h2>
<p>Then enhance the drop down of this button. Aslo useful the enancement via additional value in the array, see the <a href="http://codex.wordpress.org/Plugin_API/Filter_Reference/tiny_mce_before_init" rel="nofollow">codex</a> for this example.</p>
<blockquote>
<pre><code>/**
 * Add styles/classes to the "Styles" drop-down
 */ 
add_filter( 'tiny_mce_before_init', 'fb_mce_before_init' );

function fb_mce_before_init( $settings ) {

    $style_formats = array(
        array(
            'title' =&gt; 'Download Link',
            'selector' =&gt; 'a',
            'classes' =&gt; 'download'
            ),
        array(
            'title' =&gt; 'My Test',
            'selector' =&gt; 'p',
            'classes' =&gt; 'mytest',
        ),
        array(
            'title' =&gt; 'AlertBox',
            'block' =&gt; 'div',
            'classes' =&gt; 'alert_box',
            'wrapper' =&gt; true
        ),
        array(
            'title' =&gt; 'Red Uppercase Text',
            'inline' =&gt; 'span',
            'styles' =&gt; array(
                'color'         =&gt; 'red', // or hex value #ff0000
                'fontWeight'    =&gt; 'bold',
                'textTransform' =&gt; 'uppercase'
            )
        )
    );

    $settings['style_formats'] = json_encode( $style_formats );

    return $settings;

}</code></pre>
</blockquote>
<h2>Result</h2>
<p><img alt="enter image description here" src="http://i.stack.imgur.com/K9Rcg.png" /></p>
<h2>Enhanced Drop down menu</h2>
<p>You can also enhance the drop down with a tree menu. Create the var from the example source above with more structure in the array, like the follow source.</p>
<blockquote>
<pre><code>    $style_formats = array(
        array(
            'title' =&gt; 'Headers',
                'items' =&gt; array(
                array(
                    'title' =&gt; 'Header 1',
                    'format' =&gt; 'h1',
                    'icon' =&gt; 'bold'
                ),
                array(
                    'title' =&gt; 'Header 2',
                    'format' =&gt; 'h2',
                    'icon' =&gt; 'bold'
                )
            )
        ),
        array(
            'title' =&gt; 'Download Link',
            'selector' =&gt; 'a',
            'classes' =&gt; 'download'
        )
    );</code></pre>
</blockquote>
<p><img alt="enter image description here" src="http://i.stack.imgur.com/kbfaB.png" /></p>
<p>For more possibilities and parameters see the default values of the Style Format Drop down field (write in javascript). var defaultStyleFormats = [ {title: &#8216;Headers&#8217;, items: [ {title: &#8216;Header 1&#8242;, format: &#8216;h1&#8242;}, {title: &#8216;Header 2&#8242;, format: &#8216;h2&#8242;}, {title: &#8216;Header 3&#8242;, format: &#8216;h3&#8242;}, {title: &#8216;Header 4&#8242;, format: &#8216;h4&#8242;}, {title: &#8216;Header 5&#8242;, format: &#8216;h5&#8242;}, {title: &#8216;Header 6&#8242;, format: &#8216;h6&#8242;} ]},</p>
<blockquote>
<pre><code>            {title: 'Inline', items: [
                {title: 'Bold', icon: 'bold', format: 'bold'},
                {title: 'Italic', icon: 'italic', format: 'italic'},
                {title: 'Underline', icon: 'underline', format: 'underline'},
                {title: 'Strikethrough', icon: 'strikethrough', format: 'strikethrough'},
                {title: 'Superscript', icon: 'superscript', format: 'superscript'},
                {title: 'Subscript', icon: 'subscript', format: 'subscript'},
                {title: 'Code', icon: 'code', format: 'code'}
            ]},

            {title: 'Blocks', items: [
                {title: 'Paragraph', format: 'p'},
                {title: 'Blockquote', format: 'blockquote'},
                {title: 'Div', format: 'div'},
                {title: 'Pre', format: 'pre'}
            ]},

            {title: 'Alignment', items: [
                {title: 'Left', icon: 'alignleft', format: 'alignleft'},
                {title: 'Center', icon: 'aligncenter', format: 'aligncenter'},
                {title: 'Right', icon: 'alignright', format: 'alignright'},
                {title: 'Justify', icon: 'alignjustify', format: 'alignjustify'}
            ]}
        ];</code></pre>
</blockquote>
<h2>Add Custom Stylesheet to the editor</h2>
<p>Now is the last point, that you include the custom css for this formats, via hook <code>mce_css</code>.</p>
<blockquote>
<pre><code>/**
 * Apply styles to the visual editor
 */  
add_filter( 'mce_css', 'fb_mcekit_editor_style');
function fb_mcekit_editor_style($url) {

    if ( ! empty( $url ) )
        $url .= ',';

    // Retrieves the plugin directory URL
    // Change the path here if using different directories
    $url .= trailingslashit( plugin_dir_url( __FILE__ ) ) . '/my-editor-styles.css';

    return $url;
}</code></pre>
</blockquote>
<p>Don&#8217;t forget to add this stylesheet rules also to the front end stylesheet.</p>
<h2>Remove the Format Button</h2>
<p>As enhancement you can remove the <code>formatselect</code> drop down button via check for the value in the button array. Add the follow source to the function <code>fb_mce_editor_buttons</code> at the hook <code>mce_buttons_2</code>.</p>
<blockquote>
<pre><code>$value = array_search( 'formatselect', $buttons );
if ( FALSE !== $value ) {
    foreach ( $buttons as $key =&gt; $value ) {
        if ( 'formatselect' === $value )
            unset( $buttons[$key] );
    }
}</code></pre>
</blockquote>
</div>
<p>&nbsp;</p>
]]></content:encoded>
			<wfw:commentRss>http://demo.dhrusya.com/working-with-tinymce-2/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
