htmlarea.js

網葉編輯器 ?W葉編輯器 網葉編輯器

  var collapsed = (typeof pos != "undefined");
  if (HTMLArea.is_ie) {
    range = this._doc.body.createTextRange();
    range.moveToElementText(node);
    (collapsed) && range.collapse(pos);
    range.select();
  } else {
    var sel = this._getSelection();
    range = this._doc.createRange();
    range.selectNodeContents(node);
    (collapsed) && range.collapse(pos);
    sel.removeAllRanges();
    sel.addRange(range);
  }
};

/** Call this function to insert HTML code at the current position.  It deletes
 * the selection, if any.
 */
HTMLArea.prototype.insertHTML = function(html) {
  var sel = this._getSelection();
  var range = this._createRange(sel);
  if (HTMLArea.is_ie) {
    range.pasteHTML(html);
  } else {
    // construct a new document fragment with the given HTML
    var fragment = this._doc.createDocumentFragment();
    var div = this._doc.createElement("div");
    div.innerHTML = html;
    while (div.firstChild) {
      // the following call also removes the node from div
      fragment.appendChild(div.firstChild);
    }
    // this also removes the selection
    var node = this.insertNodeAtSelection(fragment);
  }
};

/**
 *  Call this function to surround the existing HTML code in the selection with
 *  your tags.  FIXME: buggy!  This function will be deprecated "soon".
 */
HTMLArea.prototype.surroundHTML = function(startTag, endTag) {
  var html = this.getSelectedHTML();
  // the following also deletes the selection
  this.insertHTML(startTag + html + endTag);
};

/// Retrieve the selected block
HTMLArea.prototype.getSelectedHTML = function() {
  var sel = this._getSelection();
  var range = this._createRange(sel);
  var existing = null;
  if (HTMLArea.is_ie) {
    existing = range.htmlText;
  } else {
    existing = HTMLArea.getHTML(range.cloneContents(), false);
  }
  return existing;
};

// Called when the user clicks on "InsertImage" button
HTMLArea.prototype._insertImage = function() {
  var editor = this;
  // for nested functions
  this._popupDialog("insert_image.html", function(param) {
    if (!param) {  // user must have pressed Cancel
      return false;
    }
    var sel = editor._getSelection();
    var range = editor._createRange(sel);
    editor._doc.execCommand("insertimage", false, param["f_url"]);
    var img = null;
    if (HTMLArea.is_ie) {
      img = range.parentElement();
      // wonder if this works...
      if (img.tagName.toLowerCase() != "img") {
        img = img.previousSibling;
      }
    } else {
      img = range.startContainer.previousSibling;
    }
    for (field in param) {
      var value = param[field];
      if (!value) {
        continue;
      }
      switch (field) {
        case "f_alt"    : img.alt = value; break;
        case "f_border" : img.border = parseInt(value); break;
        case "f_align"  : img.align = value; break;
        case "f_vert"   : img.vspace = parseInt(value); break;
        case "f_horiz"  : img.hspace = parseInt(value); break;
      }
    }
  }, null);
};

// Called when the user clicks the Insert Table button
HTMLArea.prototype._insertTable = function() {
  var sel = this._getSelection();
  var range = this._createRange(sel);
  var editor = this;
  // for nested functions
  this._popupDialog("insert_table.html", function(param) {
    if (!param) {  // user must have pressed Cancel
      return false;
    }
    var doc = editor._doc;
    // create the table element
    var table = doc.createElement("table");
    // assign the given arguments
    for (var field in param) {
      var value = param[field];
      if (!value) {
        continue;
      }
      switch (field) {
        case "f_width"   : table.style.width = value + param["f_unit"]; break;
        case "f_align"   : table.align = value; break;
        case "f_border"  : table.border = parseInt(value); break;
        case "f_spacing" : table.cellspacing = parseInt(value); break;
        case "f_padding" : table.cellpadding = parseInt(value); break;
      }
    }
    var tbody = doc.createElement("tbody");
    table.appendChild(tbody);
    for (var i = 0; i < param["f_rows"]; ++i) {
      var tr = doc.createElement("tr");
      tbody.appendChild(tr);
      for (var j = 0; j < param["f_cols"]; ++j) {
        var td = doc.createElement("td");
        tr.appendChild(td);
        // Mozilla likes to see something inside the cell.
        (HTMLArea.is_gecko) && td.appendChild(doc.createElement("br"));
      }
    }
    if (HTMLArea.is_ie) {
      range.pasteHTML(table.outerHTML);
    } else {
      // insert the table
      editor.insertNodeAtSelection(table);
    }
    return true;
  }, null);
};

// Called when the user clicks on "_insertFlash" button
HTMLArea.prototype._insertFlash = function() {
	var editor = this;	// for nested functions
	this._popupDialog("insert_flash.html", function(param) {
		if (!param) {	// user must have pressed Cancel
			return false;
		}
		if (!param["f_url"]) {	// user must have pressed Cancel
			return false;
		}
		var f_width = param["f_width"];
		if (!f_width) {
			f_width = 400;
		}
		var f_height = param["f_height"];
		if (!f_height) {
			f_height = 300;
		}
		var f_auto = param["f_auto"];
		if (f_auto == 1) {
			f_auto_status = "true";
		} else {
			f_auto_status = "false";
		}

		var insertedcodeforthistime = "<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0' width='" + f_width + "' height='" + f_height + "'><param name='movie' value='" + param["f_url"] + "'><param name='quality' value='high'><param name='play' value='" + f_auto_status +"'><embed src='"  + param["f_url"] + "' quality='high' pluginspage='http://www.macromedia.com/go/getflashplayer' type='application/x-shockwave-flash' width='" +  f_width + "' height='" + f_height + "'></embed></object>";
		editor.insertHTML(insertedcodeforthistime);
		return true;
	}, null);
};

// Called when the user clicks on "_insertFlash" button
HTMLArea.prototype._insertMedia = function() {
	var editor = this;	// for nested functions
	this._popupDialog("insert_media.html", function(param) {
		if (!param) {	// user must have pressed Cancel
			return false;
		}
		if (!param["f_url"]) {
			return false;
		}
		var f_width = param["f_width"];
		if (!f_width) {
			f_width = 400;
		}
		var f_height = param["f_height"];
		if (!f_height) {
			f_height = 100;
		}
		var f_auto = param["f_auto"];
		if (f_auto == 1) {
			f_auto_status = "true";
		} else {
			f_auto_status = "false";
		}

		if (param["f_player"] == 'wmp' ) {
			var insertedcodeforthistime = "<object classid='CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95' class='OBJECT' id='MediaPlayer' align='middle'><param name='autostart' value='" + f_auto_status +"'><param name='Filename' value='"  + param["f_url"] + "'><embed type='application/x-oleobject' codebase='http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701' flename='mp' src='"  + param["f_url"] + "' width='" + f_width + "' height='" + f_height + "'></embed></object>";	
		} else if  (param["f_player"] == 'real' ) {
			var insertedcodeforthistime ="<object classid='clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA' height='" + f_height + "' id='Player' width='" + f_width + "'><param name='autostart' value='" + f_auto +"'><param name='PREFETCH' value='0'><param name='CONTROLS' value='ImageWindow'><param name='CONSOLE' value='_master'><param name='LOOP' value='0'><param name='NUMLOOP' value='0'><param name='SRC' value='"  + param["f_url"] + "'></object></object><br/><object classid=clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA height='32' id='Player' width='" + f_width + "'><param name='AUTOSTART' value='" + f_auto +"'><param name='PREFETCH' value='0'><param name='CONTROLS' value='controlpanel'><param name='CONSOLE' value='_master'><param name='LOOP' value='0'><param name='MAINTAINASPECT' value='0'><param name='SRC' value='"  + param["f_url"] + "'></object>";
		} else {
			return false;
		}
		editor.insertHTML(insertedcodeforthistime);
		return true;
	}, null);
};

// Called when the user clicks on "_insertSmile" button
HTMLArea.prototype._insertSmile = function() {
	var editor = this;	// for nested functions
	this._popupDialog("insert_smile.html", function(param) {
		if (!param) {
			return false;
		}
		if (!param["f_type"]) {
			return false;
		}

		var insertedcodeforthistime = "<img src=\"http://www.niwota.com/info/front/images/smily/"+param["f_type"]+"\">";
		editor.insertHTML(insertedcodeforthistime);
		return true;
	}, null);
};


/***************************************************
 *  Category: EVENT HANDLERS
 ***************************************************/

// el is reference to the SELECT object
// txt is the name of the select field, as in config.toolbar
HTMLArea.prototype._comboSelected = function(el, txt) {
  this.focusEditor();
  var value = el.options[el.selectedIndex].value;
  switch (txt) {
    case "fontname":
    case "fontsize": this.execCommand(txt, false, value); break;
    case "formatblock":
      (HTMLArea.is_ie) && (value = "<" + value + ">");
      this.execCommand(txt, false, value);
      break;
    default:
    // try to look it up in the registered dropdowns
      var dropdown = this.config.customSelects[txt];
      if (typeof dropdown != "undefined") {
        dropdown.action(this);
      } else {
        alert("FIXME: combo box " + txt + " not implemented");
      }
  }
};

// the execCommand function (intercepts some commands and replaces them with
// our own implementation)
HTMLArea.prototype.execCommand = function(cmdID, UI, param) {
  var editor = this;
  // for nested functions
  this.focusEditor();
  switch (cmdID.toLowerCase()) {
    case "htmlmode" : this.setMode(); break;
    case "hilitecolor":
      (HTMLArea.is_ie) && (cmdID = "backcolor");
    case "forecolor":
      this._popupDialog("select_color.html", function(color) {
        if (color) { // selection not canceled
          editor._doc.execCommand(cmdID, false, "#" + color);
        }
      }, HTMLArea._colorToRgb(this._doc.queryCommandValue(cmdID)));
      break;
    case "createlink":
      if (HTMLArea.is_ie || !UI) {
        this._doc.execCommand(cmdID, UI, param);
      } else {
        // browser is Mozilla & wants UI
        var param;
        if ((param = prompt("Enter URL"))) {
          this._doc.execCommand(cmdID, false, param);
        }
      }
      break;
    case "popupeditor":
      if (HTMLArea.is_ie) {
        window.open(this.popupURL("fullscreen.html"), "ha_fullscreen",
                "toolbar=no,location=no,directories=no,status=no,menubar=no," +
                "scrollbars=no,resizable=yes,width=640,height=480");
      } else {
        window.open(this.popupURL("fullscreen.html"), "ha_fullscreen",
                "toolbar=no,menubar=no,personalbar=no,width=640,height=480," +
                "scrollbars=no,resizable=yes");
      }
    // pass this object to the newly opened window
      HTMLArea._object = this;
      break;
    case "inserttable": this._insertTable(); break;
    case "insertimage": this._insertImage(); break;
	case "insertflash": this._insertFlash(); break;
	case "insertmedia": this._insertMedia(); break;
	case "insertsmile": this._insertSmile(); break;
    case "about"    : this._popupDialog("about.html", null, null); break;
    case "showhelp" : window.open("reference.html", "ha_help"); break;
    default: this._doc.execCommand(cmdID, UI, param);
  }
  this.updateToolbar();
  return false;
};

/** A generic event handler for things that happen in the IFRAME's document.
 * This function also handles key bindings. */
HTMLArea.prototype._editorEvent = function(ev) {
  var editor = this;
  var keyEvent = (HTMLArea.is_ie && ev.type == "keydown") || (ev.type == "keypress");
  if (keyEvent && ev.ctrlKey) {
    var sel = null;
    var range = null;
    var key = String.fromCharCode(HTMLArea.is_ie ? ev.keyCode : ev.charCode).toLowerCase();
    var cmd = null;
    var value = null;
    switch (key) {
      case 'a':
        if (!HTMLArea.is_ie) {
          // KEY select all
          sel = this._getSelection();
          sel.removeAllRanges();
          range = this._createRange();
          range.selectNodeContents(this._doc.body);
          sel.addRange(range);
          HTMLArea._stopEvent(ev);
        }
        break;

      // simple key commands follow

      case 'b': cmd = "bold"; break;
      case 'i': cmd = "italic"; break;
      case 'u': cmd = "underline"; break;
      case 's': cmd = "strikethrough"; break;
      case 'l': cmd = "justifyleft"; break;
      case 'e': cmd = "justifycenter"; break;
      case 'r': cmd = "justifyright"; break;
      case 'j': cmd = "justifyfull"; break;

      // headings
      case '1':
      case '2':
      case '3':
      case '4':
      case '5':
      case '6':
        cmd = "formatblock";
        value = "h" + key;
        if (HTMLArea.is_ie) {
          value = "<" + value + ">";
        }
        break;
    }