You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@royale.apache.org by al...@apache.org on 2018/08/06 09:56:51 UTC
[royale-asjs] branch feature/MXRoyale updated: RichTextEditor.mxml
Added
This is an automated email from the ASF dual-hosted git repository.
alinakazi pushed a commit to branch feature/MXRoyale
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
The following commit(s) were added to refs/heads/feature/MXRoyale by this push:
new ebaf942 RichTextEditor.mxml Added
ebaf942 is described below
commit ebaf94268e59ee796fd39bf1d5dbc240788737c8
Author: alinakazi <AL...@GMAIL.COM>
AuthorDate: Mon Aug 6 14:56:50 2018 +0500
RichTextEditor.mxml Added
---
.../main/royale/mx/controls/RichTextEditor.mxml | 1078 ++++++++++++++++++++
1 file changed, 1078 insertions(+)
diff --git a/frameworks/projects/MXRoyale/src/main/royale/mx/controls/RichTextEditor.mxml b/frameworks/projects/MXRoyale/src/main/royale/mx/controls/RichTextEditor.mxml
new file mode 100644
index 0000000..15b9a2c
--- /dev/null
+++ b/frameworks/projects/MXRoyale/src/main/royale/mx/controls/RichTextEditor.mxml
@@ -0,0 +1,1078 @@
+<?xml version="1.0"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+
+
+<!---
+ The RichTextEditor control lets users enter and format text. The text characteristics that users can vary
+ include the font family, color, size, and style, and other properties such as text alignment, bullets and
+ URL links. The control consists of a Panel control with two direct children:
+ <ul>
+ <li>A Text Area control where users can enter text.</li>
+ <li>A Container with format controls that let a
+ user specify the text characteristics. The format controls affect text being typed or selected text.</li>
+ </ul>
+
+ <p>The RichTextEditor has a default height and width of 300 by 325 pixels
+ and a default minimum height and width of 200 by 220 pixels.
+ If you put a RichTextEditor control in a DividedBox control, make sure that
+ the DividedBox control is large enough to contain the RichTextEditor control
+ at its minimum dimensions.
+ Also, you can explicitly set the RichTextEditor control's minHeight or
+ minWidth property to <code>NaN</code> to let the DividedBox container
+ reduce the control's dimensions to 0.</p>
+
+ <p>The following table describes the subcontrols that you can access and modify:</p>
+ <table class="innertable" >
+ <tr>
+ <th>Control Type </th>
+ <th>ID</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><a href="../controls/TextArea.html">TextArea</a></td>
+ <td>textArea</td>
+ <td>Area where the user can enter text.</td>
+ </tr>
+ <tr>
+ <td><a href="../core/Container.html">Container</a></td>
+ <td>toolbar</td>
+ <td>The container for the formatting controls; puts the controls in a single
+ horizontal row, if they fit, or multiple rows, otherwise.</td>
+ </tr>
+ <tr>
+ <td><a href="../controls/ComboBox.html">ComboBox</a></td>
+ <td>fontFamilyCombo</td>
+ <td>Specifies the text font family. The ComboBox dataProvider is an Array of Strings with the following values:
+ <ul>
+ <li>_sans</li>
+ <li>_serif</li>
+ <li>_typewriter</li>
+ <li>Arial</li>
+ <li>Courier</li>
+ <li>Courier New</li>
+ <li>Geneva</li>
+ <li>Georgia</li>
+ <li>Helvetica</li>
+ <li>Times New Roman</li>
+ <li>Times</li>
+ <li>Verdana (default)</li>
+ </ul></td>
+ </tr>
+ <tr>
+ <td><a href="../controls/ComboBox.html">ComboBox</a></td>
+ <td>fontSizeCombo</td>
+ <td>Specifies the font size. The ComboBox dataProvider is an Array of Strings with the following values:
+ 8, 9, 10 (default), 11, 12, 14, 16, 18, 20, 24, 26, 28, 36, 48, 72.
+ <p><strong>Note:</strong>This specification is the actual pixel value for the font size. These sizes are not equivalent to the
+ relative font sizes specified in HTML using the <code>size</code> attribute of the <font> tag.</p></td>
+ </tr>
+ <tr>
+ <td><a href="../containers/HBox.html">HBox</a></td>
+ <td>toolBar2</td>
+ <td>Contains the font characteristic buttons.</td>
+ </tr>
+ <tr>
+ <td><a href="../controls/Button.html">Button</a></td>
+ <td>boldButton</td>
+ <td>When toggled to selected="true", sets the font to bold. </td>
+ </tr>
+ <tr>
+ <td><a href="../controls/Button.html">Button</a></td>
+ <td>italicButton</td>
+ <td>When toggled to selected="true", sets the font to italic. </td>
+ </tr>
+ <tr>
+ <td><a href="../controls/Button.html">Button</a></td>
+ <td>underlineButton</td>
+ <td>When toggled to selected="true", sets the font to underlined.</td>
+ </tr>
+ <tr>
+ <td><a href="../controls/ColorPicker.html">ColorPicker</a></td>
+ <td>colorPicker</td>
+ <td>Specifies the color of the text. </td>
+ </tr>
+ <tr>
+ <td><a href="../controls/ToggleButtonBar.html">ToggleButtonBar</a></td>
+ <td>alignButtons</td>
+ <td>Specifies the text alignment. The control's data provider consists of an Array Of objects, with the object <code>action</code> field specifying the justification type. The available actions are as follows:
+ <ul>
+ <li>left (default) </li>
+ <li>center</li>
+ <li>right</li>
+ <li>justify</li>
+ </ul></td>
+ </tr>
+ <tr>
+ <td><a href="../controls/Button.html">Button</a></td>
+ <td>bulletButton</td>
+ <td>When toggled to selected="true", sets the current line, or the selected line, to a list item, preceded by a bullet.</td>
+ </tr>
+ <tr>
+ <td><a href="../controls/TextInput.html">TextInput</a></td>
+ <td>linkTextInput</td>
+ <td>This field is enabled only when text is selected.
+ When the user enters a URL in this field and presses the Enter key, Flex inserts
+ the equivalent of an HTML <code><a href="<em>user_text</em>"
+ target="blank"></a></code> tag in the TextArea subcontrol
+ at around the currently selected text.
+
+ <p>Flex initially fills this control with the text specified by the
+ <code>defaultLinkProtocol</code> property; users can append the rest of the link
+ to this text, or replace it.</p>
+ </td>
+ </tr>
+ </table>
+
+ <p>To access one of the subcontrols, you can use syntax similar to the following:
+ <pre>
+ myRTE.toolBar2.setStyle("backgroundColor", 0xCC6633);
+ </pre>
+ </p>
+
+ <p>The RichTextEditor control has the following default sizing
+ characteristics:</p>
+ <table class="innertable">
+ <tr>
+ <th>Characteristic</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td>Default size</td>
+ <td>325 pixels wide by 300 pixels high</td>
+ </tr>
+ <tr>
+ <td>Minimum size</td>
+ <td>220 pixels wide by 200 pixels high</td>
+ </tr>
+ <tr>
+ <td>Maximum size</td>
+ <td>10000 by 10000 pixels</td>
+ </tr>
+ </table>
+
+ @mxml
+
+ <p>The <mx:RichTextEditor> tag inherits all the members
+ of its parent and adds the following members:</p>
+ <pre>
+ <RichTextEditor
+ <strong>Properties</strong>
+ defaultLinkProtocol="http://"
+ htmlText=""
+ showControlBar="true | false"
+ showToolTips="false | true"
+ text=""
+
+ <strong>Events</strong>
+ change
+ />
+
+ </pre>
+
+ @see mx.containers.ControlBar
+ @see mx.containers.Panel
+ @see mx.controls.ToggleButtonBar
+ @see mx.controls.Button
+ @see mx.controls.ColorPicker
+ @see mx.controls.ComboBox
+ @see mx.controls.TextArea
+ @see mx.controls.TextInput
+
+ @includeExample examples/RichTextEditorExample.mxml
+
+ @langversion 3.0
+ @playerversion Flash 9
+ @playerversion AIR 1.1
+ @productversion Flex 3
+
+ -->
+ <mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*" minWidth="220" minHeight="200" width="325" height="300">
+
+ <mx:Metadata>
+ <![CDATA[
+ /**
+ * Dispatched when the user changes the contents or format of the text in the
+ * TextArea control.
+ * This event is not dispatched if you change the TextArea contents by
+ * resetting the <code>text</code> or <code>htmlText</code> property.
+ *
+ * @eventType flash.events.Event.CHANGE
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion Flex 3
+ */
+ [Event(name="change", type="flash.events.Event")]
+
+ [DefaultTriggerEvent("change")]
+
+ /**
+ * Name of the CSS Style declaration to use for the styles for the TextArea.
+ * By default, the TextArea uses the the RichTextEditor's inheritable styles.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion Flex 3
+ */
+ [Style(name="textAreaStyleName", type="String", inherit="no")]
+
+ [IconFile("RichTextEditor.png")]
+
+ [Exclude(name="alignButtons", kind="property")]
+ [Exclude(name="boldButton", kind="property")]
+ [Exclude(name="bulletButton", kind="property")]
+ [Exclude(name="colorPicker", kind="property")]
+ [Exclude(name="defaultButton", kind="property")]
+ [Exclude(name="fontFamilyArray", kind="property")]
+ [Exclude(name="fontFamilyCombo", kind="property")]
+ [Exclude(name="fontSizeArray", kind="property")]
+ [Exclude(name="fontSizeCombo", kind="property")]
+ [Exclude(name="icon", kind="property")]
+ [Exclude(name="italicButton", kind="property")]
+ [Exclude(name="label", kind="property")]
+ [Exclude(name="layout", kind="property")]
+ [Exclude(name="linkTextInput", kind="property")]
+ [Exclude(name="toolBar", kind="property")]
+ [Exclude(name="toolBar2", kind="property")]
+ [Exclude(name="underlineButton", kind="property")]
+ ]]>
+ </mx:Metadata>
+
+ <mx:Array id="fontFamilyArray">
+ <mx:String>_sans</mx:String>
+ <mx:String>_serif</mx:String>
+ <mx:String>_typewriter</mx:String>
+ <mx:String>Arial</mx:String>
+ <mx:String>Courier</mx:String>
+ <mx:String>Courier New</mx:String>
+ <mx:String>Geneva</mx:String>
+ <mx:String>Georgia</mx:String>
+ <mx:String>Helvetica</mx:String>
+ <mx:String>Times New Roman</mx:String>
+ <mx:String>Times</mx:String>
+ <mx:String>Verdana</mx:String>
+ </mx:Array>
+
+ <mx:Array id="fontSizeArray">
+ <mx:String>8</mx:String>
+ <mx:String>9</mx:String>
+ <mx:String>10</mx:String>
+ <mx:String>11</mx:String>
+ <mx:String>12</mx:String>
+ <mx:String>14</mx:String>
+ <mx:String>16</mx:String>
+ <mx:String>18</mx:String>
+ <mx:String>20</mx:String>
+ <mx:String>22</mx:String>
+ <mx:String>24</mx:String>
+ <mx:String>26</mx:String>
+ <mx:String>28</mx:String>
+ <mx:String>36</mx:String>
+ <mx:String>48</mx:String>
+ <mx:String>72</mx:String>
+ </mx:Array>
+
+ <mx:Script>
+ <![CDATA[
+
+ import mx.controls.textClasses.TextRange;
+ import mx.core.mx_internal;
+ import mx.core.IUITextField;
+ import mx.core.UITextFormat;
+
+ use namespace mx_internal;
+
+ /**
+ * The ToolTip that appears when the user hovers over the font drop-down list. To view ToolTips,
+ * you must also set the <code>showToolTips</code> property of the RichTextEditor control to <code>true</code>.
+ *
+ * @default "Font Family"
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion Flex 3
+ */
+ public var fontFamilyToolTip:String = "Font Family";
+
+ /**
+ * The ToolTip that appears when the user hovers over the font size drop-down list. To view ToolTips,
+ * you must also set the <code>showToolTips</code> property of the RichTextEditor control to <code>true</code>.
+ *
+ * @default "Font Size"
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion Flex 3
+ */
+ public var fontSizeToolTip:String = "Font Size";
+
+ /**
+ * The ToolTip that appears when the user hovers over the text bold button. To view ToolTips,
+ * you must also set the <code>showToolTips</code> property of the RichTextEditor control to <code>true</code>.
+ *
+ * @default "Bold"
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion Flex 3
+ */
+ public var boldToolTip:String = "Bold";
+
+ /**
+ * The ToolTip that appears when the user hovers over the text italic button. To view ToolTips,
+ * you must also set the <code>showToolTips</code> property of the RichTextEditor control to <code>true</code>.
+ *
+ * @default "Italic"
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion Flex 3
+ */
+ public var italicToolTip:String = "Italic";
+
+ /**
+ * The ToolTip that appears when the user hovers over the text underline button. To view ToolTips,
+ * you must also set the <code>showToolTips</code> property of the RichTextEditor control to <code>true</code>.
+ *
+ * @default "Underline"
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion Flex 3
+ */
+ public var underlineToolTip:String = "Underline";
+
+ /**
+ * The ToolTip that appears when the user hovers over the ColorPicker control. To view ToolTips,
+ * you must also set the <code>showToolTips</code> property of the RichTextEditor control to <code>true</code>.
+ *
+ * @default "Color"
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion Flex 3
+ */
+ public var colorPickerToolTip:String = "Color";
+
+ /**
+ * The ToolTip that appears when the user hovers over the text alignment buttons. All the buttons
+ * share the same ToolTip. To view ToolTips, you must also set the <code>showToolTips</code>
+ * property of the RichTextEditor control to <code>true</code>.
+ *
+ * @default "Align"
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion Flex 3
+ */
+ public var alignToolTip:String = "Align";
+
+ /**
+ * The ToolTip that appears when the user hovers over the bulleted list button. To view ToolTips,
+ * you must also set the <code>showToolTips</code> property of the RichTextEditor control to <code>true</code>.
+ *
+ * @default "Bullet"
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion Flex 3
+ */
+ public var bulletToolTip:String = "Bullet";
+
+ /**
+ * The ToolTip that appears when the user hovers over the link text input field. To view ToolTips,
+ * you must also set the <code>showToolTips</code> property of the RichTextEditor control to <code>true</code>.
+ * @default "Link"
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion Flex 3
+ *
+ */
+ public var linkToolTip:String = "Link";
+
+ private var linkTextCommitted:Boolean = false;
+ private var showControlBarChanged:Boolean = false;
+ private var showToolTipsChanged:Boolean = false;
+ private var textChanged:Boolean = false;
+ private var htmlTextChanged:Boolean = false;
+ private var previousTextFormat:TextFormat = null;
+ private var textFormatChanged:Boolean = false;
+ // -1 is used to force updation of the ToolBar styles
+ private var lastCaretIndex:int = -1;
+ private var invalidateToolBarFlag:Boolean = false;
+ private var firstTime:Boolean = true;
+
+ /*
+ public function RichTextEditor()
+ {
+ super();
+ }
+ */
+
+ //--------------------------------------------------------------------------
+ //
+ // Properties
+ //
+ //--------------------------------------------------------------------------
+
+ //----------------------------------
+ // defaultLinkProtocol
+ //----------------------------------
+
+ private var _defaultLinkProtocol:String = "http://";
+
+ [Inspectable(defaultValue="http://")]
+
+ /**
+ * The default protocol string to use at the start of link text.
+ * This string appears in the LinkTextInput subcontrol, so users do
+ * not have to type the protocol identifier when entering link text.
+ *
+ * @default "http://"
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion Flex 3
+ */
+ public function get defaultLinkProtocol():String
+ {
+ return _defaultLinkProtocol;
+ }
+
+ /**
+ * @private
+ */
+ public function set defaultLinkProtocol(value:String):void
+ {
+ _defaultLinkProtocol = value;
+
+ if (linkTextInput)
+ linkTextInput.text = _defaultLinkProtocol;
+ }
+
+ //----------------------------------
+ // showControlBar
+ //----------------------------------
+
+ private var _showControlBar:Boolean = true;
+
+ [Inspectable(category="General", defaultValue="true")]
+
+ /**
+ * Specifies whether to display the control bar that contains the text
+ * formatting controls.
+ *
+ * @default true
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion Flex 3
+ */
+ public function get showControlBar():Boolean
+ {
+ return _showControlBar;
+ }
+
+ /**
+ * @private
+ */
+ public function set showControlBar(value:Boolean):void
+ {
+ _showControlBar = value;
+ showControlBarChanged = true;
+ invalidateProperties();
+ }
+
+ //----------------------------------
+ // showToolTips
+ //----------------------------------
+
+ private var _showToolTips:Boolean = false;
+
+ [Inspectable(defaultValue="false")]
+
+ /**
+ * Specifies whether to display tooltips for the text formatting controls.
+ *
+ * @default false
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion Flex 3
+ */
+ public function get showToolTips():Boolean
+ {
+ return _showToolTips;
+ }
+
+ /**
+ * @private
+ */
+ public function set showToolTips(value:Boolean):void
+ {
+ _showToolTips = value;
+ showToolTipsChanged = true;
+ invalidateProperties();
+ }
+
+ //----------------------------------
+ // selection
+ //----------------------------------
+
+ /**
+ * A TextRange object containing the selected text in the TextArea subcontrol.
+ *
+ * @see mx.controls.textClasses.TextRange
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion Flex 3
+ */
+ public function get selection():TextRange
+ {
+ return new TextRange(this, true);
+ }
+
+ //----------------------------------
+ // text
+ //----------------------------------
+
+ private var _text:String = "";
+
+ [Bindable("valueCommit")]
+ [CollapseWhiteSpace]
+ [NonCommittingChangeEvent("change")]
+ [Inspectable(category="General")]
+
+ /**
+ * Plain text without markup that displays in the RichTextEditor control's TextArea subcontrol.
+ * You cannot set this property and the <code>htmlText</code> property simultaneously.
+ * If you set one property, it replaces any value set using the other property.
+ * You can get both properties; the <code>text</code> property always returns a plain
+ * text String with no formatting information.
+ * For more information on using this property, see the TextArea documentation.
+ *
+ * @default ""
+ *
+ * @see mx.controls.TextArea
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion Flex 3
+ */
+ public function get text():String
+ {
+ return textArea ? textArea.text : _text;
+ }
+
+ /**
+ * @private
+ */
+ public function set text(value:String):void
+ {
+ _text = value;
+ textChanged = true;
+ invalidateProperties();
+ }
+
+ //----------------------------------
+ // htmlText
+ //----------------------------------
+
+ private var _htmlText:String = "";
+
+ [Bindable("valueCommit")]
+ [CollapseWhiteSpace]
+ [NonCommittingChangeEvent("change")]
+ [Inspectable(category="General")]
+
+ /**
+ * Text containing HTML markup that displays in the RichTextEditor
+ * control's TextArea subcontrol.
+ * You cannot set this property and the <code>text</code> property simultaneously.
+ * If you set one property, it replaces any value set using the other property.
+ * You can get both properties; the <code>htmlText</code> property always returns
+ * a String containing HTML markup that represents the current text formatting.
+ * For more information on using this property, see the TextArea documentation.
+ *
+ * @default ""
+ *
+ * @see mx.controls.TextArea
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion Flex 3
+ */
+ public function get htmlText():String
+ {
+ return textArea ? textArea.htmlText : _htmlText;
+ }
+
+ /**
+ * @private
+ */
+ public function set htmlText(value:String):void
+ {
+ _htmlText = value;
+ htmlTextChanged = true;
+ invalidateProperties();
+ }
+
+ //--------------------------------------------------------------------------
+ //
+ // Overridden methods
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * @private
+ */
+ override protected function commitProperties():void
+ {
+ super.commitProperties();
+
+ if (firstTime)
+ {
+ firstTime = false;
+ var textAreaStyleName:String = getStyle(
+ "textAreaStyleName");
+ if (textAreaStyleName)
+ textArea.styleName = textAreaStyleName;
+ textArea.getTextField().alwaysShowSelection = true;
+ }
+
+ if (showControlBarChanged)
+ {
+ if (_showControlBar)
+ {
+ controlBar.height = NaN;
+ controlBar.visible = true;
+ }
+ else
+ {
+ controlBar.height = 0;
+ controlBar.visible = false;
+ }
+ showControlBarChanged = false;
+ }
+
+ if (showToolTipsChanged)
+ {
+ if (_showToolTips)
+ {
+ fontFamilyCombo.toolTip = fontFamilyToolTip;
+ fontSizeCombo.toolTip = fontSizeToolTip;
+ boldButton.toolTip = boldToolTip;
+ italicButton.toolTip = italicToolTip;
+ underlineButton.toolTip = underlineToolTip;
+ colorPicker.toolTip = colorPickerToolTip;
+ alignButtons.toolTip = alignToolTip;
+ bulletButton.toolTip = bulletToolTip;
+ linkTextInput.toolTip = linkToolTip;
+ }
+ else
+ {
+ fontFamilyCombo.toolTip = "";
+ fontSizeCombo.toolTip = "";
+ boldButton.toolTip = "";
+ italicButton.toolTip = "";
+ underlineButton.toolTip = "";
+ colorPicker.toolTip = "";
+ alignButtons.toolTip = "";
+ bulletButton.toolTip = "";
+ linkTextInput.toolTip = "";
+ }
+ showToolTipsChanged = false;
+ }
+
+ if (textChanged || htmlTextChanged)
+ {
+ // Revert previously set TextFormat.
+ var tf:UITextFormat = IUITextField(textArea.getTextField()).getUITextFormat();
+ // bullet style is not exposed in flex
+ // hence has to be explicitly defaulted.
+ tf.bullet = false;
+ textArea.getTextField().defaultTextFormat = tf;
+ if (textChanged)
+ {
+ textArea.text = _text;
+ textChanged = false;
+ }
+ else
+ {
+ textArea.htmlText = _htmlText;
+ htmlTextChanged = false;
+ }
+ }
+ }
+
+ /**
+ * @private
+ */
+ override protected function measure():void
+ {
+ // Called only when explicitWidth and
+ // explicitHeight are set to NaN, since
+ // we have set width and height explicitly
+ // for RTE's panel.
+ super.measure();
+ measuredMinWidth = 220;
+ measuredWidth = 320;
+ measuredMinHeight = 200;
+ measuredHeight = 300;
+ }
+
+ /**
+ * @private
+ */
+ override public function styleChanged(styleProp:String):void
+ {
+ super.styleChanged(styleProp);
+
+ if (styleProp == null || styleProp == "textAreaStyleName")
+ {
+ if (textArea)
+ {
+ var textAreaStyleName:String = getStyle("textAreaStyleName");
+ textArea.styleName = textAreaStyleName;
+ }
+ }
+
+ if (!invalidateToolBarFlag)
+ {
+ invalidateToolBarFlag = true;
+ callLater(getTextStyles);
+ }
+ }
+
+ //--------------------------------------------------------------------------
+ //
+ // Methods
+ //
+ //--------------------------------------------------------------------------
+
+ private function setTextStyles(type:String, value:Object = null):void
+ {
+ var tf:TextFormat;
+
+ var beginIndex:int = textArea.getTextField().selectionBeginIndex;
+ var endIndex:int = textArea.getTextField().selectionEndIndex;
+
+ if (beginIndex == endIndex)
+ {
+ tf = previousTextFormat;
+ }
+ else
+ tf = new TextFormat();
+
+ if (type == "bold" || type == "italic" || type == "underline")
+ {
+ tf[type] = value;
+ }
+ else if (type == "align" || type == "bullet")
+ {
+ if (beginIndex == endIndex)
+ {
+ tf = new TextFormat();
+ }
+
+ // Apply the paragraph styles to the whole paragraph instead of just
+ // the selected text
+ beginIndex = textArea.getTextField().getFirstCharInParagraph(beginIndex) - 1;
+ beginIndex = Math.max(0, beginIndex);
+ endIndex = textArea.getTextField().getFirstCharInParagraph(endIndex) +
+ textArea.getTextField().getParagraphLength(endIndex) - 1;
+ tf[type] = value;
+ previousTextFormat[type] = value;
+ if (!endIndex)
+ textArea.getTextField().defaultTextFormat = tf;
+ }
+ else if (type == "font")
+ {
+ tf[type] = fontFamilyCombo.text;
+ }
+ else if (type == "size")
+ {
+ var fontSize:uint = uint(fontSizeCombo.text);
+ if (fontSize > 0)
+ tf[type] = fontSize;
+ }
+ else if (type == "color")
+ {
+ tf[type] = uint(colorPicker.selectedColor);
+ }
+ else if (type == "url")
+ {
+ if (value != defaultLinkProtocol && value != "")
+ {
+ tf[type] = value;
+ tf["target"] = "_blank";
+ }
+ else if (tf[type] != "")
+ {
+ tf[type] = "";
+ tf["target"] = "";
+ }
+ }
+
+ textFormatChanged = true;
+
+ if (beginIndex == endIndex)
+ {
+ previousTextFormat = tf;
+ }
+ else
+ {
+ textArea.getTextField().setTextFormat(tf,beginIndex,endIndex);
+ }
+
+ dispatchEvent(new Event("change"));
+
+ var caretIndex:int = textArea.getTextField().caretIndex;
+ var lineIndex:int = textArea.getTextField().getLineIndexOfChar(caretIndex);
+
+ textArea.invalidateDisplayList();
+ textArea.validateDisplayList();
+
+ // Scroll to make the line containing the caret under viewable area
+ while (lineIndex >= textArea.getTextField().bottomScrollV)
+ {
+ textArea.verticalScrollPosition++;
+ }
+
+ callLater(textArea.setFocus);
+ }
+
+ private function getTextStyles():void
+ {
+ if (!textArea)
+ return;
+
+ var tf:TextFormat;
+
+ var beginIndex:int = textArea.getTextField().selectionBeginIndex;
+ var endIndex:int = textArea.getTextField().selectionEndIndex;
+
+ if (beginIndex == endIndex)
+ linkTextInput.enabled = false;
+ else
+ linkTextInput.enabled = true;
+
+ if (textFormatChanged)
+ previousTextFormat = null;
+
+ if (beginIndex == endIndex)
+ {
+ tf = textArea.getTextField().defaultTextFormat;
+ if (tf.url != "")
+ {
+ var carIndex:int = textArea.getTextField().caretIndex;
+ if (carIndex < textArea.getTextField().length)
+ {
+ var tfNext:TextFormat=textArea.getTextField().getTextFormat(carIndex, carIndex + 1);
+ if (!tfNext.url || tfNext.url == "")
+ tf.url = tf.target = "";
+ }
+ else
+ tf.url = tf.target = "";
+ }
+ }
+ else
+ tf = textArea.getTextField().getTextFormat(beginIndex,endIndex);
+
+ if (!previousTextFormat || previousTextFormat.font != tf.font)
+ setComboSelection(fontFamilyCombo, tf.font ? tf.font : "");
+ if (!previousTextFormat || previousTextFormat.size != tf.size)
+ setComboSelection(fontSizeCombo, tf.size ? String(tf.size) : "");
+ if (!previousTextFormat || previousTextFormat.color != tf.color)
+ colorPicker.selectedColor = Number(tf.color);
+
+ if (!previousTextFormat || previousTextFormat.bold != tf.bold)
+ boldButton.selected = tf.bold;
+ if (!previousTextFormat || previousTextFormat.italic != tf.italic)
+ italicButton.selected = tf.italic;
+ if (!previousTextFormat || previousTextFormat.underline != tf.underline)
+ underlineButton.selected = tf.underline;
+
+ if (!previousTextFormat || previousTextFormat.align != tf.align)
+ {
+ if (tf.align == "left")
+ alignButtons.selectedIndex = 0;
+ else if (tf.align == "center")
+ alignButtons.selectedIndex = 1;
+ else if (tf.align == "right")
+ alignButtons.selectedIndex = 2;
+ else if (tf.align == "justify")
+ alignButtons.selectedIndex = 3;
+ }
+ if (!previousTextFormat || previousTextFormat.bullet != tf.bullet)
+ bulletButton.selected = tf.bullet;
+ if (!previousTextFormat || previousTextFormat.url != tf.url)
+ linkTextInput.text = (tf.url == "" || tf.url == null) ? defaultLinkProtocol : tf.url;
+
+ if (textArea.getTextField().defaultTextFormat != tf)
+ textArea.getTextField().defaultTextFormat = tf;
+ previousTextFormat = tf;
+ textFormatChanged = false;
+
+ lastCaretIndex = textArea.getTextField().caretIndex;
+ invalidateToolBarFlag = false;
+ }
+
+ private function setComboSelection(combo:ComboBox,val:String):void
+ {
+ var length:uint = combo.dataProvider.length;
+
+ for (var i:uint = 0; i < length; i++)
+ {
+ if (combo.dataProvider.getItemAt(i).toLowerCase() == val.toLowerCase())
+ {
+ combo.selectedIndex = i;
+ return;
+ }
+ }
+ combo.selectedIndex = -1;
+ combo.validateNow();
+ combo.text = val;
+ }
+
+ /**
+ * @private
+ * This method is called when the user clicks on the textArea, drags
+ * out of it and releases the mouse button outside the TextArea.
+ */
+ private function systemManager_mouseUpHandler(event:MouseEvent):void
+ {
+ if (lastCaretIndex != textArea.getTextField().caretIndex)
+ getTextStyles();
+ else
+ {
+ if (textArea.getTextField().selectionBeginIndex == textArea.getTextField().selectionEndIndex)
+ linkTextInput.enabled = false;
+ else
+ linkTextInput.enabled = true;
+ }
+ systemManager.removeEventListener(
+ MouseEvent.MOUSE_UP, systemManager_mouseUpHandler, true);
+ }
+
+ ]]>
+ </mx:Script>
+
+ <!--- @private -->
+ <mx:TextArea id="textArea" height="100%" width="100%" minHeight="0" minWidth="0"
+ change="dispatchEvent(event);"
+ valueCommit="dispatchEvent(event);"
+ keyUp="getTextStyles()"
+ keyDown="if (textFormatChanged)
+ {
+ textArea.getTextField().defaultTextFormat=previousTextFormat;
+ textFormatChanged = false;
+ }"
+ mouseDown="systemManager.addEventListener(
+ MouseEvent.MOUSE_UP, systemManager_mouseUpHandler, true);"
+ />
+
+ <mx:ControlBar>
+
+ <!--- @private -->
+ <mx:ToolBar id="toolbar" width="100%" horizontalGap="7">
+
+ <mx:ComboBox id="fontFamilyCombo" editable="true"
+ creationComplete="getTextStyles();lastCaretIndex = -1;"
+ dataProvider = "{fontFamilyArray}"
+ close="setTextStyles('font');"
+ enter="setTextStyles('font');"/>
+
+ <mx:ComboBox id="fontSizeCombo" editable="true"
+ paddingLeft="2" paddingRight="2"
+ dataProvider = "{fontSizeArray}"
+ close="setTextStyles('size');"
+ enter="setTextStyles('size');"/>
+
+ <mx:HBox id="toolBar2" horizontalGap="0">
+
+ <mx:Button id="boldButton" width="20" toggle="true"
+ icon="@Embed('assets/icon_style_bold.png')"
+ click="setTextStyles('bold', event.currentTarget.selected);" />
+
+ <mx:Button id="italicButton" width="20" toggle="true"
+ icon="@Embed('assets/icon_style_italic.png')"
+ click="setTextStyles('italic', event.currentTarget.selected);" />
+
+ <mx:Button id="underlineButton" width="20" toggle="true"
+ icon="@Embed('assets/icon_style_underline.png')"
+ click="setTextStyles('underline', event.currentTarget.selected);" />
+
+ </mx:HBox>
+
+ <mx:ColorPicker id="colorPicker" width="22" height="22"
+ close="setTextStyles('color');"/>
+
+ <mx:VRule height="{alignButtons.height}"/>
+
+ <mx:ToggleButtonBar id="alignButtons" buttonWidth="20"
+ itemClick="setTextStyles('align', ToggleButtonBar(event.currentTarget).dataProvider.getItemAt(ToggleButtonBar(event.currentTarget).selectedIndex).action); " >
+ <mx:dataProvider>
+ <mx:Array>
+ <mx:Object icon="@Embed('assets/icon_align_left.png')" action="left"/>
+ <mx:Object icon="@Embed('assets/icon_align_center.png')" action="center"/>
+ <mx:Object icon="@Embed('assets/icon_align_right.png')" action="right"/>
+ <mx:Object icon="@Embed('assets/icon_align_justify.png')" action="justify"/>
+ </mx:Array>
+ </mx:dataProvider>
+ </mx:ToggleButtonBar>
+
+ <mx:Button id="bulletButton" width="20" toggle="true"
+ icon="@Embed('assets/icon_bullet.png')"
+ click="setTextStyles('bullet', event.currentTarget.selected);" />
+
+ <mx:VRule height="{linkTextInput.height}"/>
+
+ <mx:TextInput id="linkTextInput" width="140"
+ focusOut="if (linkTextCommitted)
+ { trace('already committed'); linkTextCommitted = false; }
+ else
+ { trace('not committed'); setTextStyles('url', linkTextInput.text); linkTextInput.text=defaultLinkProtocol;}"
+ enter="setTextStyles('url', linkTextInput.text); linkTextInput.text = defaultLinkProtocol; linkTextCommitted = true;"/>
+
+ </mx:ToolBar>
+
+ </mx:ControlBar>
+
+</mx:Panel>
RE: [royale-asjs] branch feature/MXRoyale updated: RichTextEditor.mxml Added
Posted by Alina Kazi <al...@d-bz.com>.
Sure I will be more careful next time.
Thanks,
Alina
-----Original Message-----
From: Alex Harui [mailto:aharui@adobe.com.INVALID]
Sent: Monday, August 06, 2018 10:03 PM
To: dev@royale.apache.org; commits@royale.apache.org
Subject: Re: [royale-asjs] branch feature/MXRoyale updated: RichTextEditor.mxml Added
Hi Alina,
This did not compile for me. Please make sure your changes build before committing.
Thanks,
-Alex
On 8/6/18, 2:56 AM, "alinakazi@apache.org" <al...@apache.org> wrote:
This is an automated email from the ASF dual-hosted git repository.
alinakazi pushed a commit to branch feature/MXRoyale
in repository https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgitbox.apache.org%2Frepos%2Fasf%2Froyale-asjs.git&data=02%7C01%7Caharui%40adobe.com%7Ccdac898b4cbb4d71b05a08d5fb82eff4%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636691462175795993&sdata=jLzQztKIVyrbO4XOHfIBUYaxvcfo4SQh0qTshi9hFpQ%3D&reserved=0
The following commit(s) were added to refs/heads/feature/MXRoyale by this push:
new ebaf942 RichTextEditor.mxml Added
ebaf942 is described below
commit ebaf94268e59ee796fd39bf1d5dbc240788737c8
Author: alinakazi <AL...@GMAIL.COM>
AuthorDate: Mon Aug 6 14:56:50 2018 +0500
RichTextEditor.mxml Added
---
.../main/royale/mx/controls/RichTextEditor.mxml | 1078 ++++++++++++++++++++
1 file changed, 1078 insertions(+)
diff --git a/frameworks/projects/MXRoyale/src/main/royale/mx/controls/RichTextEditor.mxml b/frameworks/projects/MXRoyale/src/main/royale/mx/controls/RichTextEditor.mxml
new file mode 100644
index 0000000..15b9a2c
--- /dev/null
+++ b/frameworks/projects/MXRoyale/src/main/royale/mx/controls/RichTextEditor.mxml
@@ -0,0 +1,1078 @@
+<?xml version="1.0"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fwww.apache.org%2Flicenses%2FLICENSE-2.0&data=02%7C01%7Caharui%40adobe.com%7Ccdac898b4cbb4d71b05a08d5fb82eff4%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636691462175805993&sdata=tmOdFSrGRtkQIKbVL%2BklwaY2AjiPAbuf5YRbznJs%2BG8%3D&reserved=0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+
+
+<!---
+ The RichTextEditor control lets users enter and format text. The text characteristics that users can vary
+ include the font family, color, size, and style, and other properties such as text alignment, bullets and
+ URL links. The control consists of a Panel control with two direct children:
+ <ul>
+ <li>A Text Area control where users can enter text.</li>
+ <li>A Container with format controls that let a
+ user specify the text characteristics. The format controls affect text being typed or selected text.</li>
+ </ul>
+
+ <p>The RichTextEditor has a default height and width of 300 by 325 pixels
+ and a default minimum height and width of 200 by 220 pixels.
+ If you put a RichTextEditor control in a DividedBox control, make sure that
+ the DividedBox control is large enough to contain the RichTextEditor control
+ at its minimum dimensions.
+ Also, you can explicitly set the RichTextEditor control's minHeight or
+ minWidth property to <code>NaN</code> to let the DividedBox container
+ reduce the control's dimensions to 0.</p>
+
+ <p>The following table describes the subcontrols that you can access and modify:</p>
+ <table class="innertable" >
+ <tr>
+ <th>Control Type </th>
+ <th>ID</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><a href="../controls/TextArea.html">TextArea</a></td>
+ <td>textArea</td>
+ <td>Area where the user can enter text.</td>
+ </tr>
+ <tr>
+ <td><a href="../core/Container.html">Container</a></td>
+ <td>toolbar</td>
+ <td>The container for the formatting controls; puts the controls in a single
+ horizontal row, if they fit, or multiple rows, otherwise.</td>
+ </tr>
+ <tr>
+ <td><a href="../controls/ComboBox.html">ComboBox</a></td>
+ <td>fontFamilyCombo</td>
+ <td>Specifies the text font family. The ComboBox dataProvider is an Array of Strings with the following values:
+ <ul>
+ <li>_sans</li>
+ <li>_serif</li>
+ <li>_typewriter</li>
+ <li>Arial</li>
+ <li>Courier</li>
+ <li>Courier New</li>
+ <li>Geneva</li>
+ <li>Georgia</li>
+ <li>Helvetica</li>
+ <li>Times New Roman</li>
+ <li>Times</li>
+ <li>Verdana (default)</li>
+ </ul></td>
+ </tr>
+ <tr>
+ <td><a href="../controls/ComboBox.html">ComboBox</a></td>
+ <td>fontSizeCombo</td>
+ <td>Specifies the font size. The ComboBox dataProvider is an Array of Strings with the following values:
+ 8, 9, 10 (default), 11, 12, 14, 16, 18, 20, 24, 26, 28, 36, 48, 72.
+ <p><strong>Note:</strong>This specification is the actual pixel value for the font size. These sizes are not equivalent to the
+ relative font sizes specified in HTML using the <code>size</code> attribute of the <font> tag.</p></td>
+ </tr>
+ <tr>
+ <td><a href="../containers/HBox.html">HBox</a></td>
+ <td>toolBar2</td>
+ <td>Contains the font characteristic buttons.</td>
+ </tr>
+ <tr>
+ <td><a href="../controls/Button.html">Button</a></td>
+ <td>boldButton</td>
+ <td>When toggled to selected="true", sets the font to bold. </td>
+ </tr>
+ <tr>
+ <td><a href="../controls/Button.html">Button</a></td>
+ <td>italicButton</td>
+ <td>When toggled to selected="true", sets the font to italic. </td>
+ </tr>
+ <tr>
+ <td><a href="../controls/Button.html">Button</a></td>
+ <td>underlineButton</td>
+ <td>When toggled to selected="true", sets the font to underlined.</td>
+ </tr>
+ <tr>
+ <td><a href="../controls/ColorPicker.html">ColorPicker</a></td>
+ <td>colorPicker</td>
+ <td>Specifies the color of the text. </td>
+ </tr>
+ <tr>
+ <td><a href="../controls/ToggleButtonBar.html">ToggleButtonBar</a></td>
+ <td>alignButtons</td>
+ <td>Specifies the text alignment. The control's data provider consists of an Array Of objects, with the object <code>action</code> field specifying the justification type. The available actions are as follows:
+ <ul>
+ <li>left (default) </li>
+ <li>center</li>
+ <li>right</li>
+ <li>justify</li>
+ </ul></td>
+ </tr>
+ <tr>
+ <td><a href="../controls/Button.html">Button</a></td>
+ <td>bulletButton</td>
+ <td>When toggled to selected="true", sets the current line, or the selected line, to a list item, preceded by a bullet.</td>
+ </tr>
+ <tr>
+ <td><a href="../controls/TextInput.html">TextInput</a></td>
+ <td>linkTextInput</td>
+ <td>This field is enabled only when text is selected.
+ When the user enters a URL in this field and presses the Enter key, Flex inserts
+ the equivalent of an HTML <code><a href="<em>user_text</em>"
+ target="blank"></a></code> tag in the TextArea subcontrol
+ at around the currently selected text.
+
+ <p>Flex initially fills this control with the text specified by the
+ <code>defaultLinkProtocol</code> property; users can append the rest of the link
+ to this text, or replace it.</p>
+ </td>
+ </tr>
+ </table>
+
+ <p>To access one of the subcontrols, you can use syntax similar to the following:
+ <pre>
+ myRTE.toolBar2.setStyle("backgroundColor", 0xCC6633);
+ </pre>
+ </p>
+
+ <p>The RichTextEditor control has the following default sizing
+ characteristics:</p>
+ <table class="innertable">
+ <tr>
+ <th>Characteristic</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td>Default size</td>
+ <td>325 pixels wide by 300 pixels high</td>
+ </tr>
+ <tr>
+ <td>Minimum size</td>
+ <td>220 pixels wide by 200 pixels high</td>
+ </tr>
+ <tr>
+ <td>Maximum size</td>
+ <td>10000 by 10000 pixels</td>
+ </tr>
+ </table>
+
+ @mxml
+
+ <p>The <mx:RichTextEditor> tag inherits all the members
+ of its parent and adds the following members:</p>
+ <pre>
+ <RichTextEditor
+ <strong>Properties</strong>
+ defaultLinkProtocol="http://"
+ htmlText=""
+ showControlBar="true | false"
+ showToolTips="false | true"
+ text=""
+
+ <strong>Events</strong>
+ change
+ />
+
+ </pre>
+
+ @see mx.containers.ControlBar
+ @see mx.containers.Panel
+ @see mx.controls.ToggleButtonBar
+ @see mx.controls.Button
+ @see mx.controls.ColorPicker
+ @see mx.controls.ComboBox
+ @see mx.controls.TextArea
+ @see mx.controls.TextInput
+
+ @includeExample examples/RichTextEditorExample.mxml
+
+ @langversion 3.0
+ @playerversion Flash 9
+ @playerversion AIR 1.1
+ @productversion Flex 3
+
+ -->
+ <mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*" minWidth="220" minHeight="200" width="325" height="300">
+
+ <mx:Metadata>
+ <![CDATA[
+ /**
+ * Dispatched when the user changes the contents or format of the text in the
+ * TextArea control.
+ * This event is not dispatched if you change the TextArea contents by
+ * resetting the <code>text</code> or <code>htmlText</code> property.
+ *
+ * @eventType flash.events.Event.CHANGE
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion Flex 3
+ */
+ [Event(name="change", type="flash.events.Event")]
+
+ [DefaultTriggerEvent("change")]
+
+ /**
+ * Name of the CSS Style declaration to use for the styles for the TextArea.
+ * By default, the TextArea uses the the RichTextEditor's inheritable styles.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion Flex 3
+ */
+ [Style(name="textAreaStyleName", type="String", inherit="no")]
+
+ [IconFile("RichTextEditor.png")]
+
+ [Exclude(name="alignButtons", kind="property")]
+ [Exclude(name="boldButton", kind="property")]
+ [Exclude(name="bulletButton", kind="property")]
+ [Exclude(name="colorPicker", kind="property")]
+ [Exclude(name="defaultButton", kind="property")]
+ [Exclude(name="fontFamilyArray", kind="property")]
+ [Exclude(name="fontFamilyCombo", kind="property")]
+ [Exclude(name="fontSizeArray", kind="property")]
+ [Exclude(name="fontSizeCombo", kind="property")]
+ [Exclude(name="icon", kind="property")]
+ [Exclude(name="italicButton", kind="property")]
+ [Exclude(name="label", kind="property")]
+ [Exclude(name="layout", kind="property")]
+ [Exclude(name="linkTextInput", kind="property")]
+ [Exclude(name="toolBar", kind="property")]
+ [Exclude(name="toolBar2", kind="property")]
+ [Exclude(name="underlineButton", kind="property")]
+ ]]>
+ </mx:Metadata>
+
+ <mx:Array id="fontFamilyArray">
+ <mx:String>_sans</mx:String>
+ <mx:String>_serif</mx:String>
+ <mx:String>_typewriter</mx:String>
+ <mx:String>Arial</mx:String>
+ <mx:String>Courier</mx:String>
+ <mx:String>Courier New</mx:String>
+ <mx:String>Geneva</mx:String>
+ <mx:String>Georgia</mx:String>
+ <mx:String>Helvetica</mx:String>
+ <mx:String>Times New Roman</mx:String>
+ <mx:String>Times</mx:String>
+ <mx:String>Verdana</mx:String>
+ </mx:Array>
+
+ <mx:Array id="fontSizeArray">
+ <mx:String>8</mx:String>
+ <mx:String>9</mx:String>
+ <mx:String>10</mx:String>
+ <mx:String>11</mx:String>
+ <mx:String>12</mx:String>
+ <mx:String>14</mx:String>
+ <mx:String>16</mx:String>
+ <mx:String>18</mx:String>
+ <mx:String>20</mx:String>
+ <mx:String>22</mx:String>
+ <mx:String>24</mx:String>
+ <mx:String>26</mx:String>
+ <mx:String>28</mx:String>
+ <mx:String>36</mx:String>
+ <mx:String>48</mx:String>
+ <mx:String>72</mx:String>
+ </mx:Array>
+
+ <mx:Script>
+ <![CDATA[
+
+ import mx.controls.textClasses.TextRange;
+ import mx.core.mx_internal;
+ import mx.core.IUITextField;
+ import mx.core.UITextFormat;
+
+ use namespace mx_internal;
+
+ /**
+ * The ToolTip that appears when the user hovers over the font drop-down list. To view ToolTips,
+ * you must also set the <code>showToolTips</code> property of the RichTextEditor control to <code>true</code>.
+ *
+ * @default "Font Family"
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion Flex 3
+ */
+ public var fontFamilyToolTip:String = "Font Family";
+
+ /**
+ * The ToolTip that appears when the user hovers over the font size drop-down list. To view ToolTips,
+ * you must also set the <code>showToolTips</code> property of the RichTextEditor control to <code>true</code>.
+ *
+ * @default "Font Size"
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion Flex 3
+ */
+ public var fontSizeToolTip:String = "Font Size";
+
+ /**
+ * The ToolTip that appears when the user hovers over the text bold button. To view ToolTips,
+ * you must also set the <code>showToolTips</code> property of the RichTextEditor control to <code>true</code>.
+ *
+ * @default "Bold"
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion Flex 3
+ */
+ public var boldToolTip:String = "Bold";
+
+ /**
+ * The ToolTip that appears when the user hovers over the text italic button. To view ToolTips,
+ * you must also set the <code>showToolTips</code> property of the RichTextEditor control to <code>true</code>.
+ *
+ * @default "Italic"
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion Flex 3
+ */
+ public var italicToolTip:String = "Italic";
+
+ /**
+ * The ToolTip that appears when the user hovers over the text underline button. To view ToolTips,
+ * you must also set the <code>showToolTips</code> property of the RichTextEditor control to <code>true</code>.
+ *
+ * @default "Underline"
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion Flex 3
+ */
+ public var underlineToolTip:String = "Underline";
+
+ /**
+ * The ToolTip that appears when the user hovers over the ColorPicker control. To view ToolTips,
+ * you must also set the <code>showToolTips</code> property of the RichTextEditor control to <code>true</code>.
+ *
+ * @default "Color"
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion Flex 3
+ */
+ public var colorPickerToolTip:String = "Color";
+
+ /**
+ * The ToolTip that appears when the user hovers over the text alignment buttons. All the buttons
+ * share the same ToolTip. To view ToolTips, you must also set the <code>showToolTips</code>
+ * property of the RichTextEditor control to <code>true</code>.
+ *
+ * @default "Align"
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion Flex 3
+ */
+ public var alignToolTip:String = "Align";
+
+ /**
+ * The ToolTip that appears when the user hovers over the bulleted list button. To view ToolTips,
+ * you must also set the <code>showToolTips</code> property of the RichTextEditor control to <code>true</code>.
+ *
+ * @default "Bullet"
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion Flex 3
+ */
+ public var bulletToolTip:String = "Bullet";
+
+ /**
+ * The ToolTip that appears when the user hovers over the link text input field. To view ToolTips,
+ * you must also set the <code>showToolTips</code> property of the RichTextEditor control to <code>true</code>.
+ * @default "Link"
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion Flex 3
+ *
+ */
+ public var linkToolTip:String = "Link";
+
+ private var linkTextCommitted:Boolean = false;
+ private var showControlBarChanged:Boolean = false;
+ private var showToolTipsChanged:Boolean = false;
+ private var textChanged:Boolean = false;
+ private var htmlTextChanged:Boolean = false;
+ private var previousTextFormat:TextFormat = null;
+ private var textFormatChanged:Boolean = false;
+ // -1 is used to force updation of the ToolBar styles
+ private var lastCaretIndex:int = -1;
+ private var invalidateToolBarFlag:Boolean = false;
+ private var firstTime:Boolean = true;
+
+ /*
+ public function RichTextEditor()
+ {
+ super();
+ }
+ */
+
+ //--------------------------------------------------------------------------
+ //
+ // Properties
+ //
+ //--------------------------------------------------------------------------
+
+ //----------------------------------
+ // defaultLinkProtocol
+ //----------------------------------
+
+ private var _defaultLinkProtocol:String = "http://";
+
+ [Inspectable(defaultValue="http://")]
+
+ /**
+ * The default protocol string to use at the start of link text.
+ * This string appears in the LinkTextInput subcontrol, so users do
+ * not have to type the protocol identifier when entering link text.
+ *
+ * @default "http://"
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion Flex 3
+ */
+ public function get defaultLinkProtocol():String
+ {
+ return _defaultLinkProtocol;
+ }
+
+ /**
+ * @private
+ */
+ public function set defaultLinkProtocol(value:String):void
+ {
+ _defaultLinkProtocol = value;
+
+ if (linkTextInput)
+ linkTextInput.text = _defaultLinkProtocol;
+ }
+
+ //----------------------------------
+ // showControlBar
+ //----------------------------------
+
+ private var _showControlBar:Boolean = true;
+
+ [Inspectable(category="General", defaultValue="true")]
+
+ /**
+ * Specifies whether to display the control bar that contains the text
+ * formatting controls.
+ *
+ * @default true
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion Flex 3
+ */
+ public function get showControlBar():Boolean
+ {
+ return _showControlBar;
+ }
+
+ /**
+ * @private
+ */
+ public function set showControlBar(value:Boolean):void
+ {
+ _showControlBar = value;
+ showControlBarChanged = true;
+ invalidateProperties();
+ }
+
+ //----------------------------------
+ // showToolTips
+ //----------------------------------
+
+ private var _showToolTips:Boolean = false;
+
+ [Inspectable(defaultValue="false")]
+
+ /**
+ * Specifies whether to display tooltips for the text formatting controls.
+ *
+ * @default false
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion Flex 3
+ */
+ public function get showToolTips():Boolean
+ {
+ return _showToolTips;
+ }
+
+ /**
+ * @private
+ */
+ public function set showToolTips(value:Boolean):void
+ {
+ _showToolTips = value;
+ showToolTipsChanged = true;
+ invalidateProperties();
+ }
+
+ //----------------------------------
+ // selection
+ //----------------------------------
+
+ /**
+ * A TextRange object containing the selected text in the TextArea subcontrol.
+ *
+ * @see mx.controls.textClasses.TextRange
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion Flex 3
+ */
+ public function get selection():TextRange
+ {
+ return new TextRange(this, true);
+ }
+
+ //----------------------------------
+ // text
+ //----------------------------------
+
+ private var _text:String = "";
+
+ [Bindable("valueCommit")]
+ [CollapseWhiteSpace]
+ [NonCommittingChangeEvent("change")]
+ [Inspectable(category="General")]
+
+ /**
+ * Plain text without markup that displays in the RichTextEditor control's TextArea subcontrol.
+ * You cannot set this property and the <code>htmlText</code> property simultaneously.
+ * If you set one property, it replaces any value set using the other property.
+ * You can get both properties; the <code>text</code> property always returns a plain
+ * text String with no formatting information.
+ * For more information on using this property, see the TextArea documentation.
+ *
+ * @default ""
+ *
+ * @see mx.controls.TextArea
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion Flex 3
+ */
+ public function get text():String
+ {
+ return textArea ? textArea.text : _text;
+ }
+
+ /**
+ * @private
+ */
+ public function set text(value:String):void
+ {
+ _text = value;
+ textChanged = true;
+ invalidateProperties();
+ }
+
+ //----------------------------------
+ // htmlText
+ //----------------------------------
+
+ private var _htmlText:String = "";
+
+ [Bindable("valueCommit")]
+ [CollapseWhiteSpace]
+ [NonCommittingChangeEvent("change")]
+ [Inspectable(category="General")]
+
+ /**
+ * Text containing HTML markup that displays in the RichTextEditor
+ * control's TextArea subcontrol.
+ * You cannot set this property and the <code>text</code> property simultaneously.
+ * If you set one property, it replaces any value set using the other property.
+ * You can get both properties; the <code>htmlText</code> property always returns
+ * a String containing HTML markup that represents the current text formatting.
+ * For more information on using this property, see the TextArea documentation.
+ *
+ * @default ""
+ *
+ * @see mx.controls.TextArea
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion Flex 3
+ */
+ public function get htmlText():String
+ {
+ return textArea ? textArea.htmlText : _htmlText;
+ }
+
+ /**
+ * @private
+ */
+ public function set htmlText(value:String):void
+ {
+ _htmlText = value;
+ htmlTextChanged = true;
+ invalidateProperties();
+ }
+
+ //--------------------------------------------------------------------------
+ //
+ // Overridden methods
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * @private
+ */
+ override protected function commitProperties():void
+ {
+ super.commitProperties();
+
+ if (firstTime)
+ {
+ firstTime = false;
+ var textAreaStyleName:String = getStyle(
+ "textAreaStyleName");
+ if (textAreaStyleName)
+ textArea.styleName = textAreaStyleName;
+ textArea.getTextField().alwaysShowSelection = true;
+ }
+
+ if (showControlBarChanged)
+ {
+ if (_showControlBar)
+ {
+ controlBar.height = NaN;
+ controlBar.visible = true;
+ }
+ else
+ {
+ controlBar.height = 0;
+ controlBar.visible = false;
+ }
+ showControlBarChanged = false;
+ }
+
+ if (showToolTipsChanged)
+ {
+ if (_showToolTips)
+ {
+ fontFamilyCombo.toolTip = fontFamilyToolTip;
+ fontSizeCombo.toolTip = fontSizeToolTip;
+ boldButton.toolTip = boldToolTip;
+ italicButton.toolTip = italicToolTip;
+ underlineButton.toolTip = underlineToolTip;
+ colorPicker.toolTip = colorPickerToolTip;
+ alignButtons.toolTip = alignToolTip;
+ bulletButton.toolTip = bulletToolTip;
+ linkTextInput.toolTip = linkToolTip;
+ }
+ else
+ {
+ fontFamilyCombo.toolTip = "";
+ fontSizeCombo.toolTip = "";
+ boldButton.toolTip = "";
+ italicButton.toolTip = "";
+ underlineButton.toolTip = "";
+ colorPicker.toolTip = "";
+ alignButtons.toolTip = "";
+ bulletButton.toolTip = "";
+ linkTextInput.toolTip = "";
+ }
+ showToolTipsChanged = false;
+ }
+
+ if (textChanged || htmlTextChanged)
+ {
+ // Revert previously set TextFormat.
+ var tf:UITextFormat = IUITextField(textArea.getTextField()).getUITextFormat();
+ // bullet style is not exposed in flex
+ // hence has to be explicitly defaulted.
+ tf.bullet = false;
+ textArea.getTextField().defaultTextFormat = tf;
+ if (textChanged)
+ {
+ textArea.text = _text;
+ textChanged = false;
+ }
+ else
+ {
+ textArea.htmlText = _htmlText;
+ htmlTextChanged = false;
+ }
+ }
+ }
+
+ /**
+ * @private
+ */
+ override protected function measure():void
+ {
+ // Called only when explicitWidth and
+ // explicitHeight are set to NaN, since
+ // we have set width and height explicitly
+ // for RTE's panel.
+ super.measure();
+ measuredMinWidth = 220;
+ measuredWidth = 320;
+ measuredMinHeight = 200;
+ measuredHeight = 300;
+ }
+
+ /**
+ * @private
+ */
+ override public function styleChanged(styleProp:String):void
+ {
+ super.styleChanged(styleProp);
+
+ if (styleProp == null || styleProp == "textAreaStyleName")
+ {
+ if (textArea)
+ {
+ var textAreaStyleName:String = getStyle("textAreaStyleName");
+ textArea.styleName = textAreaStyleName;
+ }
+ }
+
+ if (!invalidateToolBarFlag)
+ {
+ invalidateToolBarFlag = true;
+ callLater(getTextStyles);
+ }
+ }
+
+ //--------------------------------------------------------------------------
+ //
+ // Methods
+ //
+ //--------------------------------------------------------------------------
+
+ private function setTextStyles(type:String, value:Object = null):void
+ {
+ var tf:TextFormat;
+
+ var beginIndex:int = textArea.getTextField().selectionBeginIndex;
+ var endIndex:int = textArea.getTextField().selectionEndIndex;
+
+ if (beginIndex == endIndex)
+ {
+ tf = previousTextFormat;
+ }
+ else
+ tf = new TextFormat();
+
+ if (type == "bold" || type == "italic" || type == "underline")
+ {
+ tf[type] = value;
+ }
+ else if (type == "align" || type == "bullet")
+ {
+ if (beginIndex == endIndex)
+ {
+ tf = new TextFormat();
+ }
+
+ // Apply the paragraph styles to the whole paragraph instead of just
+ // the selected text
+ beginIndex = textArea.getTextField().getFirstCharInParagraph(beginIndex) - 1;
+ beginIndex = Math.max(0, beginIndex);
+ endIndex = textArea.getTextField().getFirstCharInParagraph(endIndex) +
+ textArea.getTextField().getParagraphLength(endIndex) - 1;
+ tf[type] = value;
+ previousTextFormat[type] = value;
+ if (!endIndex)
+ textArea.getTextField().defaultTextFormat = tf;
+ }
+ else if (type == "font")
+ {
+ tf[type] = fontFamilyCombo.text;
+ }
+ else if (type == "size")
+ {
+ var fontSize:uint = uint(fontSizeCombo.text);
+ if (fontSize > 0)
+ tf[type] = fontSize;
+ }
+ else if (type == "color")
+ {
+ tf[type] = uint(colorPicker.selectedColor);
+ }
+ else if (type == "url")
+ {
+ if (value != defaultLinkProtocol && value != "")
+ {
+ tf[type] = value;
+ tf["target"] = "_blank";
+ }
+ else if (tf[type] != "")
+ {
+ tf[type] = "";
+ tf["target"] = "";
+ }
+ }
+
+ textFormatChanged = true;
+
+ if (beginIndex == endIndex)
+ {
+ previousTextFormat = tf;
+ }
+ else
+ {
+ textArea.getTextField().setTextFormat(tf,beginIndex,endIndex);
+ }
+
+ dispatchEvent(new Event("change"));
+
+ var caretIndex:int = textArea.getTextField().caretIndex;
+ var lineIndex:int = textArea.getTextField().getLineIndexOfChar(caretIndex);
+
+ textArea.invalidateDisplayList();
+ textArea.validateDisplayList();
+
+ // Scroll to make the line containing the caret under viewable area
+ while (lineIndex >= textArea.getTextField().bottomScrollV)
+ {
+ textArea.verticalScrollPosition++;
+ }
+
+ callLater(textArea.setFocus);
+ }
+
+ private function getTextStyles():void
+ {
+ if (!textArea)
+ return;
+
+ var tf:TextFormat;
+
+ var beginIndex:int = textArea.getTextField().selectionBeginIndex;
+ var endIndex:int = textArea.getTextField().selectionEndIndex;
+
+ if (beginIndex == endIndex)
+ linkTextInput.enabled = false;
+ else
+ linkTextInput.enabled = true;
+
+ if (textFormatChanged)
+ previousTextFormat = null;
+
+ if (beginIndex == endIndex)
+ {
+ tf = textArea.getTextField().defaultTextFormat;
+ if (tf.url != "")
+ {
+ var carIndex:int = textArea.getTextField().caretIndex;
+ if (carIndex < textArea.getTextField().length)
+ {
+ var tfNext:TextFormat=textArea.getTextField().getTextFormat(carIndex, carIndex + 1);
+ if (!tfNext.url || tfNext.url == "")
+ tf.url = tf.target = "";
+ }
+ else
+ tf.url = tf.target = "";
+ }
+ }
+ else
+ tf = textArea.getTextField().getTextFormat(beginIndex,endIndex);
+
+ if (!previousTextFormat || previousTextFormat.font != tf.font)
+ setComboSelection(fontFamilyCombo, tf.font ? tf.font : "");
+ if (!previousTextFormat || previousTextFormat.size != tf.size)
+ setComboSelection(fontSizeCombo, tf.size ? String(tf.size) : "");
+ if (!previousTextFormat || previousTextFormat.color != tf.color)
+ colorPicker.selectedColor = Number(tf.color);
+
+ if (!previousTextFormat || previousTextFormat.bold != tf.bold)
+ boldButton.selected = tf.bold;
+ if (!previousTextFormat || previousTextFormat.italic != tf.italic)
+ italicButton.selected = tf.italic;
+ if (!previousTextFormat || previousTextFormat.underline != tf.underline)
+ underlineButton.selected = tf.underline;
+
+ if (!previousTextFormat || previousTextFormat.align != tf.align)
+ {
+ if (tf.align == "left")
+ alignButtons.selectedIndex = 0;
+ else if (tf.align == "center")
+ alignButtons.selectedIndex = 1;
+ else if (tf.align == "right")
+ alignButtons.selectedIndex = 2;
+ else if (tf.align == "justify")
+ alignButtons.selectedIndex = 3;
+ }
+ if (!previousTextFormat || previousTextFormat.bullet != tf.bullet)
+ bulletButton.selected = tf.bullet;
+ if (!previousTextFormat || previousTextFormat.url != tf.url)
+ linkTextInput.text = (tf.url == "" || tf.url == null) ? defaultLinkProtocol : tf.url;
+
+ if (textArea.getTextField().defaultTextFormat != tf)
+ textArea.getTextField().defaultTextFormat = tf;
+ previousTextFormat = tf;
+ textFormatChanged = false;
+
+ lastCaretIndex = textArea.getTextField().caretIndex;
+ invalidateToolBarFlag = false;
+ }
+
+ private function setComboSelection(combo:ComboBox,val:String):void
+ {
+ var length:uint = combo.dataProvider.length;
+
+ for (var i:uint = 0; i < length; i++)
+ {
+ if (combo.dataProvider.getItemAt(i).toLowerCase() == val.toLowerCase())
+ {
+ combo.selectedIndex = i;
+ return;
+ }
+ }
+ combo.selectedIndex = -1;
+ combo.validateNow();
+ combo.text = val;
+ }
+
+ /**
+ * @private
+ * This method is called when the user clicks on the textArea, drags
+ * out of it and releases the mouse button outside the TextArea.
+ */
+ private function systemManager_mouseUpHandler(event:MouseEvent):void
+ {
+ if (lastCaretIndex != textArea.getTextField().caretIndex)
+ getTextStyles();
+ else
+ {
+ if (textArea.getTextField().selectionBeginIndex == textArea.getTextField().selectionEndIndex)
+ linkTextInput.enabled = false;
+ else
+ linkTextInput.enabled = true;
+ }
+ systemManager.removeEventListener(
+ MouseEvent.MOUSE_UP, systemManager_mouseUpHandler, true);
+ }
+
+ ]]>
+ </mx:Script>
+
+ <!--- @private -->
+ <mx:TextArea id="textArea" height="100%" width="100%" minHeight="0" minWidth="0"
+ change="dispatchEvent(event);"
+ valueCommit="dispatchEvent(event);"
+ keyUp="getTextStyles()"
+ keyDown="if (textFormatChanged)
+ {
+ textArea.getTextField().defaultTextFormat=previousTextFormat;
+ textFormatChanged = false;
+ }"
+ mouseDown="systemManager.addEventListener(
+ MouseEvent.MOUSE_UP, systemManager_mouseUpHandler, true);"
+ />
+
+ <mx:ControlBar>
+
+ <!--- @private -->
+ <mx:ToolBar id="toolbar" width="100%" horizontalGap="7">
+
+ <mx:ComboBox id="fontFamilyCombo" editable="true"
+ creationComplete="getTextStyles();lastCaretIndex = -1;"
+ dataProvider = "{fontFamilyArray}"
+ close="setTextStyles('font');"
+ enter="setTextStyles('font');"/>
+
+ <mx:ComboBox id="fontSizeCombo" editable="true"
+ paddingLeft="2" paddingRight="2"
+ dataProvider = "{fontSizeArray}"
+ close="setTextStyles('size');"
+ enter="setTextStyles('size');"/>
+
+ <mx:HBox id="toolBar2" horizontalGap="0">
+
+ <mx:Button id="boldButton" width="20" toggle="true"
+ icon="@Embed('assets/icon_style_bold.png')"
+ click="setTextStyles('bold', event.currentTarget.selected);" />
+
+ <mx:Button id="italicButton" width="20" toggle="true"
+ icon="@Embed('assets/icon_style_italic.png')"
+ click="setTextStyles('italic', event.currentTarget.selected);" />
+
+ <mx:Button id="underlineButton" width="20" toggle="true"
+ icon="@Embed('assets/icon_style_underline.png')"
+ click="setTextStyles('underline', event.currentTarget.selected);" />
+
+ </mx:HBox>
+
+ <mx:ColorPicker id="colorPicker" width="22" height="22"
+ close="setTextStyles('color');"/>
+
+ <mx:VRule height="{alignButtons.height}"/>
+
+ <mx:ToggleButtonBar id="alignButtons" buttonWidth="20"
+ itemClick="setTextStyles('align', ToggleButtonBar(event.currentTarget).dataProvider.getItemAt(ToggleButtonBar(event.currentTarget).selectedIndex).action); " >
+ <mx:dataProvider>
+ <mx:Array>
+ <mx:Object icon="@Embed('assets/icon_align_left.png')" action="left"/>
+ <mx:Object icon="@Embed('assets/icon_align_center.png')" action="center"/>
+ <mx:Object icon="@Embed('assets/icon_align_right.png')" action="right"/>
+ <mx:Object icon="@Embed('assets/icon_align_justify.png')" action="justify"/>
+ </mx:Array>
+ </mx:dataProvider>
+ </mx:ToggleButtonBar>
+
+ <mx:Button id="bulletButton" width="20" toggle="true"
+ icon="@Embed('assets/icon_bullet.png')"
+ click="setTextStyles('bullet', event.currentTarget.selected);" />
+
+ <mx:VRule height="{linkTextInput.height}"/>
+
+ <mx:TextInput id="linkTextInput" width="140"
+ focusOut="if (linkTextCommitted)
+ { trace('already committed'); linkTextCommitted = false; }
+ else
+ { trace('not committed'); setTextStyles('url', linkTextInput.text); linkTextInput.text=defaultLinkProtocol;}"
+ enter="setTextStyles('url', linkTextInput.text); linkTextInput.text = defaultLinkProtocol; linkTextCommitted = true;"/>
+
+ </mx:ToolBar>
+
+ </mx:ControlBar>
+
+</mx:Panel>
Re: [royale-asjs] branch feature/MXRoyale updated:
RichTextEditor.mxml Added
Posted by Alex Harui <ah...@adobe.com.INVALID>.
Hi Alina,
This did not compile for me. Please make sure your changes build before committing.
Thanks,
-Alex
On 8/6/18, 2:56 AM, "alinakazi@apache.org" <al...@apache.org> wrote:
This is an automated email from the ASF dual-hosted git repository.
alinakazi pushed a commit to branch feature/MXRoyale
in repository https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgitbox.apache.org%2Frepos%2Fasf%2Froyale-asjs.git&data=02%7C01%7Caharui%40adobe.com%7Ccdac898b4cbb4d71b05a08d5fb82eff4%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636691462175795993&sdata=jLzQztKIVyrbO4XOHfIBUYaxvcfo4SQh0qTshi9hFpQ%3D&reserved=0
The following commit(s) were added to refs/heads/feature/MXRoyale by this push:
new ebaf942 RichTextEditor.mxml Added
ebaf942 is described below
commit ebaf94268e59ee796fd39bf1d5dbc240788737c8
Author: alinakazi <AL...@GMAIL.COM>
AuthorDate: Mon Aug 6 14:56:50 2018 +0500
RichTextEditor.mxml Added
---
.../main/royale/mx/controls/RichTextEditor.mxml | 1078 ++++++++++++++++++++
1 file changed, 1078 insertions(+)
diff --git a/frameworks/projects/MXRoyale/src/main/royale/mx/controls/RichTextEditor.mxml b/frameworks/projects/MXRoyale/src/main/royale/mx/controls/RichTextEditor.mxml
new file mode 100644
index 0000000..15b9a2c
--- /dev/null
+++ b/frameworks/projects/MXRoyale/src/main/royale/mx/controls/RichTextEditor.mxml
@@ -0,0 +1,1078 @@
+<?xml version="1.0"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fwww.apache.org%2Flicenses%2FLICENSE-2.0&data=02%7C01%7Caharui%40adobe.com%7Ccdac898b4cbb4d71b05a08d5fb82eff4%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636691462175805993&sdata=tmOdFSrGRtkQIKbVL%2BklwaY2AjiPAbuf5YRbznJs%2BG8%3D&reserved=0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+
+
+<!---
+ The RichTextEditor control lets users enter and format text. The text characteristics that users can vary
+ include the font family, color, size, and style, and other properties such as text alignment, bullets and
+ URL links. The control consists of a Panel control with two direct children:
+ <ul>
+ <li>A Text Area control where users can enter text.</li>
+ <li>A Container with format controls that let a
+ user specify the text characteristics. The format controls affect text being typed or selected text.</li>
+ </ul>
+
+ <p>The RichTextEditor has a default height and width of 300 by 325 pixels
+ and a default minimum height and width of 200 by 220 pixels.
+ If you put a RichTextEditor control in a DividedBox control, make sure that
+ the DividedBox control is large enough to contain the RichTextEditor control
+ at its minimum dimensions.
+ Also, you can explicitly set the RichTextEditor control's minHeight or
+ minWidth property to <code>NaN</code> to let the DividedBox container
+ reduce the control's dimensions to 0.</p>
+
+ <p>The following table describes the subcontrols that you can access and modify:</p>
+ <table class="innertable" >
+ <tr>
+ <th>Control Type </th>
+ <th>ID</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><a href="../controls/TextArea.html">TextArea</a></td>
+ <td>textArea</td>
+ <td>Area where the user can enter text.</td>
+ </tr>
+ <tr>
+ <td><a href="../core/Container.html">Container</a></td>
+ <td>toolbar</td>
+ <td>The container for the formatting controls; puts the controls in a single
+ horizontal row, if they fit, or multiple rows, otherwise.</td>
+ </tr>
+ <tr>
+ <td><a href="../controls/ComboBox.html">ComboBox</a></td>
+ <td>fontFamilyCombo</td>
+ <td>Specifies the text font family. The ComboBox dataProvider is an Array of Strings with the following values:
+ <ul>
+ <li>_sans</li>
+ <li>_serif</li>
+ <li>_typewriter</li>
+ <li>Arial</li>
+ <li>Courier</li>
+ <li>Courier New</li>
+ <li>Geneva</li>
+ <li>Georgia</li>
+ <li>Helvetica</li>
+ <li>Times New Roman</li>
+ <li>Times</li>
+ <li>Verdana (default)</li>
+ </ul></td>
+ </tr>
+ <tr>
+ <td><a href="../controls/ComboBox.html">ComboBox</a></td>
+ <td>fontSizeCombo</td>
+ <td>Specifies the font size. The ComboBox dataProvider is an Array of Strings with the following values:
+ 8, 9, 10 (default), 11, 12, 14, 16, 18, 20, 24, 26, 28, 36, 48, 72.
+ <p><strong>Note:</strong>This specification is the actual pixel value for the font size. These sizes are not equivalent to the
+ relative font sizes specified in HTML using the <code>size</code> attribute of the <font> tag.</p></td>
+ </tr>
+ <tr>
+ <td><a href="../containers/HBox.html">HBox</a></td>
+ <td>toolBar2</td>
+ <td>Contains the font characteristic buttons.</td>
+ </tr>
+ <tr>
+ <td><a href="../controls/Button.html">Button</a></td>
+ <td>boldButton</td>
+ <td>When toggled to selected="true", sets the font to bold. </td>
+ </tr>
+ <tr>
+ <td><a href="../controls/Button.html">Button</a></td>
+ <td>italicButton</td>
+ <td>When toggled to selected="true", sets the font to italic. </td>
+ </tr>
+ <tr>
+ <td><a href="../controls/Button.html">Button</a></td>
+ <td>underlineButton</td>
+ <td>When toggled to selected="true", sets the font to underlined.</td>
+ </tr>
+ <tr>
+ <td><a href="../controls/ColorPicker.html">ColorPicker</a></td>
+ <td>colorPicker</td>
+ <td>Specifies the color of the text. </td>
+ </tr>
+ <tr>
+ <td><a href="../controls/ToggleButtonBar.html">ToggleButtonBar</a></td>
+ <td>alignButtons</td>
+ <td>Specifies the text alignment. The control's data provider consists of an Array Of objects, with the object <code>action</code> field specifying the justification type. The available actions are as follows:
+ <ul>
+ <li>left (default) </li>
+ <li>center</li>
+ <li>right</li>
+ <li>justify</li>
+ </ul></td>
+ </tr>
+ <tr>
+ <td><a href="../controls/Button.html">Button</a></td>
+ <td>bulletButton</td>
+ <td>When toggled to selected="true", sets the current line, or the selected line, to a list item, preceded by a bullet.</td>
+ </tr>
+ <tr>
+ <td><a href="../controls/TextInput.html">TextInput</a></td>
+ <td>linkTextInput</td>
+ <td>This field is enabled only when text is selected.
+ When the user enters a URL in this field and presses the Enter key, Flex inserts
+ the equivalent of an HTML <code><a href="<em>user_text</em>"
+ target="blank"></a></code> tag in the TextArea subcontrol
+ at around the currently selected text.
+
+ <p>Flex initially fills this control with the text specified by the
+ <code>defaultLinkProtocol</code> property; users can append the rest of the link
+ to this text, or replace it.</p>
+ </td>
+ </tr>
+ </table>
+
+ <p>To access one of the subcontrols, you can use syntax similar to the following:
+ <pre>
+ myRTE.toolBar2.setStyle("backgroundColor", 0xCC6633);
+ </pre>
+ </p>
+
+ <p>The RichTextEditor control has the following default sizing
+ characteristics:</p>
+ <table class="innertable">
+ <tr>
+ <th>Characteristic</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td>Default size</td>
+ <td>325 pixels wide by 300 pixels high</td>
+ </tr>
+ <tr>
+ <td>Minimum size</td>
+ <td>220 pixels wide by 200 pixels high</td>
+ </tr>
+ <tr>
+ <td>Maximum size</td>
+ <td>10000 by 10000 pixels</td>
+ </tr>
+ </table>
+
+ @mxml
+
+ <p>The <mx:RichTextEditor> tag inherits all the members
+ of its parent and adds the following members:</p>
+ <pre>
+ <RichTextEditor
+ <strong>Properties</strong>
+ defaultLinkProtocol="http://"
+ htmlText=""
+ showControlBar="true | false"
+ showToolTips="false | true"
+ text=""
+
+ <strong>Events</strong>
+ change
+ />
+
+ </pre>
+
+ @see mx.containers.ControlBar
+ @see mx.containers.Panel
+ @see mx.controls.ToggleButtonBar
+ @see mx.controls.Button
+ @see mx.controls.ColorPicker
+ @see mx.controls.ComboBox
+ @see mx.controls.TextArea
+ @see mx.controls.TextInput
+
+ @includeExample examples/RichTextEditorExample.mxml
+
+ @langversion 3.0
+ @playerversion Flash 9
+ @playerversion AIR 1.1
+ @productversion Flex 3
+
+ -->
+ <mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*" minWidth="220" minHeight="200" width="325" height="300">
+
+ <mx:Metadata>
+ <![CDATA[
+ /**
+ * Dispatched when the user changes the contents or format of the text in the
+ * TextArea control.
+ * This event is not dispatched if you change the TextArea contents by
+ * resetting the <code>text</code> or <code>htmlText</code> property.
+ *
+ * @eventType flash.events.Event.CHANGE
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion Flex 3
+ */
+ [Event(name="change", type="flash.events.Event")]
+
+ [DefaultTriggerEvent("change")]
+
+ /**
+ * Name of the CSS Style declaration to use for the styles for the TextArea.
+ * By default, the TextArea uses the the RichTextEditor's inheritable styles.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion Flex 3
+ */
+ [Style(name="textAreaStyleName", type="String", inherit="no")]
+
+ [IconFile("RichTextEditor.png")]
+
+ [Exclude(name="alignButtons", kind="property")]
+ [Exclude(name="boldButton", kind="property")]
+ [Exclude(name="bulletButton", kind="property")]
+ [Exclude(name="colorPicker", kind="property")]
+ [Exclude(name="defaultButton", kind="property")]
+ [Exclude(name="fontFamilyArray", kind="property")]
+ [Exclude(name="fontFamilyCombo", kind="property")]
+ [Exclude(name="fontSizeArray", kind="property")]
+ [Exclude(name="fontSizeCombo", kind="property")]
+ [Exclude(name="icon", kind="property")]
+ [Exclude(name="italicButton", kind="property")]
+ [Exclude(name="label", kind="property")]
+ [Exclude(name="layout", kind="property")]
+ [Exclude(name="linkTextInput", kind="property")]
+ [Exclude(name="toolBar", kind="property")]
+ [Exclude(name="toolBar2", kind="property")]
+ [Exclude(name="underlineButton", kind="property")]
+ ]]>
+ </mx:Metadata>
+
+ <mx:Array id="fontFamilyArray">
+ <mx:String>_sans</mx:String>
+ <mx:String>_serif</mx:String>
+ <mx:String>_typewriter</mx:String>
+ <mx:String>Arial</mx:String>
+ <mx:String>Courier</mx:String>
+ <mx:String>Courier New</mx:String>
+ <mx:String>Geneva</mx:String>
+ <mx:String>Georgia</mx:String>
+ <mx:String>Helvetica</mx:String>
+ <mx:String>Times New Roman</mx:String>
+ <mx:String>Times</mx:String>
+ <mx:String>Verdana</mx:String>
+ </mx:Array>
+
+ <mx:Array id="fontSizeArray">
+ <mx:String>8</mx:String>
+ <mx:String>9</mx:String>
+ <mx:String>10</mx:String>
+ <mx:String>11</mx:String>
+ <mx:String>12</mx:String>
+ <mx:String>14</mx:String>
+ <mx:String>16</mx:String>
+ <mx:String>18</mx:String>
+ <mx:String>20</mx:String>
+ <mx:String>22</mx:String>
+ <mx:String>24</mx:String>
+ <mx:String>26</mx:String>
+ <mx:String>28</mx:String>
+ <mx:String>36</mx:String>
+ <mx:String>48</mx:String>
+ <mx:String>72</mx:String>
+ </mx:Array>
+
+ <mx:Script>
+ <![CDATA[
+
+ import mx.controls.textClasses.TextRange;
+ import mx.core.mx_internal;
+ import mx.core.IUITextField;
+ import mx.core.UITextFormat;
+
+ use namespace mx_internal;
+
+ /**
+ * The ToolTip that appears when the user hovers over the font drop-down list. To view ToolTips,
+ * you must also set the <code>showToolTips</code> property of the RichTextEditor control to <code>true</code>.
+ *
+ * @default "Font Family"
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion Flex 3
+ */
+ public var fontFamilyToolTip:String = "Font Family";
+
+ /**
+ * The ToolTip that appears when the user hovers over the font size drop-down list. To view ToolTips,
+ * you must also set the <code>showToolTips</code> property of the RichTextEditor control to <code>true</code>.
+ *
+ * @default "Font Size"
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion Flex 3
+ */
+ public var fontSizeToolTip:String = "Font Size";
+
+ /**
+ * The ToolTip that appears when the user hovers over the text bold button. To view ToolTips,
+ * you must also set the <code>showToolTips</code> property of the RichTextEditor control to <code>true</code>.
+ *
+ * @default "Bold"
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion Flex 3
+ */
+ public var boldToolTip:String = "Bold";
+
+ /**
+ * The ToolTip that appears when the user hovers over the text italic button. To view ToolTips,
+ * you must also set the <code>showToolTips</code> property of the RichTextEditor control to <code>true</code>.
+ *
+ * @default "Italic"
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion Flex 3
+ */
+ public var italicToolTip:String = "Italic";
+
+ /**
+ * The ToolTip that appears when the user hovers over the text underline button. To view ToolTips,
+ * you must also set the <code>showToolTips</code> property of the RichTextEditor control to <code>true</code>.
+ *
+ * @default "Underline"
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion Flex 3
+ */
+ public var underlineToolTip:String = "Underline";
+
+ /**
+ * The ToolTip that appears when the user hovers over the ColorPicker control. To view ToolTips,
+ * you must also set the <code>showToolTips</code> property of the RichTextEditor control to <code>true</code>.
+ *
+ * @default "Color"
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion Flex 3
+ */
+ public var colorPickerToolTip:String = "Color";
+
+ /**
+ * The ToolTip that appears when the user hovers over the text alignment buttons. All the buttons
+ * share the same ToolTip. To view ToolTips, you must also set the <code>showToolTips</code>
+ * property of the RichTextEditor control to <code>true</code>.
+ *
+ * @default "Align"
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion Flex 3
+ */
+ public var alignToolTip:String = "Align";
+
+ /**
+ * The ToolTip that appears when the user hovers over the bulleted list button. To view ToolTips,
+ * you must also set the <code>showToolTips</code> property of the RichTextEditor control to <code>true</code>.
+ *
+ * @default "Bullet"
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion Flex 3
+ */
+ public var bulletToolTip:String = "Bullet";
+
+ /**
+ * The ToolTip that appears when the user hovers over the link text input field. To view ToolTips,
+ * you must also set the <code>showToolTips</code> property of the RichTextEditor control to <code>true</code>.
+ * @default "Link"
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion Flex 3
+ *
+ */
+ public var linkToolTip:String = "Link";
+
+ private var linkTextCommitted:Boolean = false;
+ private var showControlBarChanged:Boolean = false;
+ private var showToolTipsChanged:Boolean = false;
+ private var textChanged:Boolean = false;
+ private var htmlTextChanged:Boolean = false;
+ private var previousTextFormat:TextFormat = null;
+ private var textFormatChanged:Boolean = false;
+ // -1 is used to force updation of the ToolBar styles
+ private var lastCaretIndex:int = -1;
+ private var invalidateToolBarFlag:Boolean = false;
+ private var firstTime:Boolean = true;
+
+ /*
+ public function RichTextEditor()
+ {
+ super();
+ }
+ */
+
+ //--------------------------------------------------------------------------
+ //
+ // Properties
+ //
+ //--------------------------------------------------------------------------
+
+ //----------------------------------
+ // defaultLinkProtocol
+ //----------------------------------
+
+ private var _defaultLinkProtocol:String = "http://";
+
+ [Inspectable(defaultValue="http://")]
+
+ /**
+ * The default protocol string to use at the start of link text.
+ * This string appears in the LinkTextInput subcontrol, so users do
+ * not have to type the protocol identifier when entering link text.
+ *
+ * @default "http://"
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion Flex 3
+ */
+ public function get defaultLinkProtocol():String
+ {
+ return _defaultLinkProtocol;
+ }
+
+ /**
+ * @private
+ */
+ public function set defaultLinkProtocol(value:String):void
+ {
+ _defaultLinkProtocol = value;
+
+ if (linkTextInput)
+ linkTextInput.text = _defaultLinkProtocol;
+ }
+
+ //----------------------------------
+ // showControlBar
+ //----------------------------------
+
+ private var _showControlBar:Boolean = true;
+
+ [Inspectable(category="General", defaultValue="true")]
+
+ /**
+ * Specifies whether to display the control bar that contains the text
+ * formatting controls.
+ *
+ * @default true
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion Flex 3
+ */
+ public function get showControlBar():Boolean
+ {
+ return _showControlBar;
+ }
+
+ /**
+ * @private
+ */
+ public function set showControlBar(value:Boolean):void
+ {
+ _showControlBar = value;
+ showControlBarChanged = true;
+ invalidateProperties();
+ }
+
+ //----------------------------------
+ // showToolTips
+ //----------------------------------
+
+ private var _showToolTips:Boolean = false;
+
+ [Inspectable(defaultValue="false")]
+
+ /**
+ * Specifies whether to display tooltips for the text formatting controls.
+ *
+ * @default false
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion Flex 3
+ */
+ public function get showToolTips():Boolean
+ {
+ return _showToolTips;
+ }
+
+ /**
+ * @private
+ */
+ public function set showToolTips(value:Boolean):void
+ {
+ _showToolTips = value;
+ showToolTipsChanged = true;
+ invalidateProperties();
+ }
+
+ //----------------------------------
+ // selection
+ //----------------------------------
+
+ /**
+ * A TextRange object containing the selected text in the TextArea subcontrol.
+ *
+ * @see mx.controls.textClasses.TextRange
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion Flex 3
+ */
+ public function get selection():TextRange
+ {
+ return new TextRange(this, true);
+ }
+
+ //----------------------------------
+ // text
+ //----------------------------------
+
+ private var _text:String = "";
+
+ [Bindable("valueCommit")]
+ [CollapseWhiteSpace]
+ [NonCommittingChangeEvent("change")]
+ [Inspectable(category="General")]
+
+ /**
+ * Plain text without markup that displays in the RichTextEditor control's TextArea subcontrol.
+ * You cannot set this property and the <code>htmlText</code> property simultaneously.
+ * If you set one property, it replaces any value set using the other property.
+ * You can get both properties; the <code>text</code> property always returns a plain
+ * text String with no formatting information.
+ * For more information on using this property, see the TextArea documentation.
+ *
+ * @default ""
+ *
+ * @see mx.controls.TextArea
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion Flex 3
+ */
+ public function get text():String
+ {
+ return textArea ? textArea.text : _text;
+ }
+
+ /**
+ * @private
+ */
+ public function set text(value:String):void
+ {
+ _text = value;
+ textChanged = true;
+ invalidateProperties();
+ }
+
+ //----------------------------------
+ // htmlText
+ //----------------------------------
+
+ private var _htmlText:String = "";
+
+ [Bindable("valueCommit")]
+ [CollapseWhiteSpace]
+ [NonCommittingChangeEvent("change")]
+ [Inspectable(category="General")]
+
+ /**
+ * Text containing HTML markup that displays in the RichTextEditor
+ * control's TextArea subcontrol.
+ * You cannot set this property and the <code>text</code> property simultaneously.
+ * If you set one property, it replaces any value set using the other property.
+ * You can get both properties; the <code>htmlText</code> property always returns
+ * a String containing HTML markup that represents the current text formatting.
+ * For more information on using this property, see the TextArea documentation.
+ *
+ * @default ""
+ *
+ * @see mx.controls.TextArea
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion Flex 3
+ */
+ public function get htmlText():String
+ {
+ return textArea ? textArea.htmlText : _htmlText;
+ }
+
+ /**
+ * @private
+ */
+ public function set htmlText(value:String):void
+ {
+ _htmlText = value;
+ htmlTextChanged = true;
+ invalidateProperties();
+ }
+
+ //--------------------------------------------------------------------------
+ //
+ // Overridden methods
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * @private
+ */
+ override protected function commitProperties():void
+ {
+ super.commitProperties();
+
+ if (firstTime)
+ {
+ firstTime = false;
+ var textAreaStyleName:String = getStyle(
+ "textAreaStyleName");
+ if (textAreaStyleName)
+ textArea.styleName = textAreaStyleName;
+ textArea.getTextField().alwaysShowSelection = true;
+ }
+
+ if (showControlBarChanged)
+ {
+ if (_showControlBar)
+ {
+ controlBar.height = NaN;
+ controlBar.visible = true;
+ }
+ else
+ {
+ controlBar.height = 0;
+ controlBar.visible = false;
+ }
+ showControlBarChanged = false;
+ }
+
+ if (showToolTipsChanged)
+ {
+ if (_showToolTips)
+ {
+ fontFamilyCombo.toolTip = fontFamilyToolTip;
+ fontSizeCombo.toolTip = fontSizeToolTip;
+ boldButton.toolTip = boldToolTip;
+ italicButton.toolTip = italicToolTip;
+ underlineButton.toolTip = underlineToolTip;
+ colorPicker.toolTip = colorPickerToolTip;
+ alignButtons.toolTip = alignToolTip;
+ bulletButton.toolTip = bulletToolTip;
+ linkTextInput.toolTip = linkToolTip;
+ }
+ else
+ {
+ fontFamilyCombo.toolTip = "";
+ fontSizeCombo.toolTip = "";
+ boldButton.toolTip = "";
+ italicButton.toolTip = "";
+ underlineButton.toolTip = "";
+ colorPicker.toolTip = "";
+ alignButtons.toolTip = "";
+ bulletButton.toolTip = "";
+ linkTextInput.toolTip = "";
+ }
+ showToolTipsChanged = false;
+ }
+
+ if (textChanged || htmlTextChanged)
+ {
+ // Revert previously set TextFormat.
+ var tf:UITextFormat = IUITextField(textArea.getTextField()).getUITextFormat();
+ // bullet style is not exposed in flex
+ // hence has to be explicitly defaulted.
+ tf.bullet = false;
+ textArea.getTextField().defaultTextFormat = tf;
+ if (textChanged)
+ {
+ textArea.text = _text;
+ textChanged = false;
+ }
+ else
+ {
+ textArea.htmlText = _htmlText;
+ htmlTextChanged = false;
+ }
+ }
+ }
+
+ /**
+ * @private
+ */
+ override protected function measure():void
+ {
+ // Called only when explicitWidth and
+ // explicitHeight are set to NaN, since
+ // we have set width and height explicitly
+ // for RTE's panel.
+ super.measure();
+ measuredMinWidth = 220;
+ measuredWidth = 320;
+ measuredMinHeight = 200;
+ measuredHeight = 300;
+ }
+
+ /**
+ * @private
+ */
+ override public function styleChanged(styleProp:String):void
+ {
+ super.styleChanged(styleProp);
+
+ if (styleProp == null || styleProp == "textAreaStyleName")
+ {
+ if (textArea)
+ {
+ var textAreaStyleName:String = getStyle("textAreaStyleName");
+ textArea.styleName = textAreaStyleName;
+ }
+ }
+
+ if (!invalidateToolBarFlag)
+ {
+ invalidateToolBarFlag = true;
+ callLater(getTextStyles);
+ }
+ }
+
+ //--------------------------------------------------------------------------
+ //
+ // Methods
+ //
+ //--------------------------------------------------------------------------
+
+ private function setTextStyles(type:String, value:Object = null):void
+ {
+ var tf:TextFormat;
+
+ var beginIndex:int = textArea.getTextField().selectionBeginIndex;
+ var endIndex:int = textArea.getTextField().selectionEndIndex;
+
+ if (beginIndex == endIndex)
+ {
+ tf = previousTextFormat;
+ }
+ else
+ tf = new TextFormat();
+
+ if (type == "bold" || type == "italic" || type == "underline")
+ {
+ tf[type] = value;
+ }
+ else if (type == "align" || type == "bullet")
+ {
+ if (beginIndex == endIndex)
+ {
+ tf = new TextFormat();
+ }
+
+ // Apply the paragraph styles to the whole paragraph instead of just
+ // the selected text
+ beginIndex = textArea.getTextField().getFirstCharInParagraph(beginIndex) - 1;
+ beginIndex = Math.max(0, beginIndex);
+ endIndex = textArea.getTextField().getFirstCharInParagraph(endIndex) +
+ textArea.getTextField().getParagraphLength(endIndex) - 1;
+ tf[type] = value;
+ previousTextFormat[type] = value;
+ if (!endIndex)
+ textArea.getTextField().defaultTextFormat = tf;
+ }
+ else if (type == "font")
+ {
+ tf[type] = fontFamilyCombo.text;
+ }
+ else if (type == "size")
+ {
+ var fontSize:uint = uint(fontSizeCombo.text);
+ if (fontSize > 0)
+ tf[type] = fontSize;
+ }
+ else if (type == "color")
+ {
+ tf[type] = uint(colorPicker.selectedColor);
+ }
+ else if (type == "url")
+ {
+ if (value != defaultLinkProtocol && value != "")
+ {
+ tf[type] = value;
+ tf["target"] = "_blank";
+ }
+ else if (tf[type] != "")
+ {
+ tf[type] = "";
+ tf["target"] = "";
+ }
+ }
+
+ textFormatChanged = true;
+
+ if (beginIndex == endIndex)
+ {
+ previousTextFormat = tf;
+ }
+ else
+ {
+ textArea.getTextField().setTextFormat(tf,beginIndex,endIndex);
+ }
+
+ dispatchEvent(new Event("change"));
+
+ var caretIndex:int = textArea.getTextField().caretIndex;
+ var lineIndex:int = textArea.getTextField().getLineIndexOfChar(caretIndex);
+
+ textArea.invalidateDisplayList();
+ textArea.validateDisplayList();
+
+ // Scroll to make the line containing the caret under viewable area
+ while (lineIndex >= textArea.getTextField().bottomScrollV)
+ {
+ textArea.verticalScrollPosition++;
+ }
+
+ callLater(textArea.setFocus);
+ }
+
+ private function getTextStyles():void
+ {
+ if (!textArea)
+ return;
+
+ var tf:TextFormat;
+
+ var beginIndex:int = textArea.getTextField().selectionBeginIndex;
+ var endIndex:int = textArea.getTextField().selectionEndIndex;
+
+ if (beginIndex == endIndex)
+ linkTextInput.enabled = false;
+ else
+ linkTextInput.enabled = true;
+
+ if (textFormatChanged)
+ previousTextFormat = null;
+
+ if (beginIndex == endIndex)
+ {
+ tf = textArea.getTextField().defaultTextFormat;
+ if (tf.url != "")
+ {
+ var carIndex:int = textArea.getTextField().caretIndex;
+ if (carIndex < textArea.getTextField().length)
+ {
+ var tfNext:TextFormat=textArea.getTextField().getTextFormat(carIndex, carIndex + 1);
+ if (!tfNext.url || tfNext.url == "")
+ tf.url = tf.target = "";
+ }
+ else
+ tf.url = tf.target = "";
+ }
+ }
+ else
+ tf = textArea.getTextField().getTextFormat(beginIndex,endIndex);
+
+ if (!previousTextFormat || previousTextFormat.font != tf.font)
+ setComboSelection(fontFamilyCombo, tf.font ? tf.font : "");
+ if (!previousTextFormat || previousTextFormat.size != tf.size)
+ setComboSelection(fontSizeCombo, tf.size ? String(tf.size) : "");
+ if (!previousTextFormat || previousTextFormat.color != tf.color)
+ colorPicker.selectedColor = Number(tf.color);
+
+ if (!previousTextFormat || previousTextFormat.bold != tf.bold)
+ boldButton.selected = tf.bold;
+ if (!previousTextFormat || previousTextFormat.italic != tf.italic)
+ italicButton.selected = tf.italic;
+ if (!previousTextFormat || previousTextFormat.underline != tf.underline)
+ underlineButton.selected = tf.underline;
+
+ if (!previousTextFormat || previousTextFormat.align != tf.align)
+ {
+ if (tf.align == "left")
+ alignButtons.selectedIndex = 0;
+ else if (tf.align == "center")
+ alignButtons.selectedIndex = 1;
+ else if (tf.align == "right")
+ alignButtons.selectedIndex = 2;
+ else if (tf.align == "justify")
+ alignButtons.selectedIndex = 3;
+ }
+ if (!previousTextFormat || previousTextFormat.bullet != tf.bullet)
+ bulletButton.selected = tf.bullet;
+ if (!previousTextFormat || previousTextFormat.url != tf.url)
+ linkTextInput.text = (tf.url == "" || tf.url == null) ? defaultLinkProtocol : tf.url;
+
+ if (textArea.getTextField().defaultTextFormat != tf)
+ textArea.getTextField().defaultTextFormat = tf;
+ previousTextFormat = tf;
+ textFormatChanged = false;
+
+ lastCaretIndex = textArea.getTextField().caretIndex;
+ invalidateToolBarFlag = false;
+ }
+
+ private function setComboSelection(combo:ComboBox,val:String):void
+ {
+ var length:uint = combo.dataProvider.length;
+
+ for (var i:uint = 0; i < length; i++)
+ {
+ if (combo.dataProvider.getItemAt(i).toLowerCase() == val.toLowerCase())
+ {
+ combo.selectedIndex = i;
+ return;
+ }
+ }
+ combo.selectedIndex = -1;
+ combo.validateNow();
+ combo.text = val;
+ }
+
+ /**
+ * @private
+ * This method is called when the user clicks on the textArea, drags
+ * out of it and releases the mouse button outside the TextArea.
+ */
+ private function systemManager_mouseUpHandler(event:MouseEvent):void
+ {
+ if (lastCaretIndex != textArea.getTextField().caretIndex)
+ getTextStyles();
+ else
+ {
+ if (textArea.getTextField().selectionBeginIndex == textArea.getTextField().selectionEndIndex)
+ linkTextInput.enabled = false;
+ else
+ linkTextInput.enabled = true;
+ }
+ systemManager.removeEventListener(
+ MouseEvent.MOUSE_UP, systemManager_mouseUpHandler, true);
+ }
+
+ ]]>
+ </mx:Script>
+
+ <!--- @private -->
+ <mx:TextArea id="textArea" height="100%" width="100%" minHeight="0" minWidth="0"
+ change="dispatchEvent(event);"
+ valueCommit="dispatchEvent(event);"
+ keyUp="getTextStyles()"
+ keyDown="if (textFormatChanged)
+ {
+ textArea.getTextField().defaultTextFormat=previousTextFormat;
+ textFormatChanged = false;
+ }"
+ mouseDown="systemManager.addEventListener(
+ MouseEvent.MOUSE_UP, systemManager_mouseUpHandler, true);"
+ />
+
+ <mx:ControlBar>
+
+ <!--- @private -->
+ <mx:ToolBar id="toolbar" width="100%" horizontalGap="7">
+
+ <mx:ComboBox id="fontFamilyCombo" editable="true"
+ creationComplete="getTextStyles();lastCaretIndex = -1;"
+ dataProvider = "{fontFamilyArray}"
+ close="setTextStyles('font');"
+ enter="setTextStyles('font');"/>
+
+ <mx:ComboBox id="fontSizeCombo" editable="true"
+ paddingLeft="2" paddingRight="2"
+ dataProvider = "{fontSizeArray}"
+ close="setTextStyles('size');"
+ enter="setTextStyles('size');"/>
+
+ <mx:HBox id="toolBar2" horizontalGap="0">
+
+ <mx:Button id="boldButton" width="20" toggle="true"
+ icon="@Embed('assets/icon_style_bold.png')"
+ click="setTextStyles('bold', event.currentTarget.selected);" />
+
+ <mx:Button id="italicButton" width="20" toggle="true"
+ icon="@Embed('assets/icon_style_italic.png')"
+ click="setTextStyles('italic', event.currentTarget.selected);" />
+
+ <mx:Button id="underlineButton" width="20" toggle="true"
+ icon="@Embed('assets/icon_style_underline.png')"
+ click="setTextStyles('underline', event.currentTarget.selected);" />
+
+ </mx:HBox>
+
+ <mx:ColorPicker id="colorPicker" width="22" height="22"
+ close="setTextStyles('color');"/>
+
+ <mx:VRule height="{alignButtons.height}"/>
+
+ <mx:ToggleButtonBar id="alignButtons" buttonWidth="20"
+ itemClick="setTextStyles('align', ToggleButtonBar(event.currentTarget).dataProvider.getItemAt(ToggleButtonBar(event.currentTarget).selectedIndex).action); " >
+ <mx:dataProvider>
+ <mx:Array>
+ <mx:Object icon="@Embed('assets/icon_align_left.png')" action="left"/>
+ <mx:Object icon="@Embed('assets/icon_align_center.png')" action="center"/>
+ <mx:Object icon="@Embed('assets/icon_align_right.png')" action="right"/>
+ <mx:Object icon="@Embed('assets/icon_align_justify.png')" action="justify"/>
+ </mx:Array>
+ </mx:dataProvider>
+ </mx:ToggleButtonBar>
+
+ <mx:Button id="bulletButton" width="20" toggle="true"
+ icon="@Embed('assets/icon_bullet.png')"
+ click="setTextStyles('bullet', event.currentTarget.selected);" />
+
+ <mx:VRule height="{linkTextInput.height}"/>
+
+ <mx:TextInput id="linkTextInput" width="140"
+ focusOut="if (linkTextCommitted)
+ { trace('already committed'); linkTextCommitted = false; }
+ else
+ { trace('not committed'); setTextStyles('url', linkTextInput.text); linkTextInput.text=defaultLinkProtocol;}"
+ enter="setTextStyles('url', linkTextInput.text); linkTextInput.text = defaultLinkProtocol; linkTextCommitted = true;"/>
+
+ </mx:ToolBar>
+
+ </mx:ControlBar>
+
+</mx:Panel>