richtextcanvas.js

javascript 很酷的类库

    // Override _setHandleRect() to always size the IFRAME to match the size of the 
    // handle.
    _setHandleRect : function (left, top, width, height) {
        this.Super("_setHandleRect", arguments);
        
        
        if (this._useDesignMode()) {
            var cf = this.getContentFrame();
            if (cf != null) {
                var innerWidth = this.getContentFrameWidth(), innerHeight = this.getContentFrameHeight();
                cf.style.width = innerWidth + "px";
                cf.style.height = innerHeight + "px";
            }
        }
    },
    
    // Override getScrollHeight() / width to look at the IFRAME body scroll height, since the 
    // IFRAME will always be sized to 100%, making the scroll size of the widget handle always 
    // equal to the specified size.
    getScrollWidth : function (calculateNewValue) {
        if ((this._scrollWidth && !calculateNewValue) || !this._useDesignMode()) 
            return this.Super("getScrollWidth", arguments);
        
        var cb = this.getContentBody();
        if (!cb) return this.Super("getScrollWidth", arguments);

        // cache the scrollWidth for next time this method is called.
        this._scrollWidth = isc.Element.getScrollWidth(cb);
        return this._scrollWidth;
    },
    
    getScrollHeight: function (calculateNewValue) {
        if ((this._scrollHeight && !calculateNewValue) || !this._useDesignMode()) 
            return this.Super("getScrollHeight", arguments);
        
        var cb = this.getContentBody();
        if (!cb) return this.Super("getScrollHeight", arguments);
        
        this._scrollHeight = isc.Element.getScrollHeight(cb);
        return this._scrollHeight;
    },
    
    // --------------------------------------
    
    
    
    
    
    // _rememberSelection() - saves out the current selection position, so we can re-set it
    // when this element regains focus. Only used in IE.
    
    _rememberSelection : function () {
        if (!isc.Browser.isIE) return;

        // Check whether we currently have selection before proceeding - otherwise we could
        // remember some text range outside our handle.
        if (!this._hasSelection()) return;     

        this._savedSelection = document.selection.createRange();
        // Also remember the content of the selection. If the content changes, we don't
        // want a call to '_resetSelection' to select the new text. 
        this._oldSelectionText = this._savedSelection.text;
        // this.logWarn("just saved selection :"+ Log.echo(this._savedSelection));
    },    
    
    // _hasSelection() - Is the current document selection within the RichTextCanvas?
    // Used by _rememberSelection() [IE only]
    _hasSelection : function () {
    
        if (!this.isDrawn()) return false

        if (!isc.Browser.isIE) return;

        
        if (this._useDesignMode()) {
            return (this.getActiveElement() == this.getContentFrame());
        }
        
            
        
        var handle = this.getHandle();
        if (!handle) return false;
        
        var selElement = isc.Element._getElementFromSelection();
        if (!selElement) return false;
        
        return (handle == selElement || handle.contains(selElement));
    },
    
    // Remember the selection every time it changes, so we can reset the selection on focus 
    // or execCommand)
    
    selectionChange : function () {
        if (!this._focussing) this._rememberSelection();
    },
    
    // _resetSelection: resets selection to whatever it was last time this RTC had focus.
    
    _resetSelection : function () {
        if (!this.editable || !this.isDrawn() || !this.isVisible()) return;
        
        if (isc.Browser.isIE) {
            // If no  previous selection, just bail 
            if (!this._savedSelection) return;
            
            // If the content of the range has changed since it was selected, avoid selecting
            // the modified text
            
            if (this._oldSelectionText != this._savedSelection.text) {
                this._savedSelection.collapse(false);
            }
            
            isc.EH._allowTextSelection = true;
            this._savedSelection.select();
            delete isc.EH._allowTextSelection;

        //} else {    //Currently only supported on IE    
        }
        
    },
    
    
    
    // Override setFocus() - when focussing in this widget we want the selection to be
    // whatever it was before the widget was blurred, and for the editable text to have
    // keyboard focus.
    setFocus : function (hasFocus) {
        // Call the Superclass implementation.
        
        this._focussing = true;
        this.Super("setFocus", arguments);
        this._focussing = false;
        
        // If we're using an IFRAME ensure it has focus natively
         
        if (this._useDesignMode()) {
            var win = this.getContentWindow();
            if (!win) return;
            
            if (hasFocus) win.focus()
            
            else window.focus();
        
        // Making this widget's handle contentEditable.
        
        } else {
        
            if (hasFocus) {
            	this._resetSelection();

            }
            
            //else this._rememberSelection();
        }
        
    },
    
    // ------------------- Editor init ------------------
    
    // Override draw to ensure we make the HTML editable when it's done drawing.
    draw : function () {
        this.Super("draw", arguments);
        
        // In Moz / IE, if we're writing out an IFRAME we need to show an event mask
        // for this canvas.
        if (!isc.Browser.isSafari && this._useDesignMode())
            isc.EventHandler.registerMaskableItem(this, true);
        
        // Initialize the contents via _setupEditArea();
        
        if (this._useDesignMode()) {
            this._drawingFrame = true;

        } else {
            this._setupEditArea();
        }

    },
    

    
    redraw : function () {
        var reinitRequired = this._useDesignMode();
        if (reinitRequired) this._rememberContents();
        
        this.Super("redraw", arguments);
        if (reinitRequired) this._drawingFrame = true;
    },

    // _setupEditArea:  Fired when the RichTextCanvas is written into the DOM.
    // This will ensure the appropriate contents and edit state are applied to this widget.
    
    _setupEditArea : function () {
        // Update the HTML to ensure that this is actually editable.

        

        var designMode = this._useDesignMode();
        
        // When using an IFRAME written out in design mode we need to add some custom event
        // handlers.
        if (designMode) {
            // Capture keypresses directly on the IFRAME window so we can fire our
            // keypress handler.
            // Also capture scrolling on the IFRAME directly to update our scroll position,
            // since we're showing native scrollbars on that element.
            
            
            if (!this._editKeyPressHandler) {
                this._editKeyPressHandler = new Function(
                                                 "event", 
                                                 "var returnValue=" + this.getID() + "._iFrameKeyPress(event);" +
                                                 "if(returnValue==false && event.preventDefault)event.preventDefault()"
                                                );
            }
            if (!this._editKeyDownHandler) {
                this._editKeyDownHandler = new Function(
                                                 "event", 
                                                 "var returnValue=" + this.getID() + "._iFrameKeyDown(event);" +
                                                 "if(returnValue==false && event.preventDefault)event.preventDefault()"
                                                );
            }            
            if (!this._editKeyUpHandler) {
                this._editKeyUpHandler = new Function(
                                                 "event", 
                                                 "var returnValue=" + this.getID() + "._iFrameKeyUp(event);" +
                                                 "if(returnValue==false && event.preventDefault)event.preventDefault()"
                                             );
            }                        
            if (!this._editScrollHandler) {
                this._editScrollHandler = new Function(
                                                 "event", 
                                                 "var returnValue=" + this.getID() + "._iFrameScroll(event);" +
                                                 "if(returnValue==false && event.preventDefault)event.preventDefault()"
                                                );
            }    
            var win = this.getContentWindow();
            
            
            
            win.addEventListener("keypress", this._editKeyPressHandler, 
                                                                false);       
            win.addEventListener("keydown", this._editKeyDownHandler, 
                                                                false);       
            win.addEventListener("keyup", this._editKeyUpHandler, 
                                                                false);                                                                                                                                                
            
            win.addEventListener("scroll", this._editScrollHandler, 
                                                                    false);        
            var bodyStyle = this.getContentBody().style;
            // Suppress the default margin
            bodyStyle.margin = "0px";
            
            // Apply text-properties from our specified CSS class to the content of the 
            // IFRAME.
            
            var classStyle = isc.Element.getStyleDeclaration(this.className);
            if (classStyle != null) {
                var textStyleAttrs = isc.Canvas.textStyleAttributes;
                
                for (var i = 0; i < textStyleAttrs.length; i++) {
                    var attr = textStyleAttrs[i];
                    bodyStyle[attr] = classStyle[attr];
                }
            }


        }
        
        // In moz, if we want native spell-check behavior enable it here (otherwise
        // explicitly disable it).
        if (isc.Browser.isMoz) {
            this.getContentBody().spellcheck = (!!this.getBrowserSpellCheck())
        }
        
        var editable = (this.editable && !this.isDisabled());
        
        // Actually make the handle editable
        if (!designMode) this._setHandleEditable(editable);
        else {
            
            this.delayCall("_setHandleEditable", [editable,true], 0);
        }

        // set up our initial contents
        //
        // we're calling _setContents() which means we're bypassing hiliting - this is what we
        // want most of the time because this method is called on redraws when the user may
        // have just resized the browser, so there's no reason to recolorize.  But if this is
        // the first time we're drawing, we need to hilite if we have a syntaxHiliter because a
        // contents may have been provided as an init parameter and if we don't do this it
        // won't get syntax hilited.
        //
        // Note: important to do this after all of the above - to make sure the correcty
        // styling is applied the first time - otherwise we get a partially styled rendering
        // which snaps to the fully styled rendering after about a second - even on fast systems.
        if (this.syntaxHiliter && !this.formattedOnce) {
            this.formattedOnce = true;
            this.contents = this.hiliteAndCount(this.contents);
        }
        this._setContents(this.contents);
    },
    
    // ----------------- Event handling ----------------------
    
    // If using designMode, we need a handler for the native keypress event on our IFRAME
    _iFrameKeyPress : function (event) {
        
        // apply the properties (keyName, etc.) to EH.lastEvent     
        isc.EH.getKeyEventProperties(event); 
        // Fall through to standard handling, making sure this widget is logged as the 
        // keyTarget       
        return isc.EH.handleKeyPress(event, {keyTarget:this});        
    },
    _iFrameKeyDown : function (event) {