Thank you! Your feedback has been delivered
Thank you! Your feedback has been sent

TinyMCE VisualBlocks plugin added to WordPress visual editor

I need to add TinyMCE VisualBlocks plugin to WordPress 3.9 visual editor (and thus TinyMCE 4+).

It looks like the details on how to do this are already in the codex here but I can't seem to get it to work this way: http://codex.wordpress.org/Plugin_API/Filter_Reference/mce_external_plugins

The plugin is available online here: https://github.com/tinymce/tinymce/tree/master/js/tinymce/plugins/visualblocks

The only change I would want to make to the codex details are to put the VisualBlocks plugin in my theme folder, so probably need something like this: get_template_directory_uri() . '/library/js/visualblocks/editor_plugin.js

One other thing I need to do is make the default state for the plugin to be true / on.

Thanks!

Preferred delivery type: code snippet.

User Gravatar

creativelogic

Posted Jul 3 2014 11:39 UTC

$25


  • Assigned To Xhynk
  • Solved
  • php
    wordpress
  • 1583 Views

19 Replies


Does:

<?php

    add_filter('mce_external_plugins', 'add_mceplugins');

    function add_mceplugins() {
         $plugin = array('visualblocks');
         $plugins_array = array();

         foreach ($plugin as $plugin ) {
              $plugins_array[ $plugin ] = get_stylesheet_directory_uri() . '/library/js/'. $plugin .'/plugin.js';
         }
         return $plugins_array;
    }

?>

Not work?

Edit: Code wrapped code

User Gravatar

Xhynk

Posted Jul 3 2014 11:53 UTC

Solution

This didn't solve your task? Get your own custom solution.

You have a typo, it should be $plugin, not $plugins in this part of your snippet... '/library/js/'. $plugins .'/plugin.js'

But yes this part works fine. The problem is where to go from here...The WP codex example is potentially incomplete as there is no button in the visual editor to activate VisualBlocks. Also, in my case I'd like to set the default state to on, i.e. something like: *visualblocks_default_state=true*

Thanks again!

User Gravatar

creativelogic

Posted Jul 3 2014 12:17 UTC

Ah you're right, fixed.

I'll take a look and see what I can find!

User Gravatar

Xhynk

Posted Jul 3 2014 13:09 UTC

Hi, Have you initialised the plugin from your js? also you can set the default state of visualblocks over there tinymce.init({ plugins: "visualblocks", visualblocks_default_state: true });

User Gravatar

deepak1556

Posted Jul 3 2014 14:22 UTC

I got this to work:

add_filter('tiny_mce_before_init', 'register_visualblocks'); 

function register_visualblocks($in) {
    $in['schema']='html5';
    $in['end_container_on_empty_block'] = 'true';
    $in['plugins'] .= ",visualblocks";
    $in['visualblocks_default_state'] = 'true';
    // HTML5 formats
    $in['style_formats'] = "[
        {title : 'Heading 1', block : 'h1'},
        {title : 'Heading 2', block : 'h2'},
        {title : 'Heading 3', block : 'h3'},
        {title : 'Heading 4', block : 'h4'},
        {title : 'Heading 5', block : 'h5'},
        {title : 'Heading 6', block : 'h6'},
        {title : 'Paragraph', block : 'p'},
        {title : 'div', block : 'div'},
        {title : 'pre', block : 'pre'},
        {title : 'section', block : 'section', wrapper: true, merge_siblings: false},
        {title : 'article', block : 'article', wrapper: true, merge_siblings: false},
        {title : 'hgroup', block : 'hgroup', wrapper: true},
        {title : 'aside', block : 'aside', wrapper: true},
        {title : 'figure', block : 'figure', wrapper: true},
        {title : 'figcaption', block : 'figcaption', wrapper: true}     
    ]";

    $in['theme_advanced_buttons2'] = "styleselect,underline,justifyfull,forecolor,|,pastetext,pasteword,removeformat,|,charmap,|,outdent,indent,|,undo,redo,wp_help,|,visualblocks";

    return $in;
}

And then added this (unzipped) folder: https://www.dropbox.com/sh/2xlfrw0qfg5g6sk/AAAysgOUcCwQBKysdgPmet6ha

to the wp-includes/js/tinymce/plugins/ directory, so it resides at /tinymce/plugins/visualblocks

I was trying to get the function to copy the files over from the theme to that directory, but it wasn't working as expected, so you can drop them in manually (unzipped of course)

You can see it works here, always on: http://screencast.com/t/3sD7qL0Wj2

User Gravatar

Xhynk

Posted Jul 3 2014 14:31 UTC

I'll keep playing with a function to check and add them to the folder itself properly too (not sure if WordPress updates removes superfluous files during updates)

User Gravatar

Xhynk

Posted Jul 3 2014 14:41 UTC

Hi Xhynk,

Yeah I had that working too previously, it's from this plugin right? https://wordpress.org/plugins/42u-html5-upgrade/

WP now uses TinyMCE4, so no need for all the HTML5 stuff. Regardless, it should be possible to do this using the Codex code no, otherwise it wouldn't be in there. Sorry. :)

Bummer cause I thought this would be easy... The Codex code works in that it definitely loads the VisualBlocks plugin js, we just need to turn it on and get a button for it.

User Gravatar

creativelogic

Posted Jul 3 2014 14:41 UTC

Dang, you've tried everything! lol

I'll keep looking and see what's up with the codex not working (minus the typo I had was from it!)

User Gravatar

Xhynk

Posted Jul 3 2014 14:44 UTC

Okay, getting closer, very close!

@Deepak1556 was basically correct, I needed to initialize the tinyMCE plugin. But since this is WordPress and TinyMCE is baked in it's done a little differently. I have this which is 95% of the way there, just the VisualBlocks is not on by default. If anyone can solve that part then this is solved!

I added the code below after code from the WP codex, and this gets the visualblocks plugin loaded and added to the toolbar. But the plugin is not on default. That's the one part still not working. Ideas?

function myformatTinyMCE($in) {
    $in['plugins'].=',visualblocks';
    $in['toolbar2'].=',visualblocks ';
    $in['visualblocks_default_state'] = true;
    return $in;
}
add_filter('tiny_mce_before_init', 'myformatTinyMCE' );
User Gravatar

creativelogic

Posted Jul 3 2014 15:56 UTC

With that code it's on by default for me. Are you on the most recent version of WordPress?

User Gravatar

Xhynk

Posted Jul 3 2014 16:00 UTC

Definitely most recent version, 3.9.1. Have you cleared your cache, it's a necessity when dealing with TinyMCE editor stuff, it's cached deep otherwise. Every time you make a code change you must clear to see the update. It's probably still on from when you tried out the first code you sent along.

User Gravatar

creativelogic

Posted Jul 3 2014 16:04 UTC

Yes, I also use incognito mode in CCanary. I commented that line out, it was off. Uncommented it, and it was back!

Seems to work just dandy for me

User Gravatar

Xhynk

Posted Jul 3 2014 16:06 UTC

Hmm, strange. And does the visualblocks button show as active when it comes on by with default state as true?

I've tested it in FF, CH, and IE11, for all visualblocks is not on by default.

User Gravatar

creativelogic

Posted Jul 3 2014 16:08 UTC

Nope, it shows off. At first impression it looked as though it had to be double clicked to turn off, but it's actually not turning off for me at all

User Gravatar

Xhynk

Posted Jul 3 2014 16:12 UTC

And commenting the default state line out, it lets me turn vb ON but still can't turn it off

User Gravatar

Xhynk

Posted Jul 3 2014 16:12 UTC

*oops

User Gravatar

Xhynk

Posted Jul 3 2014 16:20 UTC

correction, it does show an active state when default on now. Impending screencast.

User Gravatar

Xhynk

Posted Jul 3 2014 16:22 UTC

http://screencast.com/t/ugfDnlgp

User Gravatar

Xhynk

Posted Jul 3 2014 16:27 UTC

Thanks for the video @Xhynk, but I believed you :) ... It just was odd we had different results. Either way was good to see that you had the exact same code, so thanks again for doing that.

Anyway, good news is I got default state working! It was basically by luck but I found if I remove the first init line $in['plugins'].=',visualblocks'; then all is good. So I guess that is a wrap. Thanks!

User Gravatar

creativelogic

Posted Jul 3 2014 17:28 UTC

Add a reply

By posting a reply on CodersClan you agree to our Terms & Conditions