📄 htmlarea.js
字号:
// htmlArea v3.0 - Copyright (c) 2002-2004 interactivetools.com, inc.// This copyright notice MUST stay intact for use (see license.txt).//// Portions (c) dynarch.com, 2003-2004//// 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.59 2004/02/09 09:38:47 mishoo 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 languageif (typeof _editor_lang == "string") { _editor_lang = _editor_lang.toLowerCase();} else { _editor_lang = "en";}// 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 = ''; }};// load some scripts(function() { var scripts = HTMLArea._scripts = [ _editor_url + "htmlarea.js", _editor_url + "dialog.js", _editor_url + "popupwin.js", _editor_url + "lang/" + _editor_lang + ".js" ]; var head = document.getElementsByTagName("head")[0]; // start from 1, htmlarea.js is already loaded for (var i = 1; i < scripts.length; ++i) { var script = document.createElement("script"); script.src = scripts[i]; head.appendChild(script); }})();// cache some regexpsHTMLArea.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; // 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 = ""; // set to true if you want Word code to be cleaned upon Paste this.killWordOnPaste = false; // 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/"; /** 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", "copy", "cut", "paste", "space", "undo", "redo" ], [ "justifyleft", "justifycenter", "justifyright", "justifyfull", "separator", "lefttoright", "righttoleft", "separator", "insertorderedlist", "insertunorderedlist", "outdent", "indent", "separator", "forecolor", "hilitecolor", "separator", "inserthorizontalrule", "createlink", "insertimage", "inserttable", "htmlmode", "separator", "popupeditor", "separator", "showhelp", "about" ] ]; this.fontname = { "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 = { "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 = { "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); }; // 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");} ], insertorderedlist: [ "Ordered List", "ed_list_num.gif", false, function(e) {e.execCommand("insertorderedlist");} ], insertunorderedlist: [ "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");} ] }; /* 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 in toolbar) { 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); return ta ? (new HTMLArea(ta, config)).generate() : null;};// Creates the toolbar and appends it to the _htmlareaHTMLArea.prototype._createToolbar = function () { var editor = this; // to access this in nested functions var toolbar = document.createElement("div"); this._toolbar = toolbar; toolbar.className = "toolbar"; toolbar.unselectable = "1"; var tb_row = null; var tb_objects = new Object(); this._toolbarObjects = tb_objects; // creates a new line in the toolbar function newLine() { var table = document.createElement("table"); table.border = "0px"; table.cellSpacing = "0px"; table.cellPadding = "0px"; toolbar.appendChild(table); // TBODY is required for IE, otherwise you don't see anything // in the TABLE. var tb_body = document.createElement("tbody"); table.appendChild(tb_body); tb_row = document.createElement("tr"); tb_body.appendChild(tb_row); }; // END of function: newLine // init first line newLine(); // updates the state of a toolbar element. This function is member of // a toolbar element object (unnamed objects created by createButton or // createSelect functions below). function setButtonStatus(id, newval) { var oldval = this[id]; var el = this.element; if (oldval != newval) { switch (id) { case "enabled": if (newval) { HTMLArea._removeClass(el, "buttonDisabled"); el.disabled = false; } else { HTMLArea._addClass(el, "buttonDisabled"); el.disabled = true; } break; case "active": if (newval) { HTMLArea._addClass(el, "buttonPressed"); } else { HTMLArea._removeClass(el, "buttonPressed"); } break; } this[id] = newval; } }; // END of function: setButtonStatus // this function will handle creation of combo boxes. Receives as // parameter the name of a button as defined in the toolBar config. // This function is called from createButton, above, if the given "txt" // doesn't match a button.⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -