Joomla2.5: How to add custom button in TinyMce

[websitedesign141]

Hi,

I like to add a custom button in Joomla2.5 tinymce editor,in my component

i have tried a lot of search but no use.

Finally i came here,can you please give me a solution for this like any documentation,sample code any plugins etc.

Thanks in advance.

[Yesceeohhh]

Hope this script will help you :

[B]Including TinyMCE[/B]
<script src="/scripts/tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<script>
tinyMCE.init({
mode : "textareas",
theme : "advanced",
force_br_newlines : true,
theme_advanced_buttons1 : "link,unlink,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
theme_advanced_buttons4 : "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "",
theme_advanced_resizing : true
});
</script>

[B]Adding the Button[/B]
tinyMCE.init({
mode : "textareas",
theme : "advanced",
force_br_newlines : true,
theme_advanced_buttons1 : "link,unlink,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,mybutton",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
theme_advanced_buttons4 : "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "",
theme_advanced_resizing : true
});

There are some buttons described in /tinymce/jscripts/tiny_mce/themes/advanced/editor_template_src.js file:
tinymce.create('tinymce.themes.AdvancedTheme', {
// Control name lookup, format: title, command
controls : {
bold : ['bold_desc', 'Bold'],
italic : ['italic_desc', 'Italic'],
underline : ['underline_desc', 'Underline'],
strikethrough : ['striketrough_desc', 'Strikethrough'],
justifyleft : ['justifyleft_desc', 'JustifyLeft'],
justifycenter : ['justifycenter_desc', 'JustifyCenter'],
justifyright : ['justifyright_desc', 'JustifyRight'],
justifyfull : ['justifyfull_desc', 'JustifyFull'],
bullist : ['bullist_desc', 'InsertUnorderedList'],
numlist : ['numlist_desc', 'InsertOrderedList'],
outdent : ['outdent_desc', 'Outdent'],
indent : ['indent_desc', 'Indent'],
...

What you need to do is simply to add a new line to this config array:

...
blockquote : ['blockquote_desc', 'mceBlockQuote'],
mybutton : ['mybutton_desc','myFunc']
},

[jackson2012]

May this will help you:

<script src="/scripts/tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<script>
tinyMCE.init({
mode : "textareas",
theme : "advanced",
force_br_newlines : true,
theme_advanced_buttons1 : "link,unlink,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
theme_advanced_buttons4 : "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "",
theme_advanced_resizing : true
});
</script>

[irandream]

I got solution and also i refer this site:
http://www.tinymce.com/tryit/custom_toolbar_button.php

[jeffanderson]

This would be a great reference.

[daoduchung]

[QUOTE=jeffanderson;48609]This would be a great reference.[/QUOTE]
I agree with you

[salomonkalou69]

This is what I need. I found it here... Thanks

[Bratu Marian]

[QUOTE=Yesceeohhh;48160]Hope this script will help you :

[B]Including TinyMCE[/B]
<script src="/scripts/tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<script>
tinyMCE.init({
mode : "textareas",
theme : "advanced",
force_br_newlines : true,
theme_advanced_buttons1 : "link,unlink,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
theme_advanced_buttons4 : "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "",
theme_advanced_resizing : true
});
</script>

[B]Adding the Button[/B]
tinyMCE.init({
mode : "textareas",
theme : "advanced",
force_br_newlines : true,
theme_advanced_buttons1 : "link,unlink,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,mybutton",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
theme_advanced_buttons4 : "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "",
theme_advanced_resizing : true
});

There are some buttons described in /tinymce/jscripts/tiny_mce/themes/advanced/editor_template_src.js file:
tinymce.create('tinymce.themes.AdvancedTheme', {
// Control name lookup, format: title, command
controls : {
bold : ['bold_desc', 'Bold'],
italic : ['italic_desc', 'Italic'],
underline : ['underline_desc', 'Underline'],
strikethrough : ['striketrough_desc', 'Strikethrough'],
justifyleft : ['justifyleft_desc', 'JustifyLeft'],
justifycenter : ['justifycenter_desc', 'JustifyCenter'],
justifyright : ['justifyright_desc', 'JustifyRight'],
justifyfull : ['justifyfull_desc', 'JustifyFull'],
bullist : ['bullist_desc', 'InsertUnorderedList'],
numlist : ['numlist_desc', 'InsertOrderedList'],
outdent : ['outdent_desc', 'Outdent'],
indent : ['indent_desc', 'Indent'],
...

What you need to do is simply to add a new line to this config array:

...
blockquote : ['blockquote_desc', 'mceBlockQuote'],
mybutton : ['mybutton_desc','myFunc']
},[/QUOTE]

Thanks "Yesceeohhh"! You make my day...

[apcpcb2012]

It's working for me too..thx

[jacket]

I think, you can search for documents on the internet