Configuring the WYSIWYG editor
Adding WYSIWYG Buttons
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,code",
theme_advanced_buttons3 : "",
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:
Enabling HTML Source Editing
Direct HTML source editing of announcements may be enabled by adding the "code" button to the TinyMCE editor, as described above. Once this button is available, clicking the "HTML" control in the button bar will launch a popup window that allows direct source code manipulation.
While this mode allows an administrator to enter any HTML content, TinyMCE is configured with rules that enforce valid HTML and limit the set of allowed HTML elements and attributes. In particular, administrators may find that the "class" attribute is not generally permitted by the editor. To configure the list of allowed elements and attributes, edit the extended_valid_elements property, adding elements and attributes as desired. For example, to allow administrators to add a class attribute to links, edit the line
extended_valid_elements : "a[name|href|target|title|onclick],span[class|align|style]"
to
extended_valid_elements : "a[name|href|target|title|onclick|class],span[class|align|style]"
More information about this configuration option, as well as documentation on the default configuration, is available in TinyMCE's FAQ.