/*======================================================================================
Module: CRte
Purpose: Create RTE input textarea
Author: Sky Stebnicki, sky.stebnicki@aereus.com
Copyright (c) 2007 Aereus Corporation. All rights reserved.
Usage: // Create rte
======================================================================================*/
/***********************************************************************************
*
* Class: CRte
*
* Purpose: Rich text class
*
***********************************************************************************/
function CRte()
{
this.ifrm = ALib.Dom.createElement("iframe");
this.ifrm.border = '0';
this.ifrm.frameBorder = '0';
this.ifrm.src = "about:blank";
ALib.Dom.styleSetClass(this.ifrm, "CRteIframe");
this.hdntxt = ALib.Dom.createElement("input");
this.hdntxt.type = "hidden";
this.idoc = null;
this.f_src = false;
this.rte_id = '1';
this.colors = [
"FFFFFF", "FFCCCC", "FFCC99", "FFFF99", "FFFFCC", "99FF99", "99FFFF", "CCFFFF",
"CCCCFF", "FFCCFF", "CCCCCC", "FF6666", "FF9966", "FFFF66", "FFFF33", "66FF99",
"33FFFF", "66FFFF", "9999FF", "FF99FF", "C0C0C0", "FF0000", "FF9900", "FFCC66",
"FFFF00", "33FF33", "66CCCC", "33CCFF", "6666CC", "CC66CC", "999999", "CC0000",
"FF6600", "FFCC33", "FFCC00", "33CC00", "00CCCC", "3366FF", "6633FF", "CC33CC",
"666666", "990000", "CC6600", "CC9933", "999900", "009900", "339999", "3333FF",
"6600CC", "993399", "333333", "660000", "993300", "996633", "666600", "006600",
"336666", "000099", "333399", "663366", "000000", "330000", "663300", "663333",
"333300", "003300", "003333", "000066", "330099", "330033"
];
}
/***********************************************************************************
*
* Function: setDocument
*
* Purpose: Set document
*
***********************************************************************************/
CRte.prototype.setDocument = function()
{
this.iwnd = this.ifrm.contentWindow || this.ifrm.contentDocument;
if (this.iwnd.document) {
this.idoc = this.iwnd.document;
}
}
/***********************************************************************************
*
* Function: updateText
*
* Purpose: Update value in hidden text field
*
***********************************************************************************/
CRte.prototype.updateText = function(html)
{
//this.hdntxt.value = this.idoc.body.innerHTML;
if (this.f_src)
{
if (ALib.Dom.m_binfo.ie)
{
//fix for IE
var output = escape(this.idoc.body.innerText);
output = output.replace("%3CP%3E%0D%0A%3CHR%3E", "%3CHR%3E");
output = output.replace("%3CHR%3E%0D%0A%3C/P%3E", "%3CHR%3E");
this.hdntxt.value = unescape(output);
}
else
{
var htmlSrc = this.idoc.body.ownerDocument.createRange();
htmlSrc.selectNodeContents(this.idoc.body);
this.hdntxt.value = htmlSrc.toString();
}
}
else
{
this.hdntxt.value = this.idoc.body.innerHTML;
}
}
/***********************************************************************************
*
* Function: getValue
*
* Purpose: Get text value of rte
*
***********************************************************************************/
CRte.prototype.getValue = function()
{
this.updateText();
return this.hdntxt.value;
}
/***********************************************************************************
*
* Function: setValue
*
* Purpose: Set text value of rte
*
***********************************************************************************/
CRte.prototype.setValue = function(html)
{
var frameHtml = "';
frameHtml += "\n";
frameHtml = "\n";
frameHtml += "\n";
frameHtml += "\n";
frameHtml += "\n";
frameHtml += "\n";
frameHtml += "\n";
if (html)
frameHtml += html + "\n";
frameHtml += "\n";
frameHtml += "";
this.idoc.open();
this.idoc.write(frameHtml);
this.idoc.close();
}
/***********************************************************************************
*
* Function: setHeight
*
* Purpose: Set the height of iframe
*
***********************************************************************************/
CRte.prototype.setHeight = function(height)
{
this.ifrm.style.height = height;
}
/***********************************************************************************
*
* Function: focus
*
* Purpose: Set the focus to the iframe
*
***********************************************************************************/
CRte.prototype.focus = function(height)
{
this.iwnd.focus();
}
/***********************************************************************************
*
* Function: insertHtml
*
* Purpose: Update value in hidden text field
*
***********************************************************************************/
CRte.prototype.insertHtml = function(html)
{
if (ALib.Dom.m_binfo.ie)
{
//retrieve selected range
var sel = this.idoc.selection;
if (sel != null)
{
var newRng = sel.createRange();
newRng = this.rng;
newRng.select();
}
this.rteCommand('paste', html);
}
else
{
this.rteCommand('insertHtml', html);
}
}
/***********************************************************************************
*
* Function: enableDesign
*
* Purpose: Enable design mode in iframe
*
***********************************************************************************/
CRte.prototype.enableDesign = function(html)
{
this.setDocument();
this.setValue(html);
if (ALib.Dom.m_binfo.ie)
{
this.idoc.designMode = "On";
}
else
{
this.ifrm.contentDocument.designMode = "on";
if (ALib.Dom.m_binfo.gecko || ALib.Dom.m_binfo.webkit)
{
//attach a keyboard handler for gecko browsers to make keyboard shortcuts work
//oRTE.addEventListener("keypress", kb_handler, true);
this.idoc.body.spellcheck = true;
}
}
}
/***********************************************************************************
*
* Function: createToolbar
*
* Purpose: Create toolbar
*
***********************************************************************************/
CRte.prototype.createToolbar = function(container)
{
var me = this;
var imgroot = (typeof ALIB_ROOT == "string") ? ALIB_ROOT : ".";
// Add toolbar
// ------------------------------------------
var tb = new CToolbar();
tb.setClass("");
tb.addIcon(imgroot + "/images/bold.gif", "left", function(cls) {cls.rteCommand('bold', ''); }, [me]);
tb.addIcon(imgroot + "/images/italic.gif", "left", function(cls) {cls.rteCommand('italic', ''); }, [me]);
tb.addIcon(imgroot + "/images/underline.gif", "left", function(cls) {cls.rteCommand('underline', ''); }, [me]);
tb.addSpacer();
tb.addIcon(imgroot + "/images/left_just.gif", "left", function(cls) {cls.rteCommand('justifyleft', ''); }, [me]);
tb.addIcon(imgroot + "/images/centre.gif", "left", function(cls) {cls.rteCommand('justifycenter', ''); }, [me]);
tb.addIcon(imgroot + "/images/right_just.gif", "left", function(cls) {cls.rteCommand('justifyright', ''); }, [me]);
tb.addIcon(imgroot + "/images/justifyfull.gif", "left", function(cls) {cls.rteCommand('justifyfull', ''); }, [me]);
tb.addSpacer();
tb.addIcon(imgroot + "/images/hr.gif", "left", function(cls) {cls.rteCommand('inserthorizontalrule', ''); }, [me]);
// Image
if (typeof CFileOpen == "undefined") // Check for ANT CFileOpen
{
function imgdlg(cls)
{
cls.setRange();
var dlg_p = new CDialog();
dlg_p.m_rtfref = cls;
dlg_p.onPromptOk = function(val)
{
this.m_rtfref.insertImage(val);
}
dlg_p.promptBox("Enter the URL of your image", "Insert Image", "");
}
tb.addIcon(imgroot + "/images/image.gif", "left", imgdlg, [this]);
}
else // Use ANT file system
{
var cbrowser = new CFileOpen();
cbrowser.filterType = "jpg:jpeg:png:gif";
cbrowser.m_rtfref = this;
cbrowser.onSelect = function(fid, name, path)
{
this.m_rtfref.insertImage("/files/images/"+fid);
}
tb.addIcon(imgroot + "/images/image.gif", "left", function(cbrowser, cls) { cls.setRange(); cbrowser.showDialog(); }, [cbrowser, this]);
}
tb.addSpacer();
tb.addIcon(imgroot + "/images/numbered_list.gif", "left", function(cls) {cls.rteCommand('insertorderedlist', ''); }, [me]);
tb.addIcon(imgroot + "/images/list.gif", "left", function(cls) {cls.rteCommand('insertunorderedlist', ''); }, [me]);
tb.addSpacer();
var dmcon = new CDropdownMenu();
var dcon = dmcon.addCon();
this.createToolbarFntColor(dcon);
tb.AddItem(dmcon.createImageMenu(imgroot + "/images/textcolor.gif", imgroot + "/images/textcolor.gif", imgroot + "/images/textcolor.gif"));
var dmcon = new CDropdownMenu();
var dcon = dmcon.addCon();
this.createToolbarHlColor(dcon);
tb.AddItem(dmcon.createImageMenu(imgroot + "/images/bgcolor.gif", imgroot + "/images/bgcolor.gif", imgroot + "/images/bgcolor.gif"));
tb.addSpacer();
// Font
var dmfnt = new CDropdownMenu();
dmfnt.mRteCls = this;
dmfnt.onmousedown = function() { this.mRteCls.setRange(); }
dmfnt.tabIndex = -1;
var fonts = ["Arial", "Georgia", "Tahoma", "Courier New", "Times New Roman", "Verdana"];
for (var i = 0; i < fonts.length; i++)
dmfnt.addEntry(""+fonts[i]+"", function (cls, f) { cls.setFont("fontname", f); }, null, null, [this, fonts[i]]);
tb.AddItem(dmfnt.createButtonMenu("Font"));
// Size
var dmsz = new CDropdownMenu();
dmsz.mRteCls = this;
dmsz.onmousedown = function() { this.mRteCls.setRange(); }
dmsz.tabIndex = -1;
var sizes = [[1, "Smallest"], [2, "X-Small"], [3, "Small"], [4, "Normal"], [5, "Large"], [6, "X-Large"], [7, "Huge"]];
for (var i = 0; i < sizes.length; i++)
dmsz.addEntry(sizes[i][1], function (cls, f) { cls.setFont("fontsize", f); }, null, null, [this, sizes[i][0]]);
tb.AddItem(dmsz.createButtonMenu("Size"));
// Style
var dmst = new CDropdownMenu();
dmst.mRteCls = this;
dmst.onmousedown = function() { this.mRteCls.setRange(); }
dmst.tabIndex = -1;
var styles = [["Body", "formatblock", ""],
["Heading 1", "FormatBlock", "
"],
["Heading 2", "FormatBlock", ""],
["Heading 3", "FormatBlock", ""],
["Heading 4", "FormatBlock", ""],
["Heading 5", "FormatBlock", ""]];
for (var i = 0; i < styles.length; i++)
dmst.addEntry(styles[i][0], function (cls, func, val) { cls.setFont(func, val); }, null, null, [this, styles[i][1], styles[i][2]]);
tb.AddItem(dmst.createButtonMenu("Styles"));
tb.addSpacer();
tb.addIcon(imgroot + "/images/src.gif", "left", function(cls) {cls.toggleHtmlSrc(); }, [me]);
tb.print(container);
}
/***********************************************************************************
*
* Function: createToolbarFntColor
*
* Purpose: Create toolbar font color
*
***********************************************************************************/
CRte.prototype.createToolbarFntColor = function(container)
{
var me = this;
var tbl = ALib.Dom.createElement("table", container);
var tbody = ALib.Dom.createElement("tbody", tbl);
var cntr = 0;
var tr = ALib.Dom.createElement("tr", tbody);
for (var i = 0; i < this.colors.length; i++)
{
var td = ALib.Dom.createElement("td", tr);
td.menuref = container.menuref;
td.clsref = me;
td.clr = this.colors[i];
ALib.Dom.styleSet(td, "background-color", "#"+this.colors[i]);
ALib.Dom.styleSet(td, "width", "10px");
ALib.Dom.styleSet(td, "height", "10px");
ALib.Dom.styleSet(td, "border", "1px solid gray");
td.onmousedown = function() { this.clsref.setRange(); }
td.onmouseover = function() { this.style.border = '1px dotted white'; }
td.onmouseout = function() { this.style.border = '1px solid gray'; }
td.onclick = function() { this.clsref.setColor('forecolor', this.clr); this.menuref.unloadMe(); }
cntr++;
if (cntr >= 10)
{
var cntr = 0;
var tr = ALib.Dom.createElement("tr", tbody);
}
}
}
/***********************************************************************************
*
* Function: createToolbarHlColor
*
* Purpose: Create toolbar highlight color
*
***********************************************************************************/
CRte.prototype.createToolbarHlColor = function(container)
{
var me = this;
container.clsref = this;
var tbl = ALib.Dom.createElement("table", container);
var tbody = ALib.Dom.createElement("tbody", tbl);
var cntr = 0;
var tr = ALib.Dom.createElement("tr", tbody);
for (var i = 0; i < this.colors.length; i++)
{
var td = ALib.Dom.createElement("td", tr);
td.menuref = container.menuref;
td.clsref = me;
td.clr = this.colors[i];
ALib.Dom.styleSet(td, "background-color", "#"+this.colors[i]);
ALib.Dom.styleSet(td, "width", "10px");
ALib.Dom.styleSet(td, "height", "10px");
ALib.Dom.styleSet(td, "border", "1px solid gray");
td.onmousedown = function() { this.clsref.setRange(); }
td.onmouseover = function() { this.style.border = '1px dotted white'; }
td.onmouseout = function() { this.style.border = '1px solid gray'; }
td.onclick = function() { this.clsref.setColor('hilitecolor', this.clr); this.menuref.unloadMe(); }
cntr++;
if (cntr >= 10)
{
var cntr = 0;
var tr = ALib.Dom.createElement("tr", tbody);
}
}
}
/***********************************************************************************
*
* Function: setColor
*
* Purpose: Set hilight or foreground color
*
***********************************************************************************/
CRte.prototype.setColor = function(cmd, color)
{
if (ALib.Dom.m_binfo.ie)
{
this.iwnd.focus();
//retrieve selected range
var sel = this.idoc.selection;
if (sel != null)
{
var newRng = sel.createRange();
newRng = this.rng;
newRng.select();
}
cmd = (cmd == "hilitecolor") ? "backcolor" : cmd;
}
this.rteCommand(cmd, "#"+color);
}
/***********************************************************************************
*
* Function: setFont
*
* Purpose: Set Font Name
*
***********************************************************************************/
CRte.prototype.setFont = function(cmd, font)
{
if (ALib.Dom.m_binfo.ie)
{
this.iwnd.focus();
//retrieve selected range
var sel = this.idoc.selection;
if (sel != null)
{
var newRng = sel.createRange();
newRng = this.rng;
newRng.select();
}
}
this.rteCommand(cmd, font);
}
/***********************************************************************************
*
* Function: insertImage
*
* Purpose: Insert an image
*
***********************************************************************************/
CRte.prototype.insertImage = function(path)
{
if (ALib.Dom.m_binfo.ie)
{
this.iwnd.focus();
//retrieve selected range
var sel = this.idoc.selection;
if (sel != null)
{
var newRng = sel.createRange();
newRng = this.rng;
newRng.select();
}
}
this.rteCommand("InsertImage", path);
}
/***********************************************************************************
*
* Function: setRange
*
* Purpose: Set and store selection range
*
***********************************************************************************/
CRte.prototype.setRange = function()
{
//function to store range of current selection
if (ALib.Dom.m_binfo.ie)
{
var selection = this.idoc.selection;
if (selection != null) this.rng = selection.createRange();
}
else
{
var selection = this.iwnd.getSelection();
this.rng = selection.getRangeAt(selection.rangeCount - 1).cloneRange();
}
}
/***********************************************************************************
*
* Function: rteCommand
*
* Purpose: Issue commands to the iframe window
*
* Arguments: 1. command:string - name of command to run
* 2. option:string - value to pass with command
*
***********************************************************************************/
CRte.prototype.rteCommand = function(command, option)
{
try
{
this.iwnd.focus();
this.idoc.execCommand(command, false, option);
this.iwnd.focus();
}
catch (e)
{
alert(e);
}
}
/***********************************************************************************
*
* Function: toggleHtmlSrc
*
* Purpose: Toggle HTML Source
*
***********************************************************************************/
CRte.prototype.toggleHtmlSrc = function()
{
if (this.f_src)
{
if (ALib.Dom.m_binfo.ie)
{
//fix for IE
var output = escape(this.idoc.body.innerText);
output = output.replace("%3CP%3E%0D%0A%3CHR%3E", "%3CHR%3E");
output = output.replace("%3CHR%3E%0D%0A%3C/P%3E", "%3CHR%3E");
this.idoc.body.innerHTML = unescape(output);
}
else
{
var htmlSrc = this.idoc.body.ownerDocument.createRange();
htmlSrc.selectNodeContents(this.idoc.body);
this.idoc.body.innerHTML = htmlSrc.toString();
}
this.f_src = false;
}
else
{
if (ALib.Dom.m_binfo.ie)
{
this.idoc.body.innerText = this.idoc.body.innerHTML;
}
else
{
var htmlSrc = this.idoc.createTextNode(this.idoc.body.innerHTML);
this.idoc.body.innerHTML = "";
this.idoc.body.appendChild(htmlSrc);
}
this.f_src = true;
}
}
/***********************************************************************************
*
* Function: print
*
* Purpose: Print rte
*
***********************************************************************************/
CRte.prototype.print = function(container, width, height, html)
{
if (container)
{
this.createToolbar(container);
container.appendChild(this.ifrm);
if (width)
this.ifrm.style.width = width;
if (height)
this.ifrm.style.height = height;
var htm = (typeof html != 'undefined') ? html : '';
this.enableDesign(htm);
var me = this;
var bcb = function()
{
if (ALib.Dom.m_binfo.ie && !me.rng)
{
me.setRange();
//retrieve selected range
var sel = me.idoc.selection;
if (sel != null)
{
var newRng = sel.createRange();
newRng = me.rng;
newRng.select();
}
}
me.updateText();
}
if(ALib.Dom.m_binfo.ie)
this.ifrm.attachEvent("onblur", bcb);
else
this.ifrm.contentDocument.addEventListener("blur",bcb,false);
var br = ALib.Dom.createElement("br");
container.appendChild(br);
container.appendChild(this.hdntxt);
}
}