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/

 

 

  1. Mina plugins till wordpress

Kommentarer

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

  1. Björn Sennbrink skriver:

    Tack för tipset!

    För kod på bloggen använder jag http://wordpress.org/extend/plugins/wp-syntax/

Kommentera



Kontakta mig!

Vad roligt att du vill kontakta mig! Jag är jättenyfiken på vad du har att säga mig! Fyll i formuläret nedan så återkommer jag till dig så fort jag bara kan! Varma hälsningar! / Emil