Posted By

krunkosaurus on 05/07/09


Tagged

tinymce kickapps


Versions (?)

KickApps: Cutomize TinyMCE buttons and more!


 / Published in: JavaScript
 

The KickApps platform comes preloaded with a default set of buttons in your rich-text editor but you can customize your own set of buttons with a few lines of JavaScript - either for all rich-text areas or per page.

The example #1 here changes the rich-text editor buttons for just the add-blog page to have other options such as font-selection. (Wrap it in script tags and place in your AC header.)

A full list of button options can be found here (first column only): http://wiki.moxiecode.com/index.php/TinyMCE:Control_reference

For the advanced users wanting to access plugins in the second and third column of the above link, you need to append the plugin name to the variable Ka.Settings.tinyMCE.plugins.

You can also specify up to three rows of buttons by editing the variables Ka.Settings.tinyMCE.themeadvancedbuttons2 and Ka.Settings.tinyMCE.themeadvancedbuttons3.

Default values of all variables are: Ka.Settings.tinyMCE.themeadvancedbuttons1 = "bold,italic,link,unlink,forecolor,backcolor,bullist,numlist,hr,blockquote,charmap,code,emotions,kickmedia"; Ka.Settings.tinyMCE.themeadvancedbuttons2 = ''; Ka.Settings.tinyMCE.themeadvancedbuttons3 = '';

Ka.Settings.tinyMCE.plugins = "kickmedia,emotions,media";

Other editable values: Ka.Settings.tinyMCE.defaultHeight Ka.Settings.tinyMCE.resizingMinHeight Ka.Settings.tinyMCE.resizingMaxHeight

Note: For security reasons, most but not all plugins from the full plugin list will work on the KickApps platform.

-- For more tips and tricks checkout the KickApps resources page.

  1. // #1 Page sepcific
  2. if (Ka.Info.PAGE == "pages/addBlog.jsp"){
  3. Ka.Settings.tinyMCE.theme_advanced_buttons1 = 'fontselect,fontsizeselect,backcolorpicker,forecolorpicker,emotions';
  4. }
  5.  
  6. // #2 If you want to just replace one item from your current list of buttons:
  7. Ka.Settings.tinyMCE.theme_advanced_buttons1 = Ka.Settings.tinyMCE.theme_advanced_buttons1.replace('bullet', 'fontsizeselect');
  8.  
  9. // #3 If you want to just want to add an extra button to the end of the list:
  10. Ka.Settings.tinyMCE.theme_advanced_buttons1 = Ka.Settings.tinyMCE.theme_advanced_buttons1 + ',fontsizeselect';

Report this snippet  

You need to login to post a comment.