{"id":1663,"date":"2013-10-03T20:52:33","date_gmt":"2013-10-03T07:52:33","guid":{"rendered":"http:\/\/www.zoyinc.com\/?p=1663"},"modified":"2013-10-03T20:52:33","modified_gmt":"2013-10-03T07:52:33","slug":"tinymce-zoyinc-buttons-wordpress-plugin","status":"publish","type":"post","link":"http:\/\/www.zoyinc.com\/?p=1663","title":{"rendered":"TinyMCE Zoyinc buttons WordPress plugin"},"content":{"rendered":"

\"\"Zoyinc buttons are a very simple WordPress plugin created to solve a specific problem.<\/p>\n

Download TinyMCE Zoyinc buttons<\/a><\/p>\n

Background<\/h2>\n

I use the Weaver<\/a> theme, TinyMCE Advanced<\/a> and need to be able to include pieces of code using a syntax highlighter plugin. I would like to use Crayon Syntax Highlighter<\/a> as it has a good rating and seems to work well.<\/p>\n

The problem is that Crayon Syntax Highlighter, like most syntax highlighters, is built around using the “<pre<\/span>” tag. Crayon can use other tags and do things other ways but it really doesn’t work as well and it feels like the other methods will deprecated anyway.<\/p>\n

One cool thing I discovered was that with Crayon you can tell it to ignore a specific “<pre” tag by inserting “crayon:false” such as:<\/p>\n

<pre class=\"crayon:false;\">really interesting text<\/pre><\/pre>\n
This is actually quite powerful because it means you can use Crayon for everything except<\/em> “<pre”, you just have to put some extra bits in the “<pre” tag. But that’s the rub, its quite a pain to always have to jump into text mode, find the right spot and change the tag. The thing is I often put preformatted, “<pre”, tags in quite a few places in an article so bouncing between text and visual modes is a real pain<\/p>\n
I spent sometime, probably much to much time, looking into this. I came to the conclusion the answer was to try to create a plugin that added button which wrapped the corrected “<pre” tag around the selected text.<\/p>\n
The Plugin<\/h2>\n
As I have never written a WordPress plugin and my requirements were modest to say the least I based my work on another similar project:<\/p>\n
Name: wp-heading-buttons
\nAuthor: Tercan Keskin
\nURL: http:\/\/tercan.net\/<\/a><\/p>\n
\/zoyinc_tinymce_buttons.php<\/h3>\n
This appears to be the main interface with WordPress and TinyMCE. There is not a lot to say here as it seems pretty intuitive. The only thing you might change is the line:<\/p>\n
array_push($buttons, '|', 'zbutton1');<\/pre>\n
which is where you add extra buttons. So if you wanted two buttons you would make changes in the javascript files and then change the above line to:<\/p>\n
array_push($buttons, '|', 'zbutton1', 'zbutton2');<\/pre>\n
\/js\/tinymce_buttons_editor_plugin.js<\/h3>\n
This is javascript page where most of the changes occurred:<\/p>\n
(function() {\r\n\r\n\ttinymce.PluginManager.requireLangPack('wpzbuttons');\r\n\r\n\ttinymce.create('tinymce.plugins.TinyMCEZButtons', {\r\n\t\tinit : function(ed, url) {\r\n\t\t\ted.addButton('zbutton1', {\r\n\t\t\t\ttitle : 'Standard Preformatted',\r\n\t\t\t\timage : url+'\/..\/images\/zbutton1.png',\r\n\t\t\t\tonclick : function() {\r\n\t\t\t\t\tvar html = tinyMCE.activeEditor.selection.getContent();\r\n\t\t\t\t\tvar tagtext = '&lt;pre class=\"crayon:false;';\r\n\t\t\t\t\ted.execCommand('mceInsertContent', false, tagtext+'\"&gt;'+html+'&lt;\/pre&gt;');\r\n\t\t\t\t}\r\n\t\t\t});\r\n\t\t\ted.addButton('zbutton2', {\r\n\t\t\t\ttitle : 'Custom Button',\r\n\t\t\t\timage : url+'\/..\/images\/zbutton2.png',\r\n\t\t\t\tonclick : function() {\r\n\t\t\t\t\ted.execCommand('FormatBlock', false, 'h2');\r\n\t\t\t\t}\r\n\t\t\t});\r\n\r\n\t\t},\r\n\r\n\t\tgetInfo : function() {\r\n\t\t\treturn {\r\n\t\t\t\tlongname : 'Zoyinc TinyMCE Buttons',\r\n\t\t\t\tauthor : 'Tony P',\r\n\t\t\t\tauthorurl : 'http:\/\/www.zoyinc.com\/',\r\n\t\t\t\tinfourl : 'http:\/\/www.zoyinc.com\/',\r\n\t\t\t\tversion : \"1.0\"\r\n\t\t\t};\r\n\t\t}\r\n\r\n\t});\r\n\ttinymce.PluginManager.add('wpzbuttons', tinymce.plugins.TinyMCEZButtons);\r\n})();<\/pre>\n
The highlighted lines are the interesting ones:<\/p>\n
“tinyMCE.activeEditor.selection.getContent()<\/span>” grabs the content that you have selected allowing you to put it into a variable, in my case “tagtext”.<\/p>\n
“ed.execCommand(‘mceInsertContent’, false, tagtext+'”>’+html+'<\/pre>’)<\/span>” allows you to replace the selected text, which you put in “tagtext” with new text.<\/p>\n
Be aware you can’t just put any old thing in with “mceInsertContent”. I had times when I added text but it was all stripped out by TinyMCE and replaced with simple “<pre” tags. So you may want to approach this slowly and do a bit of experimenting to discover what you can achieve.<\/p>\n
Installation<\/h2>\n
This plugin is currently not on the WordPress plugin site as it’s just too much trouble for such a small one-off plugin.<\/p>\n
To install simply download the plugin zip file: zoyinc_tinymce_buttons.zip<\/a> and then go to plugins and click on new:<\/p>\n
\"\"From there click on “Upload”<\/p>\n
\"\"And then upload the zip file:<\/p>\n
\"\"From here you just activate the plugin.<\/p>\n
There is no configuration to this plugin. If you want to modify it you have to edit the code – sorry.<\/p>\n
 <\/p>\n
Tips<\/h2>\n
Editing a plugin<\/h3>\n
I found I was constantly tweaking files and testing them to see the result. I started by editing on a Windows PC then zip and uploading. This becomes a real pain if you are doing a lot of small tweaks and edits.<\/p>\n
Firstly the location of the files would be somewhere along the lines of:<\/p>\n
\/wp-content\/plugins\/zoyinc_tinymce_buttons<\/p>\n
I run WinSCP from my desktop and edit the files from there. When I save the file WinSCP notices and uploads the file to the server. Refreshing the browser then shows the changed file – simple quick.<\/p>\n","protected":false},"excerpt":{"rendered":"
Zoyinc buttons are a very simple WordPress plugin created to solve a specific problem. Download TinyMCE Zoyinc buttons Background I use the Weaver theme, TinyMCE Advanced and need to be able to include pieces of code using a syntax highlighter plugin. I would like to use Crayon Syntax Highlighter as it has a good rating […]<\/p>\n","protected":false},"author":2,"featured_media":1675,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10],"tags":[184,183,182,181,297],"class_list":["post-1663","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","tag-button","tag-plug-in","tag-plugin","tag-tinymce","tag-wordpress"],"_links":{"self":[{"href":"http:\/\/www.zoyinc.com\/index.php?rest_route=\/wp\/v2\/posts\/1663","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.zoyinc.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.zoyinc.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.zoyinc.com\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/www.zoyinc.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1663"}],"version-history":[{"count":15,"href":"http:\/\/www.zoyinc.com\/index.php?rest_route=\/wp\/v2\/posts\/1663\/revisions"}],"predecessor-version":[{"id":1685,"href":"http:\/\/www.zoyinc.com\/index.php?rest_route=\/wp\/v2\/posts\/1663\/revisions\/1685"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.zoyinc.com\/index.php?rest_route=\/wp\/v2\/media\/1675"}],"wp:attachment":[{"href":"http:\/\/www.zoyinc.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1663"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.zoyinc.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1663"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.zoyinc.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1663"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}