Configuring the WYSIWYG editor
The announcement portlet's WYSIWYG editor is driven by TinyMCE and by default contains a very small number of buttons. This default list may be expanded to support a large number of HTML elements, including images, fonts, and special characters. To change the buttons displayed in the editor, open src/main/webapp/WEB-INF/jsp/addAnnouncement.jsp and scroll to the bottom of the file.
The tinyMCE.init call in the JavaScript at the bottom of the page contains properties starting with theme_advanced_button that control the displayed editor buttons. Each property corresponds to a button row, and each row is numbered appropriately. Buttons may be added to each row and ordered as desired. The available buttons are listed in the TinyMCE documentation, and the name "separator" may be used to separate buttons.
The following example configures an editor with two rows of buttons:
<script type="text/javascript">
<!--
tinyMCE.init({
mode : "textareas",
editor_selector : "mceEditor",
theme : "advanced",
theme_advanced_buttons1 : "bold,italic,underline,blockquote,separator,indent,fontselect,fontsizeselect,charmap",
theme_advanced_buttons2 : "image,anchor,separator,bullist,numlist,undo,redo,link,unlink,indent",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
extended_valid_elements : "a[name|href|target|title|onclick],span[class|align|style]"
});
//-->
</script>
The code above would produce an editor that looks like
