htmlarea.js

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

      break;

      default :
      {
        width = /[^0-9]/.test(this.config.width) ? this.config.width : this.config.width + 'px';
      }
      break;
    }

    switch(this.config.height)
    {
      case 'auto':
      {
        height = this._initial_ta_size.h;
      }
      break;

      default :
      {
        height = /[^0-9]/.test(this.config.height) ? this.config.height : this.config.height + 'px';
      }
      break;
    }

    this.sizeEditor(width, height, this.config.sizeIncludesBars, this.config.sizeIncludesPanels);

    HTMLArea.addDom0Event(window, 'resize', function(e) { editor.sizeEditor(); });

    this.notifyOn('panel_change',function(){editor.sizeEditor();});
  };

  /**
   *  Size the editor to a specific size, or just refresh the size (when window resizes for example)
   *  @param width optional width (CSS specification)
   *  @param height optional height (CSS specification)
   *  @param includingBars optional boolean to indicate if the size should include or exclude tool & status bars
   */

  HTMLArea.prototype.sizeEditor = function(width, height, includingBars, includingPanels)
  {

    // We need to set the iframe & textarea to 100% height so that the htmlarea
    // isn't "pushed out" when we get it's height, so we can change them later.
    this._iframe.style.height   = '100%';
    this._textArea.style.height = '100%';
    this._iframe.style.width    = '';
    this._textArea.style.width  = '';

    if(includingBars != null)     this._htmlArea.sizeIncludesToolbars = includingBars;
    if(includingPanels != null)   this._htmlArea.sizeIncludesPanels   = includingPanels;

    if(width != null)
    {
      this._htmlArea.style.width          = width;
      if(!this._htmlArea.sizeIncludesPanels)
      {
        // Need to add some for l & r panels
        var panel = this._panels.right;
        if(panel.on && panel.panels.length && HTMLArea.hasDisplayedChildren(panel.div))
        {
          this._htmlArea.style.width = this._htmlArea.offsetWidth + parseInt(this.config.panel_dimensions.right);
        }

        var panel = this._panels.left;
        if(panel.on && panel.panels.length && HTMLArea.hasDisplayedChildren(panel.div))
        {
          this._htmlArea.style.width = this._htmlArea.offsetWidth + parseInt(this.config.panel_dimensions.left);
        }
      }
    }

    if(height != null)
    {
      this._htmlArea.style.height         = height;
      if(!this._htmlArea.sizeIncludesToolbars)
      {
        // Need to add some for toolbars
        this._htmlArea.style.height         = this._htmlArea.offsetHeight + this._toolbar.offsetHeight + this._statusBar.offsetHeight;
      }

      if(!this._htmlArea.sizeIncludesPanels)
      {
        // Need to add some for l & r panels
        var panel = this._panels.top;
        if(panel.on && panel.panels.length && HTMLArea.hasDisplayedChildren(panel.div))
        {
          this._htmlArea.style.height = this._htmlArea.offsetHeight + parseInt(this.config.panel_dimensions.top);
        }

        var panel = this._panels.bottom;
        if(panel.on && panel.panels.length && HTMLArea.hasDisplayedChildren(panel.div))
        {
          this._htmlArea.style.height = this._htmlArea.offsetHeight + parseInt(this.config.panel_dimensions.bottom);
        }
      }
    }

    // At this point we have this._htmlArea.style.width & this._htmlArea.style.height
    // which are the size for the OUTER editor area, including toolbars and panels
    // now we size the INNER area and position stuff in the right places.
    width  = this._htmlArea.offsetWidth;
    height = this._htmlArea.offsetHeight;

    // Set colspan for toolbar, and statusbar, rowspan for left & right panels, and insert panels to be displayed
    // into thier rows
    var panels = this._panels;
    var editor = this;
    var col_span = 1;

    function panel_is_alive(pan)
    {
      if(panels[pan].on && panels[pan].panels.length && HTMLArea.hasDisplayedChildren(panels[pan].container))
      {
        panels[pan].container.style.display = '';
        return true;
      }

      // Otherwise make sure it's been removed from the framework
      else
      {
        panels[pan].container.style.display='none';
        return false;
      }
    }

    if(panel_is_alive('left'))
    {
      col_span += 1;      
    }

    if(panel_is_alive('top'))
    {
      // NOP
    }

    if(panel_is_alive('right'))
    {
      col_span += 1;
    }

    if(panel_is_alive('bottom'))
    {
      // NOP
    }

    this._framework.tb_cell.colSpan = col_span;
    this._framework.tp_cell.colSpan = col_span;
    this._framework.bp_cell.colSpan = col_span;
    this._framework.sb_cell.colSpan = col_span;

    // Put in the panel rows, top panel goes above editor row
    if(!this._framework.tp_row.childNodes.length)
    {
      HTMLArea.removeFromParent(this._framework.tp_row);
    }
    else
    {
      if(!HTMLArea.hasParentNode(this._framework.tp_row))
      {
        this._framework.tbody.insertBefore(this._framework.tp_row, this._framework.ler_row);
      }
    }

    // bp goes after the editor
    if(!this._framework.bp_row.childNodes.length)
    {
      HTMLArea.removeFromParent(this._framework.bp_row);
    }
    else
    {
      if(!HTMLArea.hasParentNode(this._framework.bp_row))
      {
        this._framework.tbody.insertBefore(this._framework.bp_row, this._framework.ler_row.nextSibling);
      }
    }

    // finally if the statusbar is on, insert it
    if(!this.config.statusBar)
    {
      HTMLArea.removeFromParent(this._framework.sb_row);
    }
    else
    {
      if(!HTMLArea.hasParentNode(this._framework.sb_row))
      {
        this._framework.table.appendChild(this._framework.sb_row);
      }
    }

    // Size and set colspans, link up the framework
    this._framework.lp_cell.style.width  = this.config.panel_dimensions.left;
    this._framework.rp_cell.style.width  = this.config.panel_dimensions.right;
    this._framework.tp_cell.style.height = this.config.panel_dimensions.top;
    this._framework.bp_cell.style.height = this.config.panel_dimensions.bottom;
    this._framework.tb_cell.style.height = this._toolBar.offsetHeight   + 'px';
    this._framework.sb_cell.style.height = this._statusBar.offsetHeight + 'px';

    var edcellheight = height - this._toolBar.offsetHeight - this._statusBar.offsetHeight;
    if(panel_is_alive('top'))    edcellheight  -= parseInt(this.config.panel_dimensions.top);
    if(panel_is_alive('bottom')) edcellheight  -= parseInt(this.config.panel_dimensions.bottom);;
    this._iframe.style.height    = edcellheight + 'px';

    var edcellwidth = width;
    if(panel_is_alive('left'))  edcellwidth -= parseInt(this.config.panel_dimensions.left);
    if(panel_is_alive('right')) edcellwidth -= parseInt(this.config.panel_dimensions.right);
    this._iframe.style.width     =  edcellwidth + 'px';

    this._textArea.style.height = this._iframe.style.height;
    this._textArea.style.width  = this._iframe.style.width;

    this.notifyOf('resize', {width:this._htmlArea.offsetWidth, height:this._htmlArea.offsetHeight});
  };

  HTMLArea.prototype.addPanel = function(side)
  {
    var div = document.createElement('div');
    div.side = side;
    if(side == 'left' || side == 'right')
    {
      div.style.width = this.config.panel_dimensions[side];
    }
    HTMLArea.addClasses(div, 'panel');
    this._panels[side].panels.push(div);
    this._panels[side].div.appendChild(div);

    this.notifyOf('panel_change', {'action':'add','panel':div});

    return div;
  };

  HTMLArea.prototype.removePanel = function(panel)
  {
    this._panels[panel.side].div.removeChild(panel);
    var clean = [ ];
    for(var i = 0; i < this._panels[panel.side].panels.length; i++)
    {
      if(this._panels[panel.side].panels[i] != panel)
      {
        clean.push(this._panels[panel.side].panels[i]);
      }
    }
    this._panels[panel.side].panels = clean;
    this.notifyOf('panel_change', {'action':'remove','panel':panel});
  };

  HTMLArea.prototype.hidePanel = function(panel)
  {
    if(panel)
    {
      panel.style.display = 'none';
      this.notifyOf('panel_change', {'action':'hide','panel':panel});
    }
  };

  HTMLArea.prototype.showPanel = function(panel)
  {
    if(panel)
    {
      panel.style.display = '';
      this.notifyOf('panel_change', {'action':'show','panel':panel});
    }
  };

  HTMLArea.prototype.hidePanels = function(sides)
  {
    if(typeof sides == 'undefined')
    {
      sides = ['left','right','top','bottom'];
    }

    var reShow = [];
    for(var i = 0; i < sides.length;i++)
    {
      if(this._panels[sides[i]].on)
      {
        reShow.push(sides[i]);
        this._panels[sides[i]].on = false;
      }
    }
    this.notifyOf('panel_change', {'action':'multi_hide','sides':sides});
  };

  HTMLArea.prototype.showPanels = function(sides)
  {
    if(typeof sides == 'undefined')
    {
      sides = ['left','right','top','bottom'];
    }

    var reHide = [];
    for(var i = 0; i < sides.length;i++)
    {
      if(!this._panels[sides[i]].on)
      {
        reHide.push(sides[i]);
        this._panels[sides[i]].on = true;
      }
    }
    this.notifyOf('panel_change', {'action':'multi_show','sides':sides});
  };

  HTMLArea.objectProperties = function(obj)
  {
    var props = [ ];
    for(var x in obj)
    {
      props[props.length] = x;
    }
    return props;
  };

  /*
   * EDITOR ACTIVATION NOTES:
   *  when a page has multiple Xinha editors, ONLY ONE should be activated at any time (this is mostly to
   *  work around a bug in Mozilla, but also makes some sense).  No editor should be activated or focused
   *  automatically until at least one editor has been activated through user action (by mouse-clicking in
   *  the editor).
   */

  HTMLArea.prototype.editorIsActivated = function() {
    try {
      if (HTMLArea.is_gecko) return (this._doc.designMode == 'on');
      else return (this._doc.body.contentEditable);
    } catch (e)
    {
      return false;
    }
  };

  HTMLArea._someEditorHasBeenActivated = false;
  HTMLArea._currentlyActiveEditor      = false;
  HTMLArea.prototype.activateEditor = function()
  {
    // We only want ONE editor at a time to be active
    if(HTMLArea._currentlyActiveEditor)
    {
      if(HTMLArea._currentlyActiveEditor == this) return true;
      HTMLArea._currentlyActiveEditor.deactivateEditor();
    }

    if (HTMLArea.is_gecko && this._doc.designMode != 'on')
    {
      try
      {
        // cannot set design mode if no display
        if (this._iframe.style.display == 'none')
        {
          this._iframe.style.display = '';
          this._doc.designMode = 'on';
          this._iframe.style.display = 'none';
        }
        else
        {
          this._doc.designMode = 'on';
        }
      } catch (e) {}
    }
    else if(!HTMLArea.is_gecko && this._doc.body.contentEditable != true)
    {
      this._doc.body.contentEditable = true;
    }

    // We need to know that at least one editor on the page has been activated
    // this is because we will not focus any editor until an editor has been activated
    HTMLArea._someEd