Table of Contents
OpenLaszlo provides capabilities for setting HTML text attributes using the
<rte> component.
The <rte> component uses the dijit.Editor from the dojo
toolkit. For more information about the dijit.Editor, see dijit.Editor. For detailed information about the component, see the Reference.
The simplest way to use the RTE is with the defaults:
Example 22.1. <rte> component
<canvas width="100%" height="400">
<include href="extensions/rte.lzx"/>
<rte width="600" height="400">Initial contents of the component.</rte>
</canvas>
<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2010 Laszlo Systems, Inc. All Rights Reserved. *
* Use is subject to license terms. *
* X_LZ_COPYRIGHT_END ****************************************************** -->
The following example shows the RTE with limited toolbar plugins. The list of toolbar plugins is a comma-separated list. A '|' puts a seaparator between groups of similar options. A '||' will force a linebreak in the toolbar.
Example 22.2. Limiting <rte> plugins
<canvas width="100%" height="450">
<include href="extensions/rte.lzx"/>
<rte width="600" height="400" scrollbars="false" toolbar_order="bold,italic,underline">rte with
limited toolbar options</rte>
</canvas>
<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2010 Laszlo Systems, Inc. All Rights Reserved. *
* Use is subject to license terms. *
* X_LZ_COPYRIGHT_END ****************************************************** -->
You can add custom buttons to the rte component. Custom buttons are placed above the
editor. The first argument to addButton() is the list of properties to
set in a HTML <input> element.
Example 22.3. Adding custom buttons to the <rte> component
<canvas width="100%" height="400">
<include href="extensions/rte.lzx"/>
<rte width="600" height="400">Initial contents of the component.
<method name="rte_bold_callback" args="txt"><![CDATA[
// Turn all the text bold
this.setAttribute ('text', '<b>' + txt + '</b>');
]]></method>
<method name="rte_bold" args="ignore">
this.getText(new LzDelegate(this, 'rte_bold_callback'));
</method>
<handler name="oneditorready">
this.addButton ({type: 'image', src:'./resources/logo.png',
width:'44', height:'44', alt:'All Bold', title:'All Bold'}, new LzDelegate(this, 'rte_bold'));
</handler>
</rte>
</canvas>
<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2010 Laszlo Systems, Inc. All Rights Reserved. *
* Use is subject to license terms. *
* X_LZ_COPYRIGHT_END ****************************************************** -->
The following example shows how you can add a custom image button to the rte component. This demonstrates how you can use an image button instead of text.
Example 22.4. Adding a custom image to the <rte> component
<canvas width="100%" height="400">
<include href="extensions/rte.lzx"/>
<rte width="600" height="400">Initial contents of the component.
<method name="rte_bold_callback" args="txt"><![CDATA[
// Turn all the text bold
this.setAttribute ('text', '<b>' + txt + '</b>');
]]></method>
<method name="rte_bold" args="ignore">
this.getText(new LzDelegate(this, 'rte_bold_callback'));
</method>
<handler name="oneditorready">
this.addButton ({value:'All Bold'}, new LzDelegate(this, 'rte_bold'));
</handler>
</rte>
</canvas>
<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2010 Laszlo Systems, Inc. All Rights Reserved. *
* Use is subject to license terms. *
* X_LZ_COPYRIGHT_END ****************************************************** -->
The following example shows how you can add a custom wrapper file.
Example 22.5. Using a custom wrapper with the <rte> component
<canvas width="100%" height="450">
<include href="extensions/rte.lzx"/>
<rte width="600" height="400" wrapperfile="wrapper-5.html">Initial contents of the component.
</rte>
</canvas>
<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2010 Laszlo Systems, Inc. All Rights Reserved. *
* Use is subject to license terms. *
* X_LZ_COPYRIGHT_END ****************************************************** -->
The following example shows how you can emulate pluggins.
Example 22.6. Emulating plugins with the <rte> component
<canvas width="100%" height="450">
<include href="extensions/rte.lzx"/>
<rte width="600" height="400">Initial contents of the component.
<method name="rte_togglestyles" args="ignore">
this.execCommand ('bold');
this.execCommand ('italic');
this.execCommand ('underline');
</method>
<handler name="oneditorready"> this.addButton ({value:'Toggle Styles'}, new LzDelegate(this,
'rte_togglestyles'));
</handler>
</rte>
</canvas>
<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2010 Laszlo Systems, Inc. All Rights Reserved. *
* Use is subject to license terms. *
* X_LZ_COPYRIGHT_END ****************************************************** -->