This came about as party of the DigitallyU project. We originally has a plain old text field that people could type/paste their text into, but our tester started requesting the ability to have more control over the formatting of the text.

At the time there was no Flex text editor component, so this was built from the ground up. As you can see from playing with it, it behaves more or less like any simple text editor including recognizing the format of the currently selected text.

Sine several people have requested it, here is the .FLA and the source code is below. I had to decompile the FLA as I am not sure where the original is and I am fairly sure that the code in the class the same version (the code is not from the decompilation,I still had that file laying around). Everything is being provided as is, no warranties or guarantees.

class SimpleRichTextEditor
{
var main_ta, textFormater_mc, url_mc, bg_mc, currentTextFormat, selStart, selEnd;
function SimpleRichTextEditor()
{
var _loc2 = this;
main_ta.__set__html(true);
Key.addListener(this);
} // End of the function
function onLoad()
{
textFormater_mc.fontList_cb.dataProvider = fontList_dp;
textFormater_mc.fontSize_cb.dataProvider = fontSize_dp;
textFormater_mc.colorlist_cb.addItem(“Black”, “0×000000″);
textFormater_mc.colorlist_cb.addItem(“Red”, “0xFF0000″);
textFormater_mc.colorlist_cb.addItem(“Blue”, “0×0000FF”);
textFormater_mc.colorlist_cb.addItem(“Green”, “0×008800″);
main_ta.onMouseUp = mx.utils.Delegate.create(this, getSelection);
main_ta.addEventListener(“focusOut”, this);
textFormater_mc.colorlist_cb.addEventListener(“change”, mx.utils.Delegate.create(this, fontColorChanged));
textFormater_mc.fontList_cb.addEventListener(“change”, mx.utils.Delegate.create(this, fontFaceChanged));
textFormater_mc.fontSize_cb.addEventListener(“change”, mx.utils.Delegate.create(this, fontSizeChanged));
url_mc.create_btn.onRelease = mx.utils.Delegate.create(this, createURL);
url_mc.del_btn.onRelease = mx.utils.Delegate.create(this, deleteURL);
textFormater_mc.bold_btn.onRelease = mx.utils.Delegate.create(this, toggleBold);
textFormater_mc.italics_btn.onRelease = mx.utils.Delegate.create(this, toggleItalics);
textFormater_mc.underline_btn.onRelease = mx.utils.Delegate.create(this, toggleUnderline);
main_ta.__set__text(“Here is some text to play with.”);
textFormater_mc.bold_btn.onRollOver = textFormater_mc.italics_btn.onRollOver = textFormater_mc.underline_btn.onRollOver = function ()
{
bg_mc._alpha = 100;
};
textFormater_mc.bold_btn.onRollOut = textFormater_mc.italics_btn.onRollOut = textFormater_mc.underline_btn.onRollOut = mx.utils.Delegate.create(this, updateFormatToolBar);
this.updateFormatToolBar();
} // End of the function
function onKeyUp()
{
if (Key.getCode() == 37 || Key.getCode() == 39 || Key.getCode() == 38 || Key.getCode() == 40)
{
this.getSelection();
} // end if
} // End of the function
function toggleBold()
{
currentTextFormat.bold = currentTextFormat.bold == true ? (false) : (true);
this.updateTextFormat();
} // End of the function
function toggleUnderline()
{
currentTextFormat.underline = currentTextFormat.underline == true ? (false) : (true);
this.updateTextFormat();
} // End of the function
function toggleItalics()
{
currentTextFormat.italic = currentTextFormat.italic == true ? (false) : (true);
this.updateTextFormat();
} // End of the function
function fontFaceChanged()
{
trace (“font changed”);
currentTextFormat.font = textFormater_mc.fontList_cb.value;
this.updateTextFormat();
} // End of the function
function fontSizeChanged()
{
trace (“font size changed”);
currentTextFormat.size = textFormater_mc.fontSize_cb.value;
this.updateTextFormat();
} // End of the function
function fontColorChanged()
{
trace (“color changed”);
currentTextFormat.color = textFormater_mc.colorlist_cb.value;
this.updateTextFormat();
} // End of the function
function createURL()
{
trace (“create url”);
currentTextFormat.url = url_mc.url_txt.text;
currentTextFormat.target = “_blank”;
currentTextFormat.color = 255;
trace (“text format url = ” + currentTextFormat.url + ” url text = ” + url_mc.url_txt.text);
this.updateTextFormat();
} // End of the function
function deleteURL()
{
trace (“delete URL”);
currentTextFormat.url = “”;
currentTextFormat.target = “”;
currentTextFormat.color = 0;
this.updateTextFormat();
} // End of the function
function change()
{
currentTextFormat.color = textFormater_mc.colorlist_cb.value;
this.updateTextFormat();
} // End of the function
function getSelection()
{
trace (“getSelection”);
if (Selection.getFocus() == String(main_ta.label))
{
trace (“focus is main text area”);
selStart = Selection.getBeginIndex();
selEnd = Selection.getEndIndex();
if (selStart != selEnd)
{
currentTextFormat = main_ta.label.getTextFormat(selStart, selEnd);
}
else
{
currentTextFormat = main_ta.label.getTextFormat(selStart, selEnd + 1);
} // end else if
this.updateFormatToolBar();
} // end if
} // End of the function
function updateTextFormat()
{
if (selStart != selEnd)
{
main_ta.label.setTextFormat(selStart, selEnd, currentTextFormat);
this.updateFormatToolBar();
} // end if
} // End of the function
function updateFormatToolBar()
{
if (currentTextFormat.bold)
{
textFormater_mc.bold_btn.bg_mc._alpha = 65;
}
else
{
textFormater_mc.bold_btn.bg_mc._alpha = 5;
} // end else if
if (currentTextFormat.italic)
{
textFormater_mc.italics_btn.bg_mc._alpha = 65;
}
else
{
textFormater_mc.italics_btn.bg_mc._alpha = 5;
} // end else if
if (currentTextFormat.underline)
{
textFormater_mc.underline_btn.bg_mc._alpha = 65;
}
else
{
textFormater_mc.underline_btn.bg_mc._alpha = 5;
} // end else if
if (currentTextFormat.url.length != 0 && currentTextFormat.url != null)
{
url_mc.url_txt.text = currentTextFormat.url;
}
else
{
url_mc.url_txt.text = “http://”;
} // end else if
for (x = 0; x < textFormater_mc.fontList_cb.length; x++)
{
if (currentTextFormat.font == textFormater_mc.fontList_cb.getItemAt(x))
{
textFormater_mc.fontList_cb.selectedIndex = x;
break;
continue;
} // end if
textFormater_mc.fontList_cb.selectedIndex = 0;
} // end of for
var x = 0;
while (x < textFormater_mc.colorlist_cb.length)
{
if (currentTextFormat.color == textFormater_mc.colorlist_cb.getItemAt(x).data)
{
textFormater_mc.colorlist_cb.selectedIndex = x;
break;
}
else
{
textFormater_mc.colorlist_cb.selectedIndex = 0;
} // end else if
++x;
} // end while
var x = 0;
while (x < textFormater_mc.fontSize_cb.length)
{
if (currentTextFormat.size == textFormater_mc.fontSize_cb.getItemAt(x))
{
textFormater_mc.fontSize_cb.selectedIndex = x;
break;
}
else
{
textFormater_mc.fontSize_cb.selectedIndex = 1;
} // end else if
++x;
} // end while
} // End of the function
function focusOut()
{
if (selStart != selEnd)
{
Selection.setSelection(selStart, selEnd);
} // end if
} // End of the function
function setMainText(txt)
{
trace ("setting main text");
main_ta.__set__text(txt);
trace (this.getMainText());
} // End of the function
function getMainText()
{
//return (main_ta.text());
} // End of the function
var fontList_dp = new Array("_sans", "Arial", "Arial Black", "Comic", "Courier", "Impact", "Lucida", "Tahoma", "Times", "Trebuchet", "Verdana");
var fontSize_dp = new Array(10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30);
} // End of Class