<?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>visual composer Archives - Alexandros Georgiou</title>
	<atom:link href="https://www.alexgeorgiou.gr/tag/visual-composer/feed/" rel="self" type="application/rss+xml" />
	<link>https://www.alexgeorgiou.gr/tag/visual-composer/</link>
	<description>Balancing brackets for a living</description>
	<lastBuildDate>Wed, 28 Feb 2018 13:22:25 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	

<image>
	<url>https://www.alexgeorgiou.gr/wp-content/uploads/2021/07/cropped-alexgeorgiou-icon-32x32.png</url>
	<title>visual composer Archives - Alexandros Georgiou</title>
	<link>https://www.alexgeorgiou.gr/tag/visual-composer/</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>Add/remove buttons in the WPBakery Page Builder&#8217;s TinyMCE editor</title>
		<link>https://www.alexgeorgiou.gr/add-remove-buttons-page-builder-tinymce-editor/</link>
					<comments>https://www.alexgeorgiou.gr/add-remove-buttons-page-builder-tinymce-editor/#comments</comments>
		
		<dc:creator><![CDATA[alexg]]></dc:creator>
		<pubDate>Tue, 17 May 2016 07:29:01 +0000</pubDate>
				<category><![CDATA[Blog]]></category>
		<category><![CDATA[Page Builder]]></category>
		<category><![CDATA[tinymce]]></category>
		<category><![CDATA[visual composer]]></category>
		<category><![CDATA[wordpress]]></category>
		<category><![CDATA[WPBakery]]></category>
		<guid isPermaLink="false">http://www.alexgeorgiou.gr/?p=69</guid>

					<description><![CDATA[<p>In this article I will discuss how a WordPress developer can choose which buttons are shown in the toolbars of a WPBakery Page Builder TinyMCE editor.</p>
<p>The post <a href="https://www.alexgeorgiou.gr/add-remove-buttons-page-builder-tinymce-editor/">Add/remove buttons in the WPBakery Page Builder&#8217;s TinyMCE editor</a> appeared first on <a href="https://www.alexgeorgiou.gr">Alexandros Georgiou</a>.</p>
]]></description>
										<content:encoded><![CDATA[<div class="post-text">
<p>In this article I will discuss how a WordPress developer can choose which buttons are shown in the toolbars of a <a href="https://wpbakery.com/">WPBakery Page Builder (formerly Visual Composer)</a> <a href="https://www.tinymce.com/">TinyMCE</a> editor.</p>
<h2>The problem</h2>
<p>In WordPress, the default WYSIWYG editor is TinyMCE. WordPress provides the <a href="https://codex.wordpress.org/TinyMCE#Customize_TinyMCE_with_Filters"><code>tiny_mce_before_init</code></a> filter to let the developer modify buttons and toolbars. <em>This applies to editors for editing pages and posts.</em></p>
<p>In WPBakery Page Builder, when one uses the <code>vc_map()</code> function to register a shortcode, one can define <a href="https://kb.wpbakery.com/docs/inner-api/vc_map#vc_map()-Availabletypevalues">a parameter with name <code>content</code> and type <code>textarea_html</code></a>. The input control for that parameter will be a TinyMCE editor shown in WPBakery Page Builder&#8217;s popup window. <em>Unfortunately this editor is not currently affected by <code>tiny_mce_before_init</code>.</em> In fact, after a decent amount of googling I could not find any filter, action or other API that lets you decide which buttons are visible in the editor.</p>
<p>So, to summarize the problem:</p>
</div>
<div class="post-text">
<blockquote><p> I needed to find a way to modify which buttons are shown, but only in the WPBakery Page Builder TinyMCE instance, and only in the editor that corresponds to my shortcode, so as not to interfere with any other plugins.</p></blockquote>
<p>I decided to share the solution <a href="http://wordpress.stackexchange.com/questions/220409/how-to-modify-visualcomposers-tinymce-editor-only-for-a-specific-shortcode">on the WordPress StackExchange site</a> because it&#8217;s somewhat non-obvious. I&#8217;m also posting the solution here for SEO purposes :-p</p>
<p>There are two technical issues:</p>
<ol>
<li>As discussed above, the <code>tiny_mce_before_init</code> filter does not affect the TinyMCE editor that WPBakery Page Builder instantiates for parameters with <code>param_name == 'content'</code> and <code>type == 'content_html'</code>. The Page Builder frontend gets the TinyMCE HTML markup in a separate AJAX request. The editor&#8217;s instantiation does not benefit from the <code>tinyMCEPreInit</code> inline JavaScript array that the filter affects. The solution is to introduce a TinyMCE plugin that modifies the editor&#8217;s settings on the client side.</li>
<li>Any TinyMCE plugin must be loaded <em>after</em> the editor itself (see <a href="https://www.tinymce.com/docs/advanced/creating-a-plugin/#exampleofloadingthepluginfromanotherurl" rel="nofollow">here</a>). Even though according to <a href="https://developer.wordpress.org/reference/functions/wp_enqueue_script/#defaults" rel="nofollow">the wp_enqueue_script() documentation</a> you would expect to be able to enqueue your plugin by setting a dependency to the built-in <code>tiny_mce</code> script, this does not work because TinyMCE is loaded differently. <a href="http://wordpress.stackexchange.com/a/112192/17616">See here</a> for a discussion of the problem and a solution.</li>
</ol>
<h2>The solution: Modify the WPBakery Page Builder TinyMCE with a JavaScript plugin</h2>
<p>We&#8217;ll first bind to <code>tiny_mce_before_init</code>, but not to modify the buttons. We&#8217;ll only use it to add <a href="http://archive.tinymce.com/wiki.php/Tutorials:Creating_a_plugin">a custom TinyMCE plugin</a> which <em>all editors</em> will run. Being the creative type, I&#8217;ll call it <code>myplugin</code>:</p>
<pre>function filter_tiny_mce_before_init( $mceInit ) {
    $mceInit['plugins'] .= ',myplugin';
    return $mceInit;
}

add_filter( 'tiny_mce_before_init', 'filter_tiny_mce_before_init' );</pre>
<p>Our plugin will first check to see if the current TinyMCE editor is a WPBakery Page Builder editor. Then it will use jQuery to determine if its corresponding shortcode starts with &#8220;myplugin&#8221;:</p>
<pre>'use strict';
tinymce.PluginManager.add( 'myplugin',
    function(editor, url) {

        // skip editors that don't belong to the Page Builder
        if ( editor.id != 'wpb_tinymce_content' )
            return;

        // skip editors that don't belong to my shortcode
        if ( !jQuery( '#wpb_tinymce_content' ).parents(
            '[data-vc-shortcode^="myplugin"]' ).length )
            return;

        // these are the only buttons we'll show
        editor.settings.toolbar1 = 'bold,italic,underline,strikethrough,link,unlink,wp_fullscreen';
        editor.settings.toolbar2 = 'pastetext,removeformat,charmap';
    } );</pre>
</div>
<p>You can of course adapt the above code to your needs. You can do other things with the <code>editor</code> object. If in doubt, <a href="http://archive.tinymce.com/wiki.php/API3:class.tinymce.Editor">consult the documentation</a>.</p>
<p>Finally we&#8217;ll have to make sure that this plugin&#8217;s JavaScript is loaded after TinyMCE. It is ugly, but <a href="http://wordpress.stackexchange.com/a/112192/17616">read here</a> for why this is done:</p>
<pre>function action_after_wp_tiny_mce() {
    printf( 
        '&lt;script type="text/javascript" src="%s"&gt;&lt;/script&gt;', 
        plugins_url( 'assets/scripts/myplugin-tinymce.js', __FILE__ ) );
}

add_action( 'after_wp_tiny_mce', 'action_after_wp_tiny_mce' );</pre>
<p>&#8220;It works<span class="_Tgc"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/2122.png" alt="™" class="wp-smiley" style="height: 1em; max-height: 1em;" />&#8221;!</span></p>
<p>The post <a href="https://www.alexgeorgiou.gr/add-remove-buttons-page-builder-tinymce-editor/">Add/remove buttons in the WPBakery Page Builder&#8217;s TinyMCE editor</a> appeared first on <a href="https://www.alexgeorgiou.gr">Alexandros Georgiou</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.alexgeorgiou.gr/add-remove-buttons-page-builder-tinymce-editor/feed/</wfw:commentRss>
			<slash:comments>2</slash:comments>
		
		
			</item>
	</channel>
</rss>
