Rich Text Editor

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", "0x000000");
textFormater_mc.colorlist_cb.addItem("Red", "0xFF0000");
textFormater_mc.colorlist_cb.addItem("Blue", "0x0000FF");
textFormater_mc.colorlist_cb.addItem("Green", "0x008800");
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

2 Responses to “Rich Text Editor”

  1. dev Says:

    i need the code

  2. MArcos Says:

    How can i get it?