moodle/lib/rte/richedit.html
2002-12-15 17:59:40 +00:00

338 lines
20 KiB
HTML

<!--
################################################################################
##
## HTML Text Editing Component for hosting in Web Pages
## Copyright (C) 2001 Ramesys (Contracting Services) Limited
##
## This library is free software; you can redistribute it and/or
## modify it under the terms of the GNU Lesser General Public
## License as published by the Free Software Foundation; either
## version 2.1 of the License, or (at your option) any later version.
##
## This library is distributed in the hope that it will be useful,
## but WITHOUT ANY WARRANTY; without even the implied warranty of
## MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
## Lesser General Public License for more details.
##
## You should have received a copy of the GNU LesserGeneral Public License
## along with this program; if not a copy can be obtained from
##
## http://www.gnu.org/copyleft/lesser.html
##
## or by writing to:
##
## Free Software Foundation, Inc.
## 59 Temple Place - Suite 330,
## Boston,
## MA 02111-1307,
## USA.
##
## Original Developer:
##
## Austin David France
## Ramesys (Contracting Services) Limited
## Mentor House
## Ainsworth Street
## Blackburn
## Lancashire
## BB1 6AY
## United Kingdom
## email: Austin.France@Ramesys.com
##
## Home Page: http://richtext.sourceforge.net/
## Support: http://richtext.sourceforge.net/
##
################################################################################
##
## Authors & Contributers:
##
## OZ Austin David France [austin.france@ramesys.com]
## Primary Developer
##
## LEON Leon Reinders [leonreinders@hetnet.nl]
## Author of View Source & History Functions
##
## DIRK Dirk Datzert [Dirk.Datzert@rasselstein-hoesch.de]
## Justify Full Option
##
## GE Herfurth, Gerrit [gerrit.herfurth@gs-druckfarben.de]
## Translator
##
## BC Bill chalmers [bill_paula@btinternet.com]
## General Geek
##
## History:
##
## OZ 08-01-2002
## Extended the richeditor interface to include an options property.
## This property can be set to enable/disable functionality in the
## editor.
##
## OZ 22-01-2002
## Disable drag-drop into the editor window and from toolbar buttons.
##
## OZ 10-02-2002
## Added new Full Justify toolbar button. Implementation of
## a mod to the editor made by Dirk Datzert who supplied the code and
## the Image.
##
## OZ 11-02-2002
## Startup with text area set to contenteditable="false". The content
## is made editable when the editor has been initialised.
##
## OZ 11-02-2002
## Include debug routines script (rte_debug.js)
##
## OZ 14-02-2002
## Fix removing of color from text. This actually removes all formatting
## and is equivelent to selecting the remove formatting option.
##
## OZ 14-02-2002
## Reset Fill/Text color buttons once event has fired so they no longer
## appear pressed.
##
## GE 05-06-2002
## Add language translation support for table edit option.
##
## OZ 01-07-2002
## Update table editing html (toolbar) with translation support.
##
## OZ 01-07-2002
## Move language translation (rte_lang.js) below attaching of the
## initEditor() window onload event to ensure translation is done
## before the editor becomes visible.
##
## BC 10-07-2002
## Made the font selection more "web style" with multiple font face attributes.
##
## WC 06-08-2002
## Testing to ensure code was branched properly for 0.3.0 release
-->
<html><head>
<meta content="HTML 4.0" name="vs_targetSchema">
<meta content="Microsoft FrontPage 5.0" name="GENERATOR">
<link rel="StyleSheet" type="text/css" href="richedit.css">
<link rel="StyleSheet" type="text/css" href="syntax.css">
<link rel="StyleSheet" type="text/css" href="custom.css">
<script language="JavaScript" src="rte_xhtml.js"></script>
<script language="JavaScript" src="rte_interface.js"></script>
<script language="JavaScript" src="rte_debug.js"></script>
<script language="JavaScript" src="rte.js"></script>
<script language="JavaScript" src="rte_codesweep.js"></script>
<script language="JavaScript" src="rte_editmode.js"></script>
<script language="JavaScript" src="rte_history.js"></script>
<SCRIPT language="JavaScript" src="tableEditor.js"></SCRIPT>
<script language="JavaScript">
// This defines the scriptlets public interface. See rte_interface.js for
// the actual interface definition.
var public_description = new RichEditor();
// Initialise the editor as soon as the window is loaded.
window.attachEvent("onload", initEditor);
// Initialise the tEdit var
var tEdit = null;
</script>
<script language="JavaScript" src="rte_lang.js"></script>
</head>
<body leftMargin="0" topMargin="0" scroll="no" unselectable="on"
onload="tEdit = new tableEditor('doc', 'textedit');"
onMouseMove="if (tEdit) { tEdit.changePos(); tEdit.resizeCell() }" >
<!-- Loading Layer ----------------------------------->
<div id="loading" style="position: absolute; top: 0px; left: 0px; height: 100%; z-index: -1">
<table width="100%" height="100%"><tr><td align="center" valign="middle">
<font size="+2">Loading ...</font>
</td></tr></table>
</div>
<!-- Editor Layer -------------------------------------->
<table id="editor" unselectable="on" height="100%" cellspacing="0" cellpadding="0" width="100%" bgcolor="buttonface" border="0">
<tr ondragstart="handleDrag(0)" onmouseup="press(false)" onmousedown="press(true)" onmouseover="hover(true)" onmouseout="hover(false)">
<td class="rebar"><nobr><span class="toolbar">
<img class="spacer" src="images/spacer.gif" width="2"><span class="start"></span>
<img id="btnBold" onclick="doStyle('bold')" alt="@{Bold}" src="images/icon_bold.gif" align="absMiddle" width="20" height="20">
<img id="btnItalic" onclick="doStyle('italic')" alt="@{Italic}" src="images/icon_italic.gif" align="absMiddle" width="20" height="20">
<img id="btnUnderline" onclick="doStyle('underline')" alt="@{Underline}" src="images/icon_underline.gif" align="absMiddle" width="20" height="20">
<img id="btnStrikethrough" onclick="doStyle('strikethrough')" alt="@{Strikethrough}" src="images/icon_strikethrough.gif" align="absMiddle" width="20" height="20">
<img class="spacer" src="images/spacer.gif" width="2"><span class="sep"></span>
<img id="btnLeftJustify" onclick="doStyle('JustifyLeft')" alt="@{AlignLeft}" src="images/icon_left.gif" align="absMiddle" width="20" height="20">
<img id="btnCenter" onclick="doStyle('JustifyCenter')" alt="@{Center}" src="images/icon_center.gif" align="absMiddle" width="20" height="20">
<img id="btnRightJustify" onclick="doStyle('JustifyRight')" alt="@{AlignRight}" src="images/icon_right.gif" align="absMiddle" width="20" height="20">
<img id="btnFullJustify" onclick="doStyle('JustifyFull')" alt="@{AlignBlock}" src="images/icon_block.gif" align="absMiddle" width="20" height="20">
<img class="spacer" src="images/spacer.gif" width="2"><span class="sep"></span>
<img id="btnNumList" onclick="doStyle('InsertOrderedList')" alt="@{NumberedList}" src="images/icon_numlist.gif" align="absMiddle" width="20" height="20">
<img id="btnBulList" onclick="doStyle('InsertUnorderedList')" alt="@{BulettedList}" src="images/icon_bullist.gif" align="absMiddle" width="20" height="20">
<img class="spacer" src="images/spacer.gif" width="2"><span class="sep"></span>
<img id="btnOutdent" onmousedown="doStyle('Outdent')" alt="@{DecreaseIndent}" src="images/icon_outdent.gif" align="absMiddle" width="20" height="20">
<img id="btnIndent" onmousedown="doStyle('Indent')" alt="@{IncreaseIndent}" src="images/icon_indent.gif" align="absMiddle" width="20" height="20">
<img id="btnSelect" onclick="doStyle('SelectAll')" alt="@{SelectAll}" src="images/icon_select_all.gif" align="absMiddle" width="20" height="20">
<span id="featureHistory">
<img class="spacer" src="images/spacer.gif" width="10"><span class="sep"></span>
<img id="btnPrev" onmousedown="document.execCommand('Undo')" alt="@{HistoryBack}" src="images/icon_undo.gif" align="absMiddle" width="20" height="20">
<img id="btnNext" onmousedown="document.execCommand('Redo')" alt="@{HistoryForward}" src="images/icon_redo.gif" align="absMiddle" width="20" height="20">
</span></nobr></td>
<td class="rebar"><nobr><span class="toolbar">
<img class="spacer" src="images/spacer.gif" width="2"><span class="start"></span>
<img id="btnLink" onclick="link(true)" alt="@{InsertLink}" src="images/icon_ins_link.gif" align="absMiddle" width="20" height="20">
<img id="btnRemLink" onclick="link(false)" alt="@{RemoveLink}" src="images/icon_rem_link.gif" align="absMiddle" width="20" height="20">
<img class="spacer" src="images/spacer.gif" width="2"><span class="sep"></span>
<img id="btnImage" onclick="insert('image')" alt="@{InsertImage}" src="images/icon_ins_image.gif" align="absMiddle" width="20" height="20">
<img id="btnTable" onclick="insert('table')" alt="@{InsertTable}" src="images/icon_ins_table.gif" align="absMiddle" width="20" height="20">
<img id="btnTable" onclick="document.getElementById('tblCtrl').style.visibility = 'visible';" alt="@{EditTable}" src="images/icon_edt_table.gif" align="absMiddle" width="20" height="20">
<img id="btnRule" onclick="doStyle('InsertHorizontalRule')" alt="@{InsertLine}" src="images/icon_rule.gif" align="absMiddle" width="20" height="20">
<img id="btnSmile" onclick="insert('smile')" alt="@{InsertSmily}" src="images/em.icon.smile.gif" align="absMiddle" width="15" height="15">
<img id="btnChar" onclick="insert('char')" alt="@{InsertCharacter}" src="images/icon_ins_char.gif" align="absMiddle" width="20" height="20" border="0">
<span id="featureSource">
<img class="spacer" src="images/spacer.gif" width="2"><span class="start"></span>&nbsp;
<span class="label">@{Source}</span>
<input title="@{SourceTitle}" class="checkbox" hidefocus type="checkbox" name="switchMode"
onclick="tEdit.stopCellResize(true); tEdit.unSetTableElements(); setEditMode(switchMode)">
</span>
</span>
</nobr></td></tr>
<tr id="featureStyleBar" ondragstart="handleDrag(0)" onmouseup="press(false)" onmousedown="press(true)" onmouseover="hover(true)" onmouseout="hover(false)">
<td colspan=2 class="rebar"><nobr><span class="toolbar">
<img class="spacer" src="images/spacer.gif" width="2"><span class="start"></span>&nbsp;
<span id="featureStyle">
<span class="label">@{Style}</span>
<select name="" id="ctlStyle" class="button" onchange="addTag(this)">
</select>
<span class="sep"></span>
</span>
<span id="featureFont">
<span class="label">@{Font}</span>
<select hidefocus class="fontselect" id="ctlFont" onchange="sel(this)">
<option selected></option>
<option id="Arial" value="Arial, Helvetica, sans-serif">Arial, Helvetica, sans-serif</option>
<option id="Times New Roman" value="Times New Roman, Times, serif">Times New Roman, Times, serif</option>
<option id="Courier New" value="Courier New, Courier, mono">Courier New, Courier, mono</option>
<option id="Georgia" value="Georgia, Times New Roman, Times, serif">Georgia, Times New Roman, Times, serif</option>
<option id="Verdana" value="Verdana, Arial, Helvetica, sans-serif">Verdana, Arial, Helvetica, sans-serif</option>
<option id="Geneva" value="Geneva, Arial, Helvetica, sans-serif">Geneva, Arial, Helvetica, sans-serif</option>
</select>
</span>
<span id="featureFontSize">
<span class="sep"></span>
<span class="label">@{Size}</span>
<select hidefocus class="button" id="ctlSize" onchange="sel(this)">
<option selected></option>
<option value="1">xx-small</option>
<option value="2">x-small</option>
<option value="3">small</option>
<option value="4">medium</option>
<option value="5">large</option>
<option value="6">x-large</option>
<option value="7">xx-large</option>
</select>
</span>
<span id="featureColour">
<span class="sep"></span>
<img id="btnText" onclick="pickColor('ForeColor')" alt="@{TextColor}" src="images/icon_color_text.gif" align="absMiddle" width="36" height="20">
<img id="btnFill" onclick="pickColor('BackColor')" alt="@{BackgroundColor}" src="images/icon_color_fill.gif" align="absMiddle" width="36" height="20">
</span>
</span></nobr></td>
</tr>
<!-- Fields are inserted here -->
<tr id="rebarBottom">
<td colspan=2 class="spacer" height="2"><img height="1" src="images/spacer.gif" align="left"></td></tr>
<tr>
<td colspan=2 class="textedit" id="textedit" valign="top" height="100%">
<div class="document" id="doc" onkeyup="reset(); markSelectedElement(); tEdit.setTableElements(); tEdit.repositionArrows();" contenteditable="false" style="OVERFLOW: auto; WIDTH: 100%; HEIGHT: 100%" onclick="reset(); markSelectedElement()" onmouseup="markSelectedElement(); tEdit.setTableElements(); tEdit.stopCellResize(false);" onscroll="tEdit.repositionArrows()" height="100%" width="100%">
</div>
</td></tr>
</table>
<object id="color" data="colorchooser.html" type="text/x-scriptlet" VIEWASTEXT>
</object>
<script for="color" event="onscriptletevent(name, data)">
setColor(name, data);
</script>
<!-- Table Editing Layer ----------------------------------->
<div id="tblCtrl" style="position:absolute; visibility:hidden; left:200; top:200; z-index: 5">
<table border="0" cellpadding="0" cellspacing="0" width="68" bgcolor="buttonface">
<tr ondragstart="handleDrag(0)">
<td><img src="images/spacer.gif" width="8" height="1" border="0"></td>
<td><img src="images/spacer.gif" width="5" height="1" border="0"></td>
<td><img src="images/spacer.gif" width="18" height="1" border="0"></td>
<td><img src="images/spacer.gif" width="2" height="1" border="0"></td>
<td><img src="images/spacer.gif" width="22" height="1" border="0"></td>
<td><img src="images/spacer.gif" width="4" height="1" border="0"></td>
<td><img src="images/spacer.gif" width="9" height="1" border="0"></td>
<td><img src="images/spacer.gif" width="1" height="1" border="0"></td>
</tr>
<tr ondragstart="handleDrag(0)">
<td colspan="2" onClick="document.getElementById('tblCtrl').style.visibility = 'hidden';"><img name="CloseWindow" src="images/CloseWindow.gif" width="13" height="16" border="0"></td>
<td colspan="3" onmousedown="tEdit.setDrag( document.getElementById('tblCtrl') )" onmouseup="tEdit.setDrag( document.getElementById('tblCtrl') )"><img name="toolbar" src="images/toolbar.gif" width="42" height="16" border="0"></td>
<td colspan="2"><img name="minimize" src="images/minimize.gif" width="13" height="16" border="0"></td>
<td><img src="images/spacer.gif" width="1" height="16" border="0"></td>
</tr>
<tr ondragstart="handleDrag(0)">
<td colspan="7"><img name="hdr_tables" src="@{hdr_tables}" width="68" height="15" border="0"></td>
<td><img src="images/spacer.gif" width="1" height="15" border="0"></td>
</tr>
<tr ondragstart="handleDrag(0)">
<td colspan="7"><img name="plt_hdr" src="images/plt_hdr.gif" width="68" height="9" border="0"></td>
<td><img src="images/spacer.gif" width="1" height="9" border="0"></td>
</tr>
<tr ondragstart="handleDrag(0)" onmouseup="press(false)" onmousedown="press(true)" onmouseover="hover(true)" onmouseout="hover(false)">
<td rowspan="8"><img class="spacer" name="Editor_r4_c1" src="images/Editor_r4_c1.gif" width="8" height="112" border="0"></td>
<td colspan="2" class="tbl"><img name="rmv_colspan" onclick="tEdit.splitCell();" src="images/rmv_colspan.gif" width="21" height="24" alt="@{RemoveColspan}"></td>
<td rowspan="8"><img class="spacer" name="Editor_r4_c4" src="images/Editor_r4_c4.gif" width="2" height="112" border="0"></td>
<td colspan="2" class="tbl"><img name="rmv_rowspan" onclick="tEdit.unMergeDown();" src="images/rmv_rowspan.gif" width="24" height="24" alt="@{RemoveRowspan}"></td>
<td rowspan="8"><img class="spacer" name="Editor_r4_c7" src="images/Editor_r4_c7.gif" width="9" height="112" border="0"></td>
<td><img class="spacer" src="images/spacer.gif" width="1" height="26" border="0"></td>
</tr>
<tr ondragstart="handleDrag(0)">
<td colspan="2"><img class="spacer" name="Editor_r5_c2" src="images/Editor_r5_c2.gif" width="23" height="2" border="0"></td>
<td colspan="2"><img class="spacer" name="Editor_r5_c5" src="images/Editor_r5_c5.gif" width="26" height="2" border="0"></td>
<td><img class="spacer" src="images/spacer.gif" width="1" height="2" border="0"></td>
</tr>
<tr ondragstart="handleDrag(0)" onmouseup="press(false)" onmousedown="press(true)" onmouseover="hover(true)" onmouseout="hover(false)">
<td colspan="2" class="tbl"><img name="incr_colspan" onclick="tEdit.mergeRight();" src="images/incr_colspan.gif" width="21" height="24" alt="@{IncreaseColspan}" border="0"></td>
<td colspan="2" class="tbl"><img name="incr_rowspan" onclick="tEdit.mergeDown();" src="images/incr_rowspan.gif" width="24" height="24" alt="@{IncreaseRowspan}" border="0"></td>
<td><img class="spacer" src="images/spacer.gif" width="1" height="26" border="0"></td>
</tr>
<tr ondragstart="handleDrag(0)">
<td colspan="2"><img class="spacer" name="Editor_r7_c2" src="images/Editor_r7_c2.gif" width="23" height="2" border="0"></td>
<td colspan="2"><img class="spacer" name="Editor_r7_c5" src="images/Editor_r7_c5.gif" width="26" height="2" border="0"></td>
<td><img class="spacer" src="images/spacer.gif" width="1" height="2" border="0"></td>
</tr>
<tr ondragstart="handleDrag(0)" onmouseup="press(false)" onmousedown="press(true)" onmouseover="hover(true)" onmouseout="hover(false)">
<td colspan="2" class="tbl"><img name="add_col" onclick="tEdit.processColumn('add');" src="images/add_col.gif" width="21" height="22" alt="@{AddColumn}" border="0" ></td>
<td colspan="2" class="tbl"><img name="add_row" onclick="tEdit.processRow('add');" src="images/add_row.gif" width="24" height="22" alt="@{AddRow}" border="0" ></td>
<td><img src="images/spacer.gif" width="1" height="24" border="0"></td>
</tr>
<tr ondragstart="handleDrag(0)">
<td colspan="2"><img class="spacer" name="Editor_r9_c2" src="images/Editor_r9_c2.gif" width="23" height="4" border="0"></td>
<td colspan="2"><img class="spacer" name="Editor_r9_c5" src="images/Editor_r9_c5.gif" width="26" height="4" border="0"></td>
<td><img class="spacer" src="images/spacer.gif" width="1" height="4" border="0"></td>
</tr>
<tr ondragstart="handleDrag(0)" onmouseup="press(false)" onmousedown="press(true)" onmouseover="hover(true)" onmouseout="hover(false)">
<td colspan="2" class="tbl"><img name="rmv_col" onclick="tEdit.processColumn('remove');" src="images/rmv_col.gif" width="21" height="22" alt="@{RemoveColumn}" border="0" ></td>
<td colspan="2" class="tbl"><img name="rmv_row" onclick="tEdit.processRow('remove');" src="images/rmv_row.gif" width="24" height="22" alt="@{RemoveRow}" border="0" ></td>
<td><img src="images/spacer.gif" width="1" height="24" border="0"></td>
</tr>
<tr ondragstart="handleDrag(0)">
<td colspan="2"><img name="Editor_r11_c2" src="images/Editor_r11_c2.gif" width="23" height="4" border="0"></td>
<td colspan="2"><img name="Editor_r11_c5" src="images/Editor_r11_c5.gif" width="26" height="4" border="0"></td>
<td><img class="spacer" src="images/spacer.gif" width="1" height="4" border="0"></td>
</tr>
<tr ondragstart="handleDrag(0)">
<td colspan="7"><img name="plt_ftr" src="images/plt_ftr.gif" width="68" height="8" border="0"></td>
<td><img class="spacer" src="images/spacer.gif" width="1" height="8" border="0"></td>
</tr>
</table>
</div>
</body></html>