htmlarea.js

Hippo CMS是一个以信息为中心的开源内容管理系统。Hippo CMS目标是供中,大型企业来管理其发布在互连网

  if(HTMLArea.is_ie && ((!doc.compatMode) || (doc.compatMode && doc.compatMode == "BackCompat")))
  {
    i_contain = doc.createElement('span');
  }
  else
  {
    i_contain = doc.createElement('div');
    i_contain.style.position = 'relative';
  }

  i_contain.style.overflow = 'hidden';
  i_contain.style.width = "18px";
  i_contain.style.height = "18px";
  i_contain.className    = 'buttonImageContainer';

  var img = null;
  if(typeof imgDef == 'string')
  {
    if(doc._htmlareaImgCache[imgDef])
    {
      img = doc._htmlareaImgCache[imgDef].cloneNode();
    }
    else
    {
      img = doc.createElement("img");
      img.src = imgDef;
      img.style.width = "18px";
      img.style.height = "18px";
      if(use_clone_img)
        doc._htmlareaImgCache[imgDef] = img.cloneNode();
    }
  }
  else
  {
    if(doc._htmlareaImgCache[imgDef[0]])
    {
      img = doc._htmlareaImgCache[imgDef[0]].cloneNode();
    }
    else
    {
      img = doc.createElement("img");
      img.src = imgDef[0];
      img.style.position = 'relative';
      if(use_clone_img)
        doc._htmlareaImgCache[imgDef[0]] = img.cloneNode();
    }
    img.style.top  = imgDef[2] ? ('-' + (18 * (imgDef[2] + 1)) + 'px') : '-18px';
    img.style.left = imgDef[1] ? ('-' + (18 * (imgDef[1] + 1)) + 'px') : '-18px';
  }
  i_contain.appendChild(img);
  return i_contain;
};

HTMLArea.prototype._createStatusBar = function() {
  var statusbar = document.createElement("div");
  statusbar.className = "statusBar";
  this._statusBar = statusbar;
  HTMLArea.freeLater(this, '_statusBar');
  
  // statusbar.appendChild(document.createTextNode(HTMLArea._lc("Path") + ": "));
  // creates a holder for the path view
  div = document.createElement("span");
  div.className = "statusBarTree";
  div.innerHTML = HTMLArea._lc("Path") + ": ";
  this._statusBarTree = div;
  HTMLArea.freeLater(this, '_statusBarTree');
  this._statusBar.appendChild(div);

  div = document.createElement("span");
  div.innerHTML = HTMLArea._lc("You are in TEXT MODE.  Use the [<>] button to switch back to WYSIWYG.");
  div.style.display = "none";
  this._statusBarTextMode = div;
  HTMLArea.freeLater(this, '_statusBarTextMode');
  this._statusBar.appendChild(div);

  if (!this.config.statusBar)
  {
    // disable it...
    statusbar.style.display = "none";
  }

  return statusbar;
};

// 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

  if(typeof Dialog == 'undefined')
  {
    HTMLArea._loadback
      (_editor_url + 'dialog.js', function() { editor.generate(); } );
      return false;
  }

  if(typeof HTMLArea.Dialog == 'undefined')
  {
    HTMLArea._loadback
      (_editor_url + 'inline-dialog.js', function() { editor.generate(); } );
      return false;
  }

  if(typeof PopupWin == 'undefined')
  {
    HTMLArea._loadback
      (_editor_url + 'popupwin.js', function() { editor.generate(); } );
      return false;
  }

  if(_editor_skin != "") {
    var found=false;
    var head = document.getElementsByTagName("head")[0];
    var links = document.getElementsByTagName("link");
    for(var i = 0; i<links.length; i++) {
      if((links[i].rel == "stylesheet")&&(links[i].href == _editor_url + 'skins/' + _editor_skin + '/skin.css'))
        found = true;
    }
    if(!found) {
      var link = document.createElement("link");
      link.type = "text/css";
      link.href = _editor_url + 'skins/' + _editor_skin + '/skin.css';
      link.rel = "stylesheet"
      head.appendChild(link);
    }
  }

  //backwards-compatibility: load FullScreen-Plugin if we find a "popupeditor"-button in the toolbar
  var toolbar = editor.config.toolbar;
  for (var i = toolbar.length; --i >= 0;) {
    for (var j = toolbar[i].length; --j >= 0; ) {
      if (toolbar[i][j]=="popupeditor") {
        if(typeof FullScreen == "undefined") {
          HTMLArea.loadPlugin("FullScreen", function() { editor.generate(); } );
          return false;
        }
        editor.registerPlugin('FullScreen');
      }
    }
  }

  // If this is gecko, set up the paragraph handling now
  if(HTMLArea.is_gecko)
  {
    switch(editor.config.mozParaHandler)
    {
      case 'best':
      {
        if(typeof EnterParagraphs == 'undefined')
        {
          HTMLArea.loadPlugin("EnterParagraphs", function() { editor.generate(); } );
          return false;
        }
        editor.registerPlugin('EnterParagraphs');
      }
      break;

      case 'dirty'   :
      case 'built-in':
      default        :
      {
        // See _editorEvent
      }
      break;
    }
  }

  // create the editor framework, yah, table layout I know, but much easier
  // to get it working correctly this way, sorry about that, patches welcome.

  this._framework =
  {
    'main_div'  :document.createElement('div'),
    'table'     :document.createElement('table'),
    'tbody'     :document.createElement('tbody'), // IE will not show the table if it doesn't have a tbody!
    'tb_row'    :document.createElement('tr'),
    'tb_cell'   :document.createElement('td'), // Toolbar

    'tp_row'   :document.createElement('tr'),
    'tp_cell'   :this._panels.top.container,   // top panel

    'ler_row'   :document.createElement('tr'),
    'lp_cell'   :this._panels.left.container,  // left panel
    'ed_cell'   :document.createElement('td'), // editor
    'rp_cell'   :this._panels.right.container, // right panel

    'bp_row'    :document.createElement('tr'),
    'bp_cell'   :this._panels.bottom.container,// bottom panel

    'sb_row'    :document.createElement('tr'),
    'sb_cell'   :document.createElement('td')  // status bar

  };

  HTMLArea.freeLater(this._framework);
  
  var fw = this._framework;
  fw.main_div.id="main_div_" + this._textArea.id;
  fw.table.border="0";
  fw.table.cellPadding="0";
  fw.table.cellSpacing="0";

  fw.tb_row.style.verticalAlign = 'top';
  fw.tp_row.style.verticalAlign = 'top';
  fw.ler_row.style.verticalAlign= 'top';
  fw.bp_row.style.verticalAlign = 'top';
  fw.sb_row.style.verticalAlign = 'top';
  fw.ed_cell.style.position     = 'relative';

  // Put the cells in the rows        set col & rowspans
  // note that I've set all these so that all panels are showing
  // but they will be redone in sizeEditor() depending on which
  // panels are shown.  It's just here to clarify how the thing
  // is put togethor.
  fw.tb_row.appendChild(fw.tb_cell);  fw.tb_cell.colSpan = 3;

  fw.tp_row.appendChild(fw.tp_cell);  fw.tp_cell.colSpan = 3;

  fw.ler_row.appendChild(fw.lp_cell);
  fw.ler_row.appendChild(fw.ed_cell);
  fw.ler_row.appendChild(fw.rp_cell);

  fw.bp_row.appendChild(fw.bp_cell);  fw.bp_cell.colSpan = 3;

  fw.sb_row.appendChild(fw.sb_cell);  fw.sb_cell.colSpan = 3;

  // Put the rows in the table body
  fw.tbody.appendChild(fw.tb_row);  // Toolbar
  fw.tbody.appendChild(fw.tp_row); // Left, Top, Right panels
  fw.tbody.appendChild(fw.ler_row);  // Editor/Textarea
  fw.tbody.appendChild(fw.bp_row);  // Bottom panel
  fw.tbody.appendChild(fw.sb_row);  // Statusbar

  // and body in the table
  fw.table.appendChild(fw.tbody);
  fw.main_div.appendChild(fw.table);

  var htmlarea = this._framework.table;
  var htmlarea_container = this._framework.main_div;
  
  this._htmlArea = htmlarea;
  HTMLArea.freeLater(this, '_htmlArea');
  htmlarea.className = "htmlarea";

    // create the toolbar and put in the area
  var toolbar = this._createToolbar();
  this._framework.tb_cell.appendChild(toolbar);

    // create the IFRAME & add to container
  var iframe = document.createElement("iframe");
  iframe.src = _editor_url + editor.config.URIs["blank"];
  this._framework.ed_cell.appendChild(iframe);
  this._iframe = iframe;
  this._iframe.className = 'xinha_iframe';
  HTMLArea.freeLater(this, '_iframe');
  
    // creates & appends the status bar
  var statusbar = this._createStatusBar();
  this._framework.sb_cell.appendChild(statusbar);

  // insert Xinha before the textarea.
  var textarea = this._textArea;
  textarea.parentNode.insertBefore(htmlarea_container, textarea);
  textarea.className = 'xinha_textarea';

  // extract the textarea and insert it into the htmlarea
  HTMLArea.removeFromParent(textarea);
  this._framework.ed_cell.appendChild(textarea);


  // Set up event listeners for saving the iframe content to the textarea
  if (textarea.form)
  {
    // onsubmit get the HTMLArea content and update original textarea.
    HTMLArea.prependDom0Event
    (
      this._textArea.form,
      'submit',
      function() {editor._textArea.value = editor.outwardHtml(editor.getHTML()); return true;}
    );

    var initialTAContent = textarea.value;

    // onreset revert the HTMLArea content to the textarea content
    HTMLArea.prependDom0Event
    (
      this._textArea.form,
      'reset',
      function() { editor.setHTML(editor.inwardHtml(initialTAContent)); editor.updateToolbar(); return true; }
    );
  }

  // add a handler for the "back/forward" case -- on body.unload we save
  // the HTML content into the original textarea.
  HTMLArea.prependDom0Event(window, 'unload', function() {textarea.value = editor.outwardHtml(editor.getHTML()); return true; });

  // Hide textarea
  textarea.style.display = "none";

  // Initalize size
  editor.initSize();

  // Add an event to initialize the iframe once loaded.
  editor._iframeLoadDone = false;
  HTMLArea._addEvent
  (
    this._iframe,
    'load',
    function(e)
    {
      if(! editor._iframeLoadDone)
      {
        editor._iframeLoadDone = true;
        editor.initIframe();
      }
      return true;
    }
  );

};

HTMLArea.prototype.sleep= function () {
  this._framework.main_div.style.display = 'none';
}

HTMLArea.prototype.wakeup= function () {
  this._framework.main_div.style.display = 'block';
}


  /**
   * Size the editor according to the INITIAL sizing information.
   * config.width
   *    The width may be set via three ways
   *    auto    = the width is inherited from the original textarea
   *    toolbar = the width is set to be the same size as the toolbar
   *    <set size> = the width is an explicit size (any CSS measurement, eg 100em should be fine)
   *
   * config.height
   *    auto    = the height is inherited from the original textarea
   *    <set size> = an explicit size measurement (again, CSS measurements)
   *
   * config.sizeIncludesBars
   *    true    = the tool & status bars will appear inside the width & height confines
   *    false   = the tool & status bars will appear outside the width & height confines
   *
   */

  HTMLArea.prototype.initSize = function()
  {
    var editor = this;

    var width  = null;
    var height = null;
    switch(this.config.width)
    {
      case 'auto':
      {
        width = this._initial_ta_size.w;
      }
      break;

      case 'toolbar':
      {
        width = this._toolBar.offsetWidth + 'px';
      }