Emil Österlund

Lägga till knapp i tinymce för wordpress som ändrar t.ex klass

På wordpressforumet på facebook togs frågan upp hur man gör för att lägga till en knapp i wordpress tinymce editor. Problemet var att knappen bytte ut istället för att ändra texten. Efter lite trixande så kom jag på hur man gjorde och här är min lösning:t

Uppdaterat!!!

Efter att ha velat använda mig av den här funktionen själv så har jag insett att den inte helt gjorde det jag ville, då den infogade tecken:   <  istället för riktiga htmltaggar. Jag löste det genom att byta ut mceInsertContent till mceInsertRawHTML.

Det är uppdaterat nedanför här.

functions.php

add_filter('mce_external_plugins', "tinyplugin_register");
add_filter('mce_buttons', 'tinyplugin_add_button', 0);

function tinyplugin_add_button($buttons){

    array_push($buttons, "separator", "tinyplugin");    return $buttons;

}

function tinyplugin_register($plugin_array){

    $url = trim(get_bloginfo('url'), "/");

    $url.= "/wp-content/plugins/tiny-plugin/editor_plugin.js";     $plugin_array["tinyplugin"] = $url;

    return $plugin_array;

}
Och sen i filen /wp-content/plugins/tiny-plugin/editor_plugin.js(du får själv skapa den mappen och filen)
function tiny_plugin(text) {

    return "<p class='xyz'>"+text+"</p>";

}

(function() {

    tinymce.create('tinymce.plugins.tinyplugin', {

        init : function(ed, url){

            ed.addButton('tinyplugin', {

                title : 'Insert TinyPlugin',

                onclick : function() {

                    ed.execCommand(

                         'mceInsertRawHTML',

                         false,

                         tiny_plugin(ed.selection.getContent({format : 'text'}))

                   );

               },

            image: url + "/wand.png"

        });
    }

});

tinymce.PluginManager.add('tinyplugin', tinymce.plugins.tinyplugin); })();
Tack till: http://ditio.net/2010/08/15/adding-custom-buttons-to-wordpress-tinymce/    

Kommentarer

Björn Sennbrink
Tack för tipset! För kod på bloggen använder jag http://wordpress.org/extend/plugins/wp-syntax/
Emil
Tack själv för bra tips!