📄 wysiwyg.js
字号:
// more javascript from http://www.smallrain.net
/* ---------------------------------------------------------------------- *\
Global Variables: Set global variables such as images directory,
WYSIWYG Height, Width, and CSS Directory.
\* ---------------------------------------------------------------------- */
// Images Directory
imagesDir = "icons/";
// CSS Directory
cssDir = "styles/";
// Popups Directory
popupsDir = "popups/";
// WYSIWYG Width and Height
wysiwygWidth = 500;
wysiwygHeight = 150;
// Include Style Sheet
document.write('<link rel="stylesheet" type="text/css" href="' +cssDir+ 'styles.css">\n');
/* ---------------------------------------------------------------------- *\
Toolbar Settings: Set the features and buttons available in the WYSIWYG
Toolbar.
\* ---------------------------------------------------------------------- */
// List of available font types
var Fonts = new Array();
Fonts[0] = "Arial";
Fonts[1] = "Sans Serif";
Fonts[2] = "Tahoma";
Fonts[3] = "Verdana";
Fonts[4] = "Courier New";
Fonts[5] = "Georgia";
Fonts[6] = "Times New Roman";
Fonts[7] = "Impact";
Fonts[8] = "Comic Sans MS";
// List of available block formats (not in use)
var BlockFormats = new Array();
BlockFormats[0] = "Address";
BlockFormats[1] = "Bulleted List";
BlockFormats[2] = "Definition";
BlockFormats[3] = "Definition Term";
BlockFormats[4] = "Directory List";
BlockFormats[5] = "Formatted";
BlockFormats[6] = "Heading 1";
BlockFormats[7] = "Heading 2";
BlockFormats[8] = "Heading 3";
BlockFormats[9] = "Heading 4";
BlockFormats[10] = "Heading 5";
BlockFormats[11] = "Heading 6";
BlockFormats[12] = "Menu List";
BlockFormats[13] = "Normal";
BlockFormats[14] = "Numbered List";
// List of available font sizes
var FontSizes = new Array();
FontSizes[0] = "1";
FontSizes[1] = "2";
FontSizes[2] = "3";
FontSizes[3] = "4";
FontSizes[4] = "5";
FontSizes[5] = "6";
FontSizes[6] = "7";
// Order of available commands in toolbar one
var buttonName = new Array();
buttonName[0] = "bold";
buttonName[1] = "italic";
buttonName[2] = "underline";
//buttonName[3] = "strikethrough";
buttonName[4] = "seperator";
buttonName[5] = "subscript";
buttonName[6] = "superscript";
buttonName[7] = "seperator";
buttonName[8] = "justifyleft";
buttonName[9] = "justifycenter";
buttonName[10] = "justifyright";
buttonName[11] = "seperator";
buttonName[12] = "unorderedlist";
buttonName[13] = "orderedlist";
buttonName[14] = "outdent";
buttonName[15] = "indent";
// Order of available commands in toolbar two
var buttonName2 = new Array();
buttonName2[0] = "forecolor";
buttonName2[1] = "backcolor";
buttonName2[2] = "seperator";
buttonName2[3] = "cut";
buttonName2[4] = "copy";
buttonName2[5] = "paste";
buttonName2[6] = "seperator";
buttonName2[7] = "undo";
buttonName2[8] = "redo";
buttonName2[9] = "seperator";
buttonName2[10] = "inserttable";
buttonName2[11] = "insertimage";
buttonName2[12] = "createlink";
buttonName2[13] = "seperator";
buttonName2[14] = "viewSource";
buttonName2[15] = "seperator";
buttonName2[16] = "help";
// List of available actions and their respective ID and images
var ToolbarList = {
//Name buttonID buttonTitle buttonImage buttonImageRollover
"bold": ['Bold', 'Bold', imagesDir + 'bold.gif', imagesDir + 'bold_on.gif'],
"italic": ['Italic', 'Italic', imagesDir + 'italics.gif', imagesDir + 'italics_on.gif'],
"underline": ['Underline', 'Underline', imagesDir + 'underline.gif', imagesDir + 'underline_on.gif'],
"strikethrough": ['Strikethrough', 'Strikethrough', imagesDir + 'strikethrough.gif', imagesDir + 'strikethrough_on.gif'],
"seperator": ['', '', imagesDir + 'seperator.gif', imagesDir + 'seperator.gif'],
"subscript": ['Subscript', 'Subscript', imagesDir + 'subscript.gif', imagesDir + 'subscript_on.gif'],
"superscript": ['Superscript', 'Superscript', imagesDir + 'superscript.gif', imagesDir + 'superscript_on.gif'],
"justifyleft": ['Justifyleft', 'Justifyleft', imagesDir + 'justify_left.gif', imagesDir + 'justify_left_on.gif'],
"justifycenter": ['Justifycenter', 'Justifycenter', imagesDir + 'justify_center.gif', imagesDir + 'justify_center_on.gif'],
"justifyright": ['Justifyright', 'Justifyright', imagesDir + 'justify_right.gif', imagesDir + 'justify_right_on.gif'],
"unorderedlist": ['InsertUnorderedList', 'InsertUnorderedList',imagesDir + 'list_unordered.gif', imagesDir + 'list_unordered_on.gif'],
"orderedlist": ['InsertOrderedList', 'InsertOrderedList', imagesDir + 'list_ordered.gif', imagesDir + 'list_ordered_on.gif'],
"outdent": ['Outdent', 'Outdent', imagesDir + 'indent_left.gif', imagesDir + 'indent_left_on.gif'],
"indent": ['Indent', 'Indent', imagesDir + 'indent_right.gif', imagesDir + 'indent_right_on.gif'],
"cut": ['Cut', 'Cut', imagesDir + 'cut.gif', imagesDir + 'cut_on.gif'],
"copy": ['Copy', 'Copy', imagesDir + 'copy.gif', imagesDir + 'copy_on.gif'],
"paste": ['Paste', 'Paste', imagesDir + 'paste.gif', imagesDir + 'paste_on.gif'],
"forecolor": ['ForeColor', 'ForeColor', imagesDir + 'forecolor.gif', imagesDir + 'forecolor_on.gif'],
"backcolor": ['BackColor', 'BackColor', imagesDir + 'backcolor.gif', imagesDir + 'backcolor_on.gif'],
"undo": ['Undo', 'Undo', imagesDir + 'undo.gif', imagesDir + 'undo_on.gif'],
"redo": ['Redo', 'Redo', imagesDir + 'redo.gif', imagesDir + 'redo_on.gif'],
"inserttable": ['InsertTable', 'InsertTable', imagesDir + 'insert_table.gif', imagesDir + 'insert_table_on.gif'],
"insertimage": ['InsertImage', 'InsertImage', imagesDir + 'insert_picture.gif', imagesDir + 'insert_picture_on.gif'],
"createlink": ['CreateLink', 'CreateLink', imagesDir + 'insert_hyperlink.gif', imagesDir + 'insert_hyperlink_on.gif'],
"viewSource": ['ViewSource', 'ViewSource', imagesDir + 'view_source.gif', imagesDir + 'view_source_on.gif'],
"viewText": ['ViewText', 'ViewText', imagesDir + 'view_text.gif', imagesDir + 'view_text_on.gif'],
"help": ['Help', 'Help', imagesDir + 'help.gif', imagesDir + 'help_on.gif']
};
/* ---------------------------------------------------------------------- *\
Function : insertAdjacentHTML(), insertAdjacentText() and insertAdjacentElement()
Description : Emulates insertAdjacentHTML(), insertAdjacentText() and
insertAdjacentElement() three functions so they work with
Netscape 6/Mozilla
Notes : by Thor Larholm me@jscript.dk
\* ---------------------------------------------------------------------- */
if(typeof HTMLElement!="undefined" && !HTMLElement.prototype.insertAdjacentElement){
HTMLElement.prototype.insertAdjacentElement = function
(where,parsedNode)
{
switch (where){
case 'beforeBegin':
this.parentNode.insertBefore(parsedNode,this)
break;
case 'afterBegin':
this.insertBefore(parsedNode,this.firstChild);
break;
case 'beforeEnd':
this.appendChild(parsedNode);
break;
case 'afterEnd':
if (this.nextSibling)
this.parentNode.insertBefore(parsedNode,this.nextSibling);
else this.parentNode.appendChild(parsedNode);
break;
}
}
HTMLElement.prototype.insertAdjacentHTML = function
(where,htmlStr)
{
var r = this.ownerDocument.createRange();
r.setStartBefore(this);
var parsedHTML = r.createContextualFragment(htmlStr);
this.insertAdjacentElement(where,parsedHTML)
}
HTMLElement.prototype.insertAdjacentText = function
(where,txtStr)
{
var parsedText = document.createTextNode(txtStr)
this.insertAdjacentElement(where,parsedText)
}
};
// Create viewTextMode global variable and set to 0
// enabling all toolbar commands while in HTML mode
viewTextMode = 0;
/* ---------------------------------------------------------------------- *\
Function : generate_wysiwyg()
Description : replace textarea with wysiwyg editor
Usage : generate_wysiwyg("textarea_id");
Arguments : textarea_id - ID of textarea to replace
\* ---------------------------------------------------------------------- */
function generate_wysiwyg(textareaID) {
// Pass the textareaID to the "n" variable.
var n = textareaID;
// Toolbars width is 2 pixels wider than the wysiwygs
toolbarWidth = parseFloat(wysiwygWidth) + 2;
// Generate WYSIWYG toolbar one
var toolbar;
toolbar = '<table cellpadding="0" cellspacing="0" border="0" class="toolbar1" style="width:' + toolbarWidth + ';"><tr><td width="6"><img src="' +imagesDir+ 'seperator2.gif" alt="" hspace="3"></td>';
// Create IDs for inserting Font Type and Size drop downs
toolbar += '<td width="90"><span id="FontSelect' + n + '"></span></td>';
toolbar += '<td width="60"><span id="FontSizes' + n + '"></span></td>';
// Output all command buttons that belong to toolbar one
for (var i = 0; i <= buttonName.length;) {
if (buttonName[i]) {
var buttonObj = ToolbarList[buttonName[i]];
var buttonID = buttonObj[0];
var buttonTitle = buttonObj[1];
var buttonImage = buttonObj[2];
var buttonImageRollover = buttonObj[3];
if (buttonName[i] == "seperator") {
toolbar += '<td width="12" align="center"><img src="' +buttonImage+ '" border=0 unselectable="on" width="2" height="18" hspace="2"></td>';
}
else {
toolbar += '<td width="22"><img src="' +buttonImage+ '" border=0 unselectable="on" title="' +buttonTitle+ '" id="' +buttonID+ '" class="button" onClick="formatText(this.id,\'' + n + '\');" onmouseover="if(className==\'button\'){className=\'buttonOver\'}; this.src=\'' + buttonImageRollover + '\';" onmouseout="if(className==\'buttonOver\'){className=\'button\'}; this.src=\'' + buttonImage + '\';" unselectable="on" width="20" height="20"></td>';
}
}
i++;
}
toolbar += '<td> </td></tr></table>';
// Generate WYSIWYG toolbar two
var toolbar2;
toolbar2 = '<table cellpadding="0" cellspacing="0" border="0" class="toolbar2" style="width:' + toolbarWidth + ';"><tr><td width="6"><img src="' +imagesDir+ 'seperator2.gif" alt="" hspace="3"></td>';
// Output all command buttons that belong to toolbar two
for (var j = 0; j <= buttonName2.length;) {
if (buttonName2[j]) {
var buttonObj = ToolbarList[buttonName2[j]];
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -