📄 htmlarea.js
字号:
// htmlArea v3.0 - Copyright (c) 2003-2005 dynarch.com
// 2002-2003 interactivetools.com, inc.
// This copyright notice MUST stay intact for use (see license.txt).
//
// A free WYSIWYG editor replacement for <textarea> fields.
// For full source code and docs, visit http://www.interactivetools.com/
//
// Version 3.0 developed by Mihai Bazon.
// http://dynarch.com/mishoo/
//
// $Id: htmlarea.js,v 1.2 2005/01/21 06:56:46 djmaze Exp $
if (typeof _editor_url == "string") {
// Leave exactly one backslash at the end of _editor_url
_editor_url = _editor_url.replace(/\x2f*$/, '/');
} else {
alert("WARNING: _editor_url is not set! You should set this variable to the editor files path; it should preferably be an absolute path, like in '/htmlarea/', but it can be relative if you prefer. Further we will try to load the editor files correctly but we'll probably fail.");
_editor_url = '';
}
// make sure we have a language
if (typeof _editor_lang == "string") {
_editor_lang = _editor_lang.toLowerCase();
} else {
_editor_lang = "en";
}
// browser identification
HTMLArea.agt = navigator.userAgent.toLowerCase();
HTMLArea.is_ie = ((HTMLArea.agt.indexOf("msie") != -1) && (HTMLArea.agt.indexOf("opera") == -1));
HTMLArea.is_opera = (HTMLArea.agt.indexOf("opera") != -1);
HTMLArea.is_mac = (HTMLArea.agt.indexOf("mac") != -1);
HTMLArea.is_mac_ie = (HTMLArea.is_ie && HTMLArea.is_mac);
HTMLArea.is_win_ie = (HTMLArea.is_ie && !HTMLArea.is_mac);
HTMLArea.is_gecko = (navigator.product == "Gecko");
// Creates a new HTMLArea object. Tries to replace the textarea with the given
// ID with it.
function HTMLArea(textarea, config) {
if (HTMLArea.checkSupportedBrowser()) {
if (typeof config == "undefined") {
this.config = new HTMLArea.Config();
} else {
this.config = config;
}
this._htmlArea = null;
this._textArea = textarea;
this._editMode = "wysiwyg";
this.plugins = {};
this._timerToolbar = null;
this._timerUndo = null;
this._undoQueue = new Array(this.config.undoSteps);
this._undoPos = -1;
this._customUndo = false;
this._mdoc = document; // cache the document, we need it in plugins
this.doctype = '';
}
};
HTMLArea.onload = function(){};
HTMLArea._scripts = [];
HTMLArea.loadScript = function(url, plugin) {
if (plugin)
url = HTMLArea.getPluginDir(plugin) + '/' + url;
this._scripts.push(url);
};
HTMLArea.init = function() {
var head = document.getElementsByTagName("head")[0];
var current = 0;
var savetitle = document.title;
var evt = HTMLArea.is_ie ? "onreadystatechange" : "onload";
function loadNextScript() {
if (current > 0 && HTMLArea.is_ie &&
!/loaded|complete/.test(window.event.srcElement.readyState))
return;
if (current < HTMLArea._scripts.length) {
var url = HTMLArea._scripts[current++];
document.title = "[HTMLArea: loading script " + current + "/" + HTMLArea._scripts.length + "]";
var script = document.createElement("script");
script.type = "text/javascript";
script.src = url;
script[evt] = loadNextScript;
head.appendChild(script);
} else {
document.title = savetitle;
HTMLArea.onload();
}
};
loadNextScript();
};
HTMLArea.loadScript(_editor_url + "dialog.js");
HTMLArea.loadScript(_editor_url + "popupwin.js");
HTMLArea.loadScript(_editor_url + "lang/" + _editor_lang + ".js");
// cache some regexps
HTMLArea.RE_tagName = /(<\/|<)\s*([^ \t\n>]+)/ig;
HTMLArea.RE_doctype = /(<!doctype((.|\n)*?)>)\n?/i;
HTMLArea.RE_head = /<head>((.|\n)*?)<\/head>/i;
HTMLArea.RE_body = /<body>((.|\n)*?)<\/body>/i;
HTMLArea.Config = function () {
this.version = "3.0";
this.width = "auto";
this.height = "auto";
// enable creation of a status bar?
this.statusBar = true;
// intercept ^V and use the HTMLArea paste command
// If false, then passes ^V through to browser editor widget
this.htmlareaPaste = false;
// maximum size of the undo queue
this.undoSteps = 20;
// the time interval at which undo samples are taken
this.undoTimeout = 500; // 1/2 sec.
// the next parameter specifies whether the toolbar should be included
// in the size or not.
this.sizeIncludesToolbar = true;
// if true then HTMLArea will retrieve the full HTML, starting with the
// <HTML> tag.
this.fullPage = false;
// style included in the iframe document
this.pageStyle = 'body { background-color: white; color: black; font-family: arial,helvetica,sans-serif }';
// set to true if you want Word code to be cleaned upon Paste
this.killWordOnPaste = true;
// enable the 'Target' field in the Make Link dialog
this.makeLinkShowsTarget = true;
// BaseURL included in the iframe document
this.baseURL = document.baseURI || document.URL;
if (this.baseURL && this.baseURL.match(/(.*)\/([^\/]+)/))
this.baseURL = RegExp.$1 + "/";
// URL-s
this.imgURL = "images/";
this.popupURL = "popups/";
// remove tags (these have to be a regexp, or null if this functionality is not desired)
this.htmlRemoveTags = null;
/** CUSTOMIZING THE TOOLBAR
* -------------------------
*
* It is recommended that you customize the toolbar contents in an
* external file (i.e. the one calling HTMLArea) and leave this one
* unchanged. That's because when we (InteractiveTools.com) release a
* new official version, it's less likely that you will have problems
* upgrading HTMLArea.
*/
this.toolbar = [
[ "fontname", "space",
"fontsize", "space",
"formatblock", "space",
"bold", "italic", "underline", "strikethrough", "separator",
"subscript", "superscript", "separator",
"inserthorizontalrule", "createlink", "insertimage", "inserttable"
],
[ "copy", "cut", "paste", "space", "undo", "redo", "space", "removeformat", "killword", "separator" ,
"justifyleft", "justifycenter", "justifyright", "justifyfull", "separator",
"lefttoright", "righttoleft", "separator",
"orderedlist", "unorderedlist", "outdent", "indent", "separator",
"forecolor", "hilitecolor", "separator", "htmlmode" ]
];
this.fontname = {
"— font —": '',
"Arial": 'arial,helvetica,sans-serif',
"Courier New": 'courier new,courier,monospace',
"Georgia": 'georgia,times new roman,times,serif',
"Tahoma": 'tahoma,arial,helvetica,sans-serif',
"Times New Roman": 'times new roman,times,serif',
"Verdana": 'verdana,arial,helvetica,sans-serif',
"impact": 'impact',
"WingDings": 'wingdings'
};
this.fontsize = {
"— size —" : "",
"1 (8 pt)" : "1",
"2 (10 pt)": "2",
"3 (12 pt)": "3",
"4 (14 pt)": "4",
"5 (18 pt)": "5",
"6 (24 pt)": "6",
"7 (36 pt)": "7"
};
this.formatblock = {
"— format —" : "",
"Heading 1": "h1",
"Heading 2": "h2",
"Heading 3": "h3",
"Heading 4": "h4",
"Heading 5": "h5",
"Heading 6": "h6",
"Normal" : "p",
"Address" : "address",
"Formatted": "pre"
};
this.customSelects = {};
function cut_copy_paste(e, cmd, obj) {
e.execCommand(cmd);
};
this.debug = true;
// ADDING CUSTOM BUTTONS: please read below!
// format of the btnList elements is "ID: [ ToolTip, Icon, Enabled in text mode?, ACTION ]"
// - ID: unique ID for the button. If the button calls document.execCommand
// it's wise to give it the same name as the called command.
// - ACTION: function that gets called when the button is clicked.
// it has the following prototype:
// function(editor, buttonName)
// - editor is the HTMLArea object that triggered the call
// - buttonName is the ID of the clicked button
// These 2 parameters makes it possible for you to use the same
// handler for more HTMLArea objects or for more different buttons.
// - ToolTip: default tooltip, for cases when it is not defined in the -lang- file (HTMLArea.I18N)
// - Icon: path to an icon image file for the button (TODO: use one image for all buttons!)
// - Enabled in text mode: if false the button gets disabled for text-only mode; otherwise enabled all the time.
this.btnList = {
bold: [ "Bold", "ed_format_bold.gif", false, function(e) {e.execCommand("bold");} ],
italic: [ "Italic", "ed_format_italic.gif", false, function(e) {e.execCommand("italic");} ],
underline: [ "Underline", "ed_format_underline.gif", false, function(e) {e.execCommand("underline");} ],
strikethrough: [ "Strikethrough", "ed_format_strike.gif", false, function(e) {e.execCommand("strikethrough");} ],
subscript: [ "Subscript", "ed_format_sub.gif", false, function(e) {e.execCommand("subscript");} ],
superscript: [ "Superscript", "ed_format_sup.gif", false, function(e) {e.execCommand("superscript");} ],
justifyleft: [ "Justify Left", "ed_align_left.gif", false, function(e) {e.execCommand("justifyleft");} ],
justifycenter: [ "Justify Center", "ed_align_center.gif", false, function(e) {e.execCommand("justifycenter");} ],
justifyright: [ "Justify Right", "ed_align_right.gif", false, function(e) {e.execCommand("justifyright");} ],
justifyfull: [ "Justify Full", "ed_align_justify.gif", false, function(e) {e.execCommand("justifyfull");} ],
orderedlist: [ "Ordered List", "ed_list_num.gif", false, function(e) {e.execCommand("insertorderedlist");} ],
unorderedlist: [ "Bulleted List", "ed_list_bullet.gif", false, function(e) {e.execCommand("insertunorderedlist");} ],
outdent: [ "Decrease Indent", "ed_indent_less.gif", false, function(e) {e.execCommand("outdent");} ],
indent: [ "Increase Indent", "ed_indent_more.gif", false, function(e) {e.execCommand("indent");} ],
forecolor: [ "Font Color", "ed_color_fg.gif", false, function(e) {e.execCommand("forecolor");} ],
hilitecolor: [ "Background Color", "ed_color_bg.gif", false, function(e) {e.execCommand("hilitecolor");} ],
inserthorizontalrule: [ "Horizontal Rule", "ed_hr.gif", false, function(e) {e.execCommand("inserthorizontalrule");} ],
createlink: [ "Insert Web Link", "ed_link.gif", false, function(e) {e.execCommand("createlink", true);} ],
insertimage: [ "Insert/Modify Image", "ed_image.gif", false, function(e) {e.execCommand("insertimage");} ],
inserttable: [ "Insert Table", "insert_table.gif", false, function(e) {e.execCommand("inserttable");} ],
htmlmode: [ "Toggle HTML Source", "ed_html.gif", true, function(e) {e.execCommand("htmlmode");} ],
/* popupeditor: [ "Enlarge Editor", "fullscreen_maximize.gif", true, function(e) {e.execCommand("popupeditor");} ], */
about: [ "About this editor", "ed_about.gif", true, function(e) {e.execCommand("about");} ],
showhelp: [ "Help using editor", "ed_help.gif", true, function(e) {e.execCommand("showhelp");} ],
undo: [ "Undoes your last action", "ed_undo.gif", false, function(e) {e.execCommand("undo");} ],
redo: [ "Redoes your last action", "ed_redo.gif", false, function(e) {e.execCommand("redo");} ],
cut: [ "Cut selection", "ed_cut.gif", false, cut_copy_paste ],
copy: [ "Copy selection", "ed_copy.gif", false, cut_copy_paste ],
paste: [ "Paste from clipboard", "ed_paste.gif", false, cut_copy_paste ],
lefttoright: [ "Direction left to right", "ed_left_to_right.gif", false, function(e) {e.execCommand("lefttoright");} ],
righttoleft: [ "Direction right to left", "ed_right_to_left.gif", false, function(e) {e.execCommand("righttoleft");} ],
removeformat: [ "Remove formatting", "ed_rmformat.gif", false, function(e) {e.execCommand("removeformat");} ],
print: [ "Print document", "ed_print.gif", false, function(e) {e._iframe.contentWindow.print();} ],
killword: [ "Clear MSOffice tags", "ed_killword.gif", false, function(e) {e.execCommand("killword");} ]
};
/* ADDING CUSTOM BUTTONS
* ---------------------
*
* It is recommended that you add the custom buttons in an external
* file and leave this one unchanged. That's because when we
* (InteractiveTools.com) release a new official version, it's less
* likely that you will have problems upgrading HTMLArea.
*
* Example on how to add a custom button when you construct the HTMLArea:
*
* var editor = new HTMLArea("your_text_area_id");
* var cfg = editor.config; // this is the default configuration
* cfg.btnList["my-hilite"] =
* [ function(editor) { editor.surroundHTML('<span style="background:yellow">', '</span>'); }, // action
* "Highlight selection", // tooltip
* "my_hilite.gif", // image
* false // disabled in text mode
* ];
* cfg.toolbar.push(["linebreak", "my-hilite"]); // add the new button to the toolbar
*
* An alternate (also more convenient and recommended) way to
* accomplish this is to use the registerButton function below.
*/
// initialize tooltips from the I18N module and generate correct image path
for (var i in this.btnList) {
var btn = this.btnList[i];
btn[1] = _editor_url + this.imgURL + btn[1];
if (typeof HTMLArea.I18N.tooltips[i] != "undefined") {
btn[0] = HTMLArea.I18N.tooltips[i];
}
}
};
/** Helper function: register a new button with the configuration. It can be
* called with all 5 arguments, or with only one (first one). When called with
* only one argument it must be an object with the following properties: id,
* tooltip, image, textMode, action. Examples:
*
* 1. config.registerButton("my-hilite", "Hilite text", "my-hilite.gif", false, function(editor) {...});
* 2. config.registerButton({
* id : "my-hilite", // the ID of your button
* tooltip : "Hilite text", // the tooltip
* image : "my-hilite.gif", // image to be displayed in the toolbar
* textMode : false, // disabled in text mode
* action : function(editor) { // called when the button is clicked
* editor.surroundHTML('<span class="hilite">', '</span>');
* },
* context : "p" // will be disabled if outside a <p> element
* });
*/
HTMLArea.Config.prototype.registerButton = function(id, tooltip, image, textMode, action, context) {
var the_id;
if (typeof id == "string") {
the_id = id;
} else if (typeof id == "object") {
the_id = id.id;
} else {
alert("ERROR [HTMLArea.Config::registerButton]:\ninvalid arguments");
return false;
}
// check for existing id
if (typeof this.customSelects[the_id] != "undefined") {
// alert("WARNING [HTMLArea.Config::registerDropdown]:\nA dropdown with the same ID already exists.");
}
if (typeof this.btnList[the_id] != "undefined") {
// alert("WARNING [HTMLArea.Config::registerDropdown]:\nA button with the same ID already exists.");
}
switch (typeof id) {
case "string": this.btnList[id] = [ tooltip, image, textMode, action, context ]; break;
case "object": this.btnList[id.id] = [ id.tooltip, id.image, id.textMode, id.action, id.context ]; break;
}
};
/** The following helper function registers a dropdown box with the editor
* configuration. You still have to add it to the toolbar, same as with the
* buttons. Call it like this:
*
* FIXME: add example
*/
HTMLArea.Config.prototype.registerDropdown = function(object) {
// check for existing id
if (typeof this.customSelects[object.id] != "undefined") {
// alert("WARNING [HTMLArea.Config::registerDropdown]:\nA dropdown with the same ID already exists.");
}
if (typeof this.btnList[object.id] != "undefined") {
// alert("WARNING [HTMLArea.Config::registerDropdown]:\nA button with the same ID already exists.");
}
this.customSelects[object.id] = object;
};
/** Call this function to remove some buttons/drop-down boxes from the toolbar.
* Pass as the only parameter a string containing button/drop-down names
* delimited by spaces. Note that the string should also begin with a space
* and end with a space. Example:
*
* config.hideSomeButtons(" fontname fontsize textindicator ");
*
* It's useful because it's easier to remove stuff from the defaul toolbar than
* create a brand new toolbar ;-)
*/
HTMLArea.Config.prototype.hideSomeButtons = function(remove) {
var toolbar = this.toolbar;
for (var i = toolbar.length; --i >= 0;) {
var line = toolbar[i];
for (var j = line.length; --j >= 0; ) {
if (remove.indexOf(" " + line[j] + " ") >= 0) {
var len = 1;
if (/separator|space/.test(line[j + 1])) {
len = 2;
}
line.splice(j, len);
}
}
}
};
/** Helper function: replace all TEXTAREA-s in the document with HTMLArea-s. */
HTMLArea.replaceAll = function(config) {
var tas = document.getElementsByTagName("textarea");
for (var i = tas.length; i > 0; (new HTMLArea(tas[--i], config)).generate());
};
/** Helper function: replaces the TEXTAREA with the given ID with HTMLArea. */
HTMLArea.replace = function(id, config) {
var ta = HTMLArea.getElementById("textarea", id);
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -