KickApps: Cutomize TinyMCE buttons and more!


/ Published in: JavaScript
Save to your folder(s)

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):
<a href="http://wiki.moxiecode.com/index.php/TinyMCE:Control_reference">http://wiki.moxiecode.com/index.php/TinyMCE:Control_reference</a>

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 <code>Ka.Settings.tinyMCE.theme_advanced_buttons2</code> and <code>Ka.Settings.tinyMCE.theme_advanced_buttons3</code>.

Default values of all variables are:
<code>Ka.Settings.tinyMCE.theme_advanced_buttons1 = "bold,italic,link,unlink,forecolor,backcolor,bullist,numlist,hr,blockquote,charmap,code,emotions,kickmedia";</code>
<code>Ka.Settings.tinyMCE.theme_advanced_buttons2 = '';</code>
<code>Ka.Settings.tinyMCE.theme_advanced_buttons3 = '';</code>

<code>Ka.Settings.tinyMCE.plugins = "kickmedia,emotions,media";</code>

Other editable values:
<code>Ka.Settings.tinyMCE.defaultHeight</code>
<code>Ka.Settings.tinyMCE.resizingMinHeight</code>
<code>Ka.Settings.tinyMCE.resizingMaxHeight</code>

<strong>Note:</strong> For security reasons, most but not all plugins from the <a href="http://wiki.moxiecode.com/index.php/TinyMCE:Control_reference">full plugin list</a> will work on the KickApps platform.

--
For more tips and tricks checkout the <a href="http://www.kickdeveloper.com/resources">KickApps resources page</a>.


Copy this code and paste it in your HTML
  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


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.