Skip to content

Code Blocks with Highlighting: Extended TinyMCE Options

Posted in Plugin Development, and WP Plugins

Welcome back to our 5th, and for now, final entry into our Code Blocks with Highlighting series, where we’ve been building our own syntax highlighting plugin built on PrismJS. If you haven’t completed section four, Adding Editor Buttons, you’ll want to make sure you’ve finished that first as we’ll be extending one of the files we created there. You can find all of our previous tutorials here:

Extending TinyMCE Options on Visual Editor

In this tutorial, we’ll be working with the TinyMCE button we created in the Visual editor last time, and expanding it from a simple “Click and Done” button to a drop-down listing our most commonly used languages.

Part 1: Changing our Visual Editor Button to a Dropdown

Let’s start by opening up our TinyMCE plugin file from last time, prism-visual-edit.js. We are going to make some changes to this, to change our plugin to a drop-down.

(function() {
    tinymce.create("tinymce.plugins.prism_button_plugin", {

        //url argument holds the absolute url of our plugin directory
        init : function(ed, url) {

            //add new button     
            ed.addButton("prism", {
			 type: "menubutton",
                image: url+"/crystal.png"
           	title: "Prism Code Blocks",

			menu: [{
		
			text: 'PHP',		
			onclick: function() {
               	var selected_text = ed.selection.getContent({format : "text"});
				if (selected_text == '') { selected_text = '//Paste Your Code Here'; }
               	var return_text = '<pre class="language-php line-numbers copytoclipboard"><code class="language-php">' + selected_text + '</code></pre>';
               	ed.execCommand("mceInsertContent", 0, return_text);
            	}
        	}, {

			text: 'JavaScript',		
			onclick: function() {
               	var selected_text = ed.selection.getContent({format : "text"});
				if (selected_text == '') { selected_text = '//Paste Your Code Here'; }
               	var return_text = '<pre class="language-javascript line-numbers copytoclipboard"><code class="language-javascript">' + selected_text + '</code></pre>';
               	ed.execCommand("mceInsertContent", 0, return_text);
            	}
        	},  {

		text: 'CSS',		
			onclick: function() {
               	var selected_text = ed.selection.getContent({format : "text"});
				if (selected_text == '') { selected_text = '//Paste Your Code Here'; }
               	var return_text = '<pre class="language-css line-numbers copytoclipboard"><code class="language-css">' + selected_text + '</code></pre>';
               	ed.execCommand("mceInsertContent", 0, return_text);
            	}
        	}, {

		text: 'Python',		
			onclick: function() {
               	var selected_text = ed.selection.getContent({format : "text"});
				if (selected_text == '') { selected_text = '//Paste Your Code Here'; }
               	var return_text = '<pre class="language-python line-numbers copytoclipboard"><code class="language-python">' + selected_text + '</code></pre>';
               	ed.execCommand("mceInsertContent", 0, return_text);
            	}
        	}, {

		text: 'Bash',		
			onclick: function() {
               	var selected_text = ed.selection.getContent({format : "text"});
				if (selected_text == '') { selected_text = '//Paste Your Code Here'; }
               	var return_text = '<pre class="language-bash line-numbers copytoclipboard"><code class="language-bash">' + selected_text + '</code></pre>';
               	ed.execCommand("mceInsertContent", 0, return_text);
            	}
        	}]
	 });
	
	 },


        createControl : function(n, cm) {
            return null;
        },

        getInfo : function() {
            return {
                longname : "PrismJS Default Tag Insertion",
                author : "Dan Dulaney",
                version : "1"
            };
        }
    });

    tinymce.PluginManager.add("prism_button_plugin", tinymce.plugins.prism_button_plugin);
})();

Our first change comes on line 9, where we change the type to menubutton. This tells the Visual editor that it will be a drop-down button. Lines 13-61 add our five menu options, for PHP, Javascript, CSS, Python, and Bash. Feel free to add as many others as you would like, or to change these to your most commonly used languages. When you’re finished, just save your file. No other changes are needed!

Step 2: Testing

Now that you’ve modified your plugin, it’s time to test! Fire up the Visual editor. You should see the same diamond icon as before, but now when you click, it will bring up a list of languages. Paste or write your code block, highlight it, and then select the language you want. It’s as simple as that! No more manually editing the language class for your most commonly used programming languages.

Series Wrap-up

I hope you’ve enjoyed our time together, building this plugin, and have learned some new tricks to add to your toolbox. If you haven’t thought about them yet, at the end of Part 4, we discussed some possible further expansions for this plugin. If you come up with any useful modifications that you’d like to share, we’d love to hear them!

Sources: https://www.tinymce.com/docs/demo/custom-toolbar-menu-button/

Final Version (shortcodes removed): https://github.com/duplaja/wp-prism-js-plugin