Programming custom buttons for TinyMCE in Wordpress?

3stripe

Yup {very} off topic I know, but maybe somone can help...

I need to add a custom button to the WYSIWYG editor in Wordpress, and have found a plugin to help with this. But I need some javascript to take the selected text, and apply a style to it, like this:

selected text

becomes

<span class="mp3">selected text</span>

any ideas?

hutstein

you can use it like this <a onlick="insert('<span class="mp3">','</span>')">test</a> <script> function insert(aTag, eTag) { var input = document.getElementById("CommentBox"); var wert; input.focus(); /* für Internet Explorer */ if(typeof document.selection != 'undefined') { /* Einfügen des Formatierungscodes */ var range = document.selection.createRange(); var insText = range.text; range.text = aTag + insText +eTag ; /* Anpassen der Cursorposition */ range = document.selection.createRange(); if (insText.length == 0) { range.move('character', -eTag.length); } else { range.moveStart('character', aTag.length + insText.length + eTag.length); } range.select(); } /* für neuere auf Gecko basierende Browser */ else if(typeof input.selectionStart != 'undefined'){ /* Einfügen des Formatierungscodes */ var start = input.selectionStart; var end = input.selectionEnd; var insText = input.value.substring(start, end); input.value = input.value.substr(0, start) + aTag + insText + eTag + input.value.substr(end) ; /* Anpassen der Cursorposition */ var pos; if (insText.length == 0) { pos = start + aTag.length+opentag.length+closetag.length; } else { pos = start + aTag.length + insText.length + eTag.length; } input.selectionStart = pos; input.selectionEnd = pos; } /* für die übrigen Browser */ else { /* Abfrage der Einfügeposition */ var pos; var re = new RegExp('^[0-9]{0,3}$'); while(!re.test(pos)) { pos = prompt("Einfügen an Position (0.." + input.value.length + "):", "0"); } if(pos > input.value.length) { pos = input.value.length; } /* Einfügen des Formatierungscodes */ var insText = prompt("Please insert the text, that should be formatted:"); input.value = input.value.substr(0, pos) + aTag + insText + eTag + input.value.substr(pos); } } } </script>

3stripe

wow that was fast, thanx

the syntax for adding the code is more like this example:

buttonsnap_jsbutton($button_image_url2, 'Javascript Button', 'alert(\'foo!\');');

so i've inserted your function below this in the php file, and am just trying to call it now...

hutstein

I didn't know the wordpress code,... The function isn't written by myself, I found it somewhere, and it worked fine for me

3stripe

hmmm tinyMCE is proving trickier than i thought...