richtextcanvas.js

javascript 很酷的类库

/*
 * Isomorphic SmartClient
 * Version 6.5 (2008-04-30)
 * Copyright(c) 1998-2007 Isomorphic Software, Inc. All rights reserved.
 * "SmartClient" is a trademark of Isomorphic Software, Inc.
 *
 * [e-mail]
 *
 * http://smartclient.com/license
 */





  
 

 
//>	@class RichTextCanvas
//  
//  Canvas to be used for Rich Text Editing
//
//<
isc.ClassFactory.defineClass("RichTextCanvas","Canvas");

isc.RichTextCanvas.addClassProperties({
    // enumerated Justification types
    //CENTER:"center",
    //LEFT:"left",
    //RIGHT:"right",
    FULL:"full",

    //>@classAttr   RichTextCanvas.unsupportedErrorMessage  (string : "Rich text editing not supported in this browser" : [IRW])
    // Message to display to the user if they attempt to access the page in a browser which
    // does not support rich-text-editing
    //<
    
    unsupportedErrorMessage : "Rich text editing not supported in this browser"
});

isc.RichTextCanvas.addProperties({

	editable:true,
    
    // Override 'canSelectText': to allow for most editing actions the user must be able to 
    // select the content from this widget.
    canSelectText:true,
    
    // RTC's are focusable
    canFocus : true,

    // Don't write out a focusProxy for RichTextCanvases - we don't want native keyboard 
    // focus to go to a hidden element - when this Canvas has ISC focus, it should have native
    // keyboard focus too so the user can edit it the value.
    
    _useFocusProxy:false, 
    
    
    overflow:isc.Canvas.AUTO,
    showCustomScrollbars:false,

    // If a syntax rehilite of the entire contents is required, do it this number of
    // milliseconds after the last keystroke (resets to this number every time the user hits a key)
    fullSyntaxHiliteDelay: 3000,
    
    // Don't show a non-breaking space by default
    contents : ""

    // even when hidden the rich text area picks up the bitmap of the area behind it and drags it
    // along as it is scrolled.
    // 
    // XXX not a viable workaround - when hidden in this manner, it fails to show()
//    hideUsingDisplayNone: isc.Browser.isMoz
});

isc.RichTextCanvas.addClassMethods({

    
    //> @classMethod RichTextCanvas.supportsRichTextEditing()    
    //  Does this browser support rich text editing, using the isc.RichTextCanvas class?
    //
    //  @return (boolean)   true if supported by this browser.
    //<
    supportsRichTextEditing : function () {
        var supported = ((isc.Browser.isSafari && isc.Browser.safariVersion >= 312) ||
                         (isc.Browser.isIE) || 
                         // Tested Moz (>=1.4 on Linux / Mac / Windows)
                         //        Firefox (>=1.0 on Linux / Mac / Windows)
                         // Doesn't work on latest camino as of May 17 05 (Version 0.8.4)
                         (isc.Browser.isMoz && !isc.Browser.isCamino) ||
                         isc.Browser.isOpera
                        );
        return supported;
    }
    
});

//!>Deferred
isc.RichTextCanvas.addMethods({

    // On init, verify that we're in a supported browser, and that the overflow is "auto"
    initWidget : function () {
                         
        if (!isc.RichTextCanvas.supportsRichTextEditing()) {
            var errorMessage = isc.RichTextCanvas.unsupportedErrorMessage;
            
            this.logError(errorMessage);
        }
    
        if (this.overflow != isc.Canvas.AUTO) {
            this.logWarn('RichTextCanvas class currently only supports an overflow property of "auto"');
            this.overflow = isc.Canvas.AUTO;
        }
        
        this.Super("initWidget", arguments);
    },
    
    // Override getHandleOverflow - we always have an overflow of "auto" specified on the widget
    // but if we're writing out an editable IFRAME, any scrollbars will show up on the inner 
    // content frame rather than the handle, so we never want to show scrollbars on the handle
    
    _getHandleOverflow : function () {
        if (this._useDesignMode()) {
            var overflow;
            if (this._useMozScrollbarsNone) {
                overflow = "-moz-scrollbars-none";
                this._useMozScrollSize = true;
            } else {
                
                overflow = this._$hidden;
            }
            return overflow;
        } else return this.Super("_getHandleOverflow", arguments);
    },
    
    // getInnerHTML() overridden to write out an editable area.
    getInnerHTML : function () {
    
        // If we're writing out an IFrame with designMode:"On", return the appropriate HTML    
        if (this._useDesignMode()) {
            return this.getIFrameHTML();
        }

        // Otherwise we'll just be setting contentEditable on the standard widget handle.
        //  
        // Note: we used to call Super here, but the Canvas implementation calls getContents()
        // with no args which in this case returns the un-marked-up source, resulting in
        // hilighting breaking on redraw.  In this particular case, return the marked up
        // contents since we'll be assigning to innerHTML
        return this.getContents(true);
    },
    
    // _useDesignMode: Should we achieve our rich text canvas via an IFrame with DesignMode "On",
    // or via a contentEdtiable DIV.
    
    _useDesignMode : function () {
        return isc.Browser.isMoz || isc.Browser.isSafari;
    },

    // ---------- Design Mode / IFRAME handling ------------------
    
    getIFrameHTML : function () {
        
        
        var isSafari = isc.Browser.isSafari,
            URL = isSafari ? isc.Page.getBlankFrameURL() : null,
            
            width = this.getContentFrameWidth() + isc.px,
            height = this.getContentFrameHeight() + isc.px,

        
            srcArray= [
                
                
                

                "<IFRAME STYLE='margin:0px;padding:0px;border:0px;width:",
                                width,";height:",height,";'",

                
                (isSafari || true ? 
                    " src='" + isc.Page.getURL("[HELPERS]empty.html") + "'" : null),
                    

                " ONLOAD='", this.getID(), "._frameLoaded();'",
                
                " ID='", this.getIFrameID(), "'></IFRAME>"
        ];
        //this.logWarn(srcArray.join(""));
        
        return srcArray.join(isc.emptyString);
    },
    
    
    // getBrowserSpellCheck - function to determine if we want to use native browser spellcheck
    // functionality where present.
    
    getBrowserSpellCheck : function () {
        return true;
    }, 

    // _frameLoaded - helper method to notify us that the IFRAME has loaded, so we can
    // set up its contents / editability.
    _frameLoaded : function () {
    
        if (!this._drawingFrame) return;
        delete this._drawingFrame;
        if (!this.isDrawn()) return;
        this._setupEditArea();
    },
    
    // Get the ID for the frame in the DOM
    getIFrameID : function () {
        return this.getID() + "_iframe";
    },
    
    // Get a pointer to the IFRAME content document
    getContentDocument : function () {
        
        if (isc.Browser.isIE) return document;

        
        var win = this.getContentWindow(),
            doc = win ? win.document : null;
            
        if (doc == null) {
            // This can happen validly as the document is not always available immediately 
            // after drawing.
            
            this.logDebug("Unable to get pointer to content document. Content may not be written out");
        }
        return doc;
        
    },
    
    // Get a pointer to the document body
    getContentBody : function () {
        var doc = this.getContentDocument();
        if (doc) return doc.body;
        return null;
    },
    
    // Get a pointer to the IFRAME window object.
    getContentWindow : function () {
        var element = this.getContentFrame();
        
        return element ? element.contentWindow : null;
    },
    
    // get a pointer to the IFRAME element in the DOM
    getContentFrame : function () {
        if (!this._useDesignMode() || !this.isDrawn()) return null;

        return isc.Element.get(this.getIFrameID());
    },
    
    
    // Scrolling / Overflow:
    

    // Override setOverflow() to be a no-op. We've already guaranteed the overflow will be
    // 'auto' when the RichTextCanvas is initialized in initWidget().
    setOverflow : function () {
    
    },
    
    // getScrollHandle()    Returns a pointer to the element that gets natively scrolled by
    // calls to scrollTo().
    // - Overridden to point to the content body if _useDesignMode() is true.
    getScrollHandle : function () {
        if (this._useDesignMode()) return this.getContentBody();

        return this.Super("getScrollHandle", arguments);
    },
    
    // Override the internal adjustOverflow method.
    // If we're showing an IFrame, the default implementation will not reliably calculate 
    // whether scrollbars are visible.
    __adjustOverflow : function () {
        // always call the standard 'adjustOverflow' method to ensure we setHandleRect etc as
        // appropriate.
        this.Super("__adjustOverflow", arguments);    
        
        // If we're not writing out an IFrame we can just do normal overflow adjustment
        // Overflows other than "auto" are not really supported - in this case just return too.
        if (!this._useDesignMode() || this.overflow != isc.Canvas.AUTO) return;

        // Update hscrollOn/ vscrollOn - not reliably set by the standard adjustOverflow logic.
        var scrollHeight = this.getScrollHeight(),
            scrollWidth = this.getScrollWidth(),
            height = this.getHeight(), width = this.getWidth(),
            scrollbarSize = this.getScrollbarSize(),
            hscrollOn = false, vscrollOn = false;

        if (scrollHeight > height) vscrollOn = true;
        if (hscrollOn) width -= scrollbarSize;
        if (scrollWidth > width) hscrollOn = true;
        if (hscrollOn && !vscrollOn && (scrollHeight > height - scrollbarSize)) vscrollOn = true;
 
        this.hscrollOn = hscrollOn;
        this.vscrollOn = vscrollOn;
        
    },

    // methods to return the size for the content frame if we're using design mode.
    
    getContentFrameWidth : function () {
       return this.getWidth() - this.getHMarginBorderPad();
    },
    
    getContentFrameHeight : function () {
       return this.getHeight() - this.getHMarginBorderPad();
    },