htmlarea.js

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

  // 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.
  function createSelect(txt) {
    var options = null;
    var el = null;
    var cmd = null;
    var customSelects = editor.config.customSelects;
    var context = null;
    switch (txt) {
      case "fontsize":
      case "fontname":
      case "formatblock":
      // the following line retrieves the correct
      // configuration option because the variable name
      // inside the Config object is named the same as the
      // button/select in the toolbar.  For instance, if txt
      // == "formatblock" we retrieve config.formatblock (or
      // a different way to write it in JS is
      // config["formatblock"].
        options = editor.config[txt];
        cmd = txt;
        break;
      default:
      // try to fetch it from the list of registered selects
        cmd = txt;
        var dropdown = customSelects[cmd];
        if (typeof dropdown != "undefined") {
          options = dropdown.options;
          context = dropdown.context;
        } else {
          alert("ERROR [createSelect]:\nCan't find the requested dropdown definition");
        }
        break;
    }
    if (options) {
      el = document.createElement("select");
      var obj = {
        name  : txt, // field name
        element : el,  // the UI element (SELECT)
        enabled : true, // is it enabled?
        text  : false, // enabled in text mode?
        cmd  : cmd, // command ID
        state  : setButtonStatus, // for changing state
        context : context
      };
      tb_objects[txt] = obj;
      for (var i in options) {
        var op = document.createElement("option");
        op.appendChild(document.createTextNode(i));
        op.value = options[i];
        el.appendChild(op);
      }
      HTMLArea._addEvent(el, "change", function () {
        editor._comboSelected(el, txt);
      });
    }
    return el;
  }
  ;
  // END of function: createSelect

  // appends a new button to toolbar
  function createButton(txt) {
    // the element that will be created
    var el = null;
    var btn = null;
    switch (txt) {
      case "separator":
        el = document.createElement("div");
        el.className = "separator";
        break;
      case "space":
        el = document.createElement("div");
        el.className = "space";
        break;
      case "linebreak":
        newLine();
        return false;
      case "textindicator":
        el = document.createElement("div");
        el.appendChild(document.createTextNode("A"));
        el.className = "indicator";
        el.title = HTMLArea.I18N.tooltips.textindicator;
        var obj = {
          name  : txt, // the button name (i.e. 'bold')
          element : el, // the UI element (DIV)
          enabled : true, // is it enabled?
          active  : false, // is it pressed?
          text  : false, // enabled in text mode?
          cmd  : "textindicator", // the command ID
          state  : setButtonStatus // for changing state
        };
        tb_objects[txt] = obj;
        break;
      default:
        btn = editor.config.btnList[txt];
    }
    if (!el && btn) {
      el = document.createElement("div");
      el.title = btn[0];
      el.className = "button";
      // let's just pretend we have a button object, and
      // assign all the needed information to it.
      var obj = {
        name  : txt, // the button name (i.e. 'bold')
        element : el, // the UI element (DIV)
        enabled : true, // is it enabled?
        active  : false, // is it pressed?
        text  : btn[2], // enabled in text mode?
        cmd  : btn[3], // the command ID
        state  : setButtonStatus, // for changing state
        context : btn[4] || null // enabled in a certain context?
      };
      tb_objects[txt] = obj;
      // handlers to emulate nice flat toolbar buttons
      HTMLArea._addEvent(el, "mouseover", function () {
        if (obj.enabled) {
          HTMLArea._addClass(el, "buttonHover");
        }
      });
      HTMLArea._addEvent(el, "mouseout", function () {
        if (obj.enabled) with (HTMLArea) {
          _removeClass(el, "buttonHover");
          _removeClass(el, "buttonActive");
          (obj.active) && _addClass(el, "buttonPressed");
        }
      });
      HTMLArea._addEvent(el, "mousedown", function (ev) {
        if (obj.enabled) with (HTMLArea) {
          _addClass(el, "buttonActive");
          _removeClass(el, "buttonPressed");
          _stopEvent(is_ie ? window.event : ev);
        }
      });
      // when clicked, do the following:
      HTMLArea._addEvent(el, "click", function (ev) {
        if (obj.enabled) with (HTMLArea) {
          _removeClass(el, "buttonActive");
          _removeClass(el, "buttonHover");
          obj.cmd(editor, obj.name, obj);
          _stopEvent(is_ie ? window.event : ev);
        }
      });
      var img = document.createElement("img");
      img.src = editor.imgURL(btn[1]);
      img.style.width = "17px";
      img.style.height = "17px";
      el.appendChild(img);
    } else if (!el) {
      el = createSelect(txt);
    }
    if (el) {
      var tb_cell = document.createElement("td");
      tb_row.appendChild(tb_cell);
      tb_cell.appendChild(el);
    } else {
      alert("FIXME: Unknown toolbar item: " + txt);
    }
    return el;
  }
  ;

  var first = true;
  for (var i in this.config.toolbar) {
    if (!first) {
      createButton("linebreak");
    } else {
      first = false;
    }
    var group = this.config.toolbar[i];
    for (var j in group) {
      var code = group[j];
      if (/^([IT])\[(.*?)\]/.test(code)) {
        // special case, create text label
        var l7ed = RegExp.$1 == "I";
        // localized?
        var label = RegExp.$2;
        if (l7ed) {
          label = HTMLArea.I18N.custom[label];
        }
        var tb_cell = document.createElement("td");
        tb_row.appendChild(tb_cell);
        tb_cell.className = "label";
        tb_cell.innerHTML = label;
      } else {
        createButton(code);
      }
    }
  }

  this._htmlArea.appendChild(toolbar);
};

HTMLArea.prototype._createStatusBar = function() {
  var div = document.createElement("div");
  div.className = "statusBar";
  this._htmlArea.appendChild(div);
  this._statusBar = div;
  //div.appendChild(document.createTextNode(HTMLArea.I18N.msg["Path"] + ": "));
  // creates a holder for the path view
  div = document.createElement("span");
  div.className = "statusBarTree";
  this._statusBarTree = div;
  this._statusBar.appendChild(div);
  if (!this.config.statusBar) {
    // disable it...
    div.style.display = "none";
  }
  div.style.display = "none";
};

// Creates the HTMLArea object and replaces the textarea with it.
HTMLArea.prototype.generate = function () {
  var editor = this;
  // we'll need "this" in some nested functions
  // get the textarea
  var textarea = this._textArea;
  if (typeof textarea == "string") {
    // it's not element but ID
    this._textArea = textarea = document.getElementById(textarea);
  }
  this._ta_size = {
    w: textarea.offsetWidth,
    h: textarea.offsetHeight
  };
  textarea.style.display = "none";

  // create the editor framework
  var htmlarea = document.createElement("div");
  htmlarea.className = "htmlarea";
  this._htmlArea = htmlarea;

  // insert the editor before the textarea.
  textarea.parentNode.insertBefore(htmlarea, textarea);

  if (textarea.form) {
    // we have a form, on submit get the HTMLArea content and
    // update original textarea.
    textarea.form.onsubmit = function() {
      if(CheckForm()){
      editor._textArea.value = editor.getHTML();}
      else return false;
    };
  }

  // add a handler for the "back/forward" case -- on body.unload we save
  // the HTML content into the original textarea.
  window.onunload = function() {
    editor._textArea.value = editor.getHTML();
  };

  // creates & appends the toolbar
  this._createToolbar();

  // create the IFRAME
  var iframe = document.createElement("iframe");
  htmlarea.appendChild(iframe);

  this._iframe = iframe;

  // creates & appends the status bar, if the case
  this._createStatusBar();

  // remove the default border as it keeps us from computing correctly
  // the sizes.  (somebody tell me why doesn't this work in IE)

  if (!HTMLArea.is_ie) {
    iframe.style.borderWidth = "1px";
    // iframe.frameBorder = "1";
    // iframe.marginHeight = "0";
    // iframe.marginWidth = "0";
  }

  // size the IFRAME according to user's prefs or initial textarea
  var height = (this.config.height == "auto" ? (this._ta_size.h + "px") : this.config.height);
  height = parseInt(height);
  var width = (this.config.width == "auto" ? (this._ta_size.w + "px") : this.config.width);
  width = parseInt(width);

  if (!HTMLArea.is_ie) {
    height -= 2;
    width -= 2;
  }

  iframe.style.width = width + "px";
  if (this.config.sizeIncludesToolbar) {
    // substract toolbar height
    height -= this._toolbar.offsetHeight;
    height -= this._statusBar.offsetHeight;
  }
  if (height < 0) {
    height = 0;
  }
  iframe.style.height = height + "px";

  // the editor including the toolbar now have the same size as the
  // original textarea.. which means that we need to reduce that a bit.
  textarea.style.width = iframe.style.width;
  textarea.style.height = iframe.style.height;

  // IMPORTANT: we have to allow Mozilla a short time to recognize the
  // new frame.  Otherwise we get a stupid exception.
  function initIframe() {
    var doc = editor._iframe.contentWindow.document;
    if (!doc) {
      // Try again..
      // FIXME: don't know what else to do here.  Normally
      // we'll never reach this point.
      if (HTMLArea.is_gecko) {
        setTimeout(initIframe, 10);
        return false;