Online Joomla Training  
+ Reply to Thread
Results 1 to 10 of 10

Thread: Joomla2.5: How to add custom button in TinyMce

  1. #1
    Join Date
    Apr 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Joomla2.5: How to add custom button in TinyMce

    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.

  2. #2
    Join Date
    May 2012
    Posts
    11
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    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']
    },

  3. #3
    Join Date
    May 2012
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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>

  4. #4
    Join Date
    May 2012
    Posts
    7
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

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

  5. #5
    Join Date
    May 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

  6. #6
    Join Date
    May 2012
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

  7. #7
    Join Date
    Jun 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

  8. #8
    Join Date
    Mar 2013
    Posts
    6
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    [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...

  9. #9
    Join Date
    Oct 2012
    Posts
    27
    Thanks
    0
    Thanked 1 Time in 1 Post

  10. #10
    Join Date
    Sep 2012
    Posts
    36
    Thanks
    0
    Thanked 2 Times in 2 Posts

    Default

    I think, you can search for documents on the internet

+ Reply to Thread

Similar Threads

  1. Can't see my custom Favicon
    By abc150781 in forum Free Product Support
    Replies: 1
    Last Post: 10-19-2011, 02:33 PM
  2. Replies: 2
    Last Post: 10-08-2011, 08:57 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts