This is a utility plugin that will allow other plugins and themes to swap out shortcodes with custom images, in the same way that WordPress’ native gallery shortcode does this. Replacement images can be clicked to reveal a ‘delete’ button.
This works extremely well when your shortcode already has a tinymce button, but does work for manual shortcodes too.
This plugin does not support multi-line shortcodes or non-self-closing shortcodes (e.g. it supports <code>[foo bar="baz"]</code> but not <code>[foo]bar baz[/foo]</code>). Honestly, I don’t even know what would happen if you tried to use one. It may work, but it’s entirely unsupported.
To add your shortcode, hook onto the filter <code>'jpb_visual_shortcodes'</code>. That filter will pass one array as an argument. Each element of that array is an associative array which must contain values for the following keys:
<ul>
<li><code>shortcode</code> The name of the shortcode to replace</li>
<li><code>image</code> The url of the image to replace the shortcode with.</li>
</ul>
Additionally, the array may contain the optional parameter <code>command</code>, which must be a valid tinymce command. If present, this value will trigger a second UI button (‘Edit’) when the user clicks the replacement image which, when clicked, will execute the tinymce command passed as the value.

Visual Shortcodes

This is a utility plugin that will allow other plugins and themes to swap out shortcodes with custom images, in the same way that WordPress' nati …

turtlepod

<a href="http://genbumedia.com/plugins/fx-editor/" rel="nofollow ugc">f(x) Editor</a> is a plugin to enhance your content editing experience by enabling WordPress features such as Page Break and Text Background Color/Highlight.
You can also easily create information boxes, colorful buttons, and columns to make your content richer and engage to your audience more.
After installation of this plugin, you can enable each features by navigating to “Settings > Visual Editor” menu in your administration panel.
Features:
<ol>
<li>Easy settings to disable/enable features.</li>
<li>Create boxes (Note, Alert, Error, Downloads) via visual editor.</li>
<li>Create buttons (White, Black, Red, Green, Blue) via visual editor.</li>
<li>Create columns ( up to 3 columns: “1/2 – 1/2” ; “1/3 – 2/3” ; “2/3 – 1/3” ; “1/3 – 1/3 – 1/3” ) via visual editor.</li>
<li>Add page break button.</li>
<li>Add line break button.</li>
<li>Enable text background color option (not only text color).</li>
<li>Switch paragraph to BR(line break).</li>
<li>Easy to use. No shortcode to remember.</li>
<li>The GPL v2.0 or later license. 🙂 Use it to make something cool.</li>
<li>Support available at <a href="https://genbumedia.com/contact/" rel="nofollow ugc">Genbu Media</a>. 
Notes for developer: </li>
</ol>
<h4>Github</h4>
Development of this plugin is hosted at <a href="https://github.com/turtlepod/fx-editor" rel="nofollow ugc">GitHub</a>. Pull request and bug reports are welcome.
<h4>Options</h4>
This plugin save the options in single option name: <code>fx-editor</code>.
<h4>Scripts</h4>
This plugin load one CSS in site front-end and one css in editor. If you are a theme author and want to override the styling it is recommended to remove the CSS and add the CSS in your theme stylesheet and editor style CSS.
To disable the front end CSS, add this code in your theme functions.php:
<pre><code>add_filter( 'fx_editor_load_front_css', '__return_false' );
</code></pre>
and then you can copy the CSS “css/front.css” to your theme style.css and make adjustment as needed.
To disable the back-end/editor CSS, add this code in your theme functions.php:
<pre><code>add_filter( 'fx_editor_load_editor_css', '__return_false' );
</code></pre>
And then you can copy the CSS “css/editor.css” to your theme editor styles and make adjustment as needed. Note: You need to make sure all the needed elements such as “remove icon” and “columns info” are styled properly to make sure user can properly edit the content.
For coder module, there are separate filters to disable it:
<pre><code>add_filter( 'fx_editor_load_coder_editor_css', '__return_false' );
add_filter( 'fx_editor_load_coder_front_css', '__return_false' );
add_filter( 'fx_editor_load_coder_front_js', '__return_false' );
</code></pre>

f(x) Editor

I was using your WP Editor Columns Add-on plugin in some of my sites. Much to my surprise I found that you merged all your old WP-Editor plugins together in this really nice plugin. No awful shortcodes anywhere!



Nice!

Power-up Your WordPress Visual Editor with Boxes, Buttons, Columns, and more...

Visual Shortcodes vs f(x) Editor