Wordpress Default WYSIWYG Editor customization

Background:
I am an HTML/CSS/Javascript developer whom is familiar to WP/PHP and has developed a handful of wordpress sites, nothing super customized. This is my first major Theme/Framework which is being built over at WP-Engine.

My Question:
I want to add a button to my wordpress multi site WYSIWYG editor which when pressed would insert an HTML snippet, honestly I want to use the dropdown because I want to create 10-20 snippets for clients to insert. This is to avoid clients needing to know HTML to use the WP-Admin. I have been searching for some plugins and then remembered that part of WPMUDEV services was support from WP-Ninjas.

Thoughts?

  • aecnu
    • WP Unicorn

    Greetings CramerDevelopers,

    Welcome to WPMU Dev!

    then remembered that part of WPMUDEV services was support from WP-Ninjas.

    This is absolutely true and does pertain to WordPress, but custom coding is a whole different animal and not part of our support team mandate.

    However, I will see if the WPMU Dev lead developer can possibly help us out with this.

    Though this may take a bit longer then a normal ticket, I will try to get him in here asap.

    Cheers, Joe

  • James Dunn
    • The Crimson Coder

    Good day @CramerDevelopers and welcome to the community.

    Although I definitely do not qualify as a Ninja, I have two different existing WP plugins that come to mind. They are on my "list" of neat concept plugins, but I've never actually used them in a client's website yet, so I cannot attest to their functionality or usefulness.

    Regardless, take a look at:

    Embed It Pro

    AND

    Post Snippets

    to see if either of these work for you. Like I said, I've discovered these in the past, put them in my running list of neat and potentially useful plugins and code, but have never actually used them. But, please do give a report back to let us know your experiences (good or bad) with either/both of these. That will help me star them or "X" them on my list.

    James Dunn
    Athens, GA USA

  • James Dunn
    • The Crimson Coder

    I find looking at/adapting the code from similar plugins/themes the best way to learn.

    I echo @Aaron's comment here. I'm self taught in almost every - if not every - code I've ever written in from machine language to my current use of PHP and JQuery. And I've almost always learned by taking someone else's code, studying it, tweaking it to see what happens, destroying it many times, and then learning what it took to get it working again. I'm always slow out of the gate on the learning curve, but in the end, I'm always stronger and better for it.

    Hope these suggestions are helpful to you @CramerDevelopers.

    James Dunn
    Athens, GA USA

  • CramerDevelopers
    • WPMU DEV Initiate

    **Back from vacation**

    Thanks for the leads gang (and the hearty welcome to the neighborhood), unfortunately none of these seem to do what I want so I think I'm going to get a little bit more dirty -- and create my own TinyMCE Plugin

    this question may be better suited for TinyMCE support but what the heck I will give you guys a shot at catching my error.

    Getting wordpress to load the plugin JS file seems to work -- I can see it in my net loader that the script it getting pulled in .. so this code should be fine.. its a life from some WP Tiny MCE page..

    <?php
    
    function myplugin_addbuttons() {
       // Don't bother doing this stuff if the current user lacks permissions
       if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') )
         return;
    
       // Add only in Rich Editor mode
       if ( get_user_option('rich_editing') == 'true') {
         add_filter("mce_external_plugins", "add_myplugin_tinymce_plugin");
         add_filter('mce_buttons', 'register_myplugin_button');
       }
    }
    
    function register_myplugin_button($buttons) {
       array_push($buttons, "separator", "myplugin");
       return $buttons;
    }
    
    // Load the TinyMCE plugin : editor_plugin.js (wp2.5)
    function add_myplugin_tinymce_plugin($plugin_array) {
       $plugin_array['myplugin'] = 'plugins/sitelite/editor_plugin_src.js';
       return $plugin_array;
    }
    
    // init process for button control
    add_action('init', 'myplugin_addbuttons');
    
    ?>

    This is the code that seems to have the trouble -- I can get the console log for file loaded, but "plugin loaded (line 5 ish) never fires..

    /**
     * WordPress plugin.
     */
    
    (function() {
    	// Load plugin specific language pack
        console.log("file loaded")
    	tinymce.create('tinymce.plugins.siteliteplugin', {
    		init : function(ed, url) {
    			alert("plugin loaded");
    			// Register commands
    			ed.addCommand('SL_Woot', function() {
    				ed.execCommand('mceInsertContent', 0, "<p>WOOT!@!</p>");
    			});
    
    			ed.addButton('sl_woot', {
    				title : 'wordpress.wp_page_desc',
    				image : url + '/img/woot.gif',
    				cmd : 'SL_Woot'
    			});
    
    			// Add a node change handler, selects the button in the UI when a image is selected
                ed.onNodeChange.add(function(ed, cm, n) {
    	            cm.setActive('sl_woot', n.nodeName == 'IMG');
                });
    
    		},
    		createControl : function(n, cm) {
    			console.log("create control fired");
            	return null;
            },
    		getInfo : function() {
    			console.log("getInfo fired");
    			return {
    				longname : 'Sitelite Plugin',
    				author : 'Cramer',
    				authorurl : 'http://cramer.com',
    				infourl : 'http://wordpress.org',
    				version : '1.0'
    			};
    		}
    
    	});
    
    	// Register plugin
    	tinymce.PluginManager.add('siteliteplugin', tinymce.plugins.siteliteplugin);
    })();

    Any thoughts would be kickass and thanks again for the previous help!

  • CramerDevelopers
    • WPMU DEV Initiate

    I solved my own issue.. for anyone that stumbles upon this later a few notes.

    The name of the plugin you instantiate in PHP needs to match in javascript in my case I was using 'myplugin' (block 1, line 27) and 'siteliteplugin' (block 2, line 60)..

    Also the button names need to match..I was using 'myplugin' (block 1, line 21) and 'btn-addWoot' (block 2, line 14)

    both working files are below

    PHP

    function myplugin_addbuttons() {
       // Don't bother doing this stuff if the current user lacks permissions
       if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') )
         return;
    
       // Add only in Rich Editor mode
       if ( get_user_option('rich_editing') == 'true') {
         add_filter("mce_external_plugins", "add_myplugin_tinymce_plugin");
         add_filter('mce_buttons', 'register_myplugin_button');
       }
    }
    
    function register_myplugin_button($buttons) {
       array_push($buttons, "separator", "btn-addWoot");
       return $buttons;
    }
    
    // Load the TinyMCE plugin : editor_plugin.js (wp2.5)
    function add_myplugin_tinymce_plugin($plugin_array) {
       $plugin_array['customButtons'] = 'plugins/sitelite/editor_plugin_src.js';
       return $plugin_array;
    }
    
    // init process for button control
    add_action('init', 'myplugin_addbuttons');

    and JAVASCRIPT

    (function() {
    	tinymce.create('tinymce.plugins.SitelitePlugin', {
    		init : function(ed, url) {
    			// Register commands
    			ed.addCommand('mceAddWoot', function() {
    				ed.execCommand('mceInsertContent', 0, "<p>WOOT!@!</p>");
    			});
    
    			ed.addButton('btn-addWoot', {
    				title : 'wordpress.wp_page_desc',
    				image : url + '/img/woot.gif',
    				cmd : 'mceAddWoot'
    			});
    
    		},
    		getInfo : function() {
    			return {
    				longname : 'Sitelite Plugin',
    				author : 'Cramer',
    				authorurl : 'http://cramer.com',
    				infourl : 'http://wordpress.org',
    				version : '1.0'
    			};
    		}
    
    	});
    
    	// Register plugin
    	tinymce.PluginManager.add('customButtons', tinymce.plugins.SitelitePlugin);
    })();

    I also cleaned up the files as some stuff was not needed.

    Thanks #WPMUDEV either way

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.