Rich Text Editor demo

Description
This page displays a basic RichTextEditor with a new custom button.
The Javascript handler beforeRenderRichTextEditor is used to add a new button to the default toolbar.

In this example, we create a new button used to adding a fullscreen feature.
The new button is added to the textstyle group.
Available groups are : alignment, indentlist, undoredo, parastyle, and textstyle.
Notice, the style used to display the new button, and the javascript fullscreenClick event used to handle the state of the button.
More informations on the YUI documentation (for a full sample, see http://developer.yahoo.com/yui/examples/editor/code_editor.html).



In Action

Submitted text :




TML Source code

	
	  <style type="text/css">
          .exanpe-rte .yui-skin-sam .yui-toolbar-container .yui-toolbar-fullscreen span.yui-toolbar-icon {
              background-image: url("/img/rte/fullscreen.gif");
              background-position: 1px 0;
              left: 7px;
              top: 4px;
          }
	  </style> 	
	
        <t:form>
            <t:textarea t:id="rte" value="rte" t:mixins="exanpe/RichTextEditor" t:title="literal:Rich Text Editor">
            </t:textarea>
            <t:submit/>
            <br />
            <p>Submitted text :</p>
            <t:outputraw value="rte" />
        </t:form>
        
        <script type="text/javascript">
            YAHOO.util.Event.onDOMReady(function(){
                rte.beforeRenderRichTextEditor = function() {
                	var fullscreenButton = {type: 'push', label: 'Fullscreen', value: 'fullscreen'
                };
                rte.getToolbar().addButtonToGroup(fullscreenButton, 'textstyle');
 		       
                var isFull = false;
                var defaults = {};
                defaults.width = rte.getConfig().width;
                rte.getToolbar().on('fullscreenClick', function(ev) {
                    var container = rte.getContainer();
                    if (isFull === false) {
                        isFull = true; // Make it full screen
                        YAHOO.util.Dom.setStyle(container, 'position', 'absolute');
                        YAHOO.util.Dom.setStyle(container, 'backgroundColor', 'white');
                        YAHOO.util.Dom.setStyle(container, 'top', '0');
                        YAHOO.util.Dom.setStyle(container, 'left', '0');
                        YAHOO.util.Dom.setStyle(container, 'width', YAHOO.util.Dom.getClientWidth() + 'px');
                        YAHOO.util.Dom.setStyle(container, 'height', YAHOO.util.Dom.getClientHeight() + 'px');
                        scroll(0,0);
                    } else {
                        isFull = false; // Make it normal again
                        YAHOO.util.Dom.setStyle(container, 'position', 'static');
                        YAHOO.util.Dom.setStyle(container, 'backgroundColor', '');
                        YAHOO.util.Dom.setStyle(container, 'top', '');
                        YAHOO.util.Dom.setStyle(container, 'left', '');
                        YAHOO.util.Dom.setStyle(container, 'width', defaults.width);
                        YAHOO.util.Dom.setStyle(container, 'height', '');
	                }
	                return false;
		        }, rte, true);	 		       
 		       
			};
		});
      </script>	
        
	



Java code

        @Persist(PersistenceConstants.FLASH)
        @Property
        private String rte;