sync.richtextarea.js

echo3 很炫的ajax框架技术 js 演示demo ajax j2ee 里面有jsp演示代码

                        style.background = Echo.Sync.Color.toHex(
                                parseInt(rgb[1], 10), parseInt(rgb[2], 10), parseInt(rgb[3], 10));
                    }
                }
            }
            node = node.parentNode;
        }
        
        return style;
    },
    
    _getSelection: function() {
        if (Core.Web.Env.BROWSER_INTERNET_EXPLORER) {
            var textRange = this._iframe.contentWindow.document.selection.createRange();
            return {
                node: textRange.parentElement()
            };
        } else {
            var selection = this._iframe.contentWindow.getSelection();
            return {
                node: selection ? selection.anchorNode : null
            };
        }
    },
    
    _insertHtml: function(html) {
        if (Core.Web.Env.BROWSER_INTERNET_EXPLORER) {
            if (!this._selectionRange) {
                this._selectionRange = this._iframe.contentWindow.document.body.createTextRange();
            }
            this._selectionRange.select();
            this._selectionRange.pasteHTML(html);
            this._notifyCursorStyleChange();
            this._storeData();
        } else {
            this.execCommand("inserthtml", html);
        }
        
        this.focusDocument();
        this._forceIERedraw();
    },
    
    _loadData: function() {
        var html = this.component._richTextArea.get("text");
        if (html == null) {
            // Mozilla and Opera has issues with cursor appearing in proper location when text area is devoid of content.
            html = (Core.Web.Env.BROWSER_MOZILLA || Core.Web.Env.BROWSER_OPERA) ? "<br/>" : "";
        }
        if (html == this._renderedHtml) {
            // No update necessary.
            return;
        }

        var contentDocument = this._iframe.contentWindow.document;
        contentDocument.body.innerHTML = html;
        this._renderedHtml = html;
        //FIXME always grabbing focus, this may be undesired...necessary to maintain focus though.
        this.renderFocus();
        this.component._richTextArea.peer._updateIndicators();
    },
    
    _loadRange: function() {
        if (Core.Web.Env.BROWSER_INTERNET_EXPLORER) {
            if (this._selectionRange) {
                this._selectionRange.select();
            }
        }
    },
    
    _notifyCursorStyleChange: function() {
        this._cursorStyleUpdateRequired = false;
        Core.Web.Scheduler.run(Core.method(this, function() {
            this.component._richTextArea.peer._updateIndicators();
        }));
    },
    
    _processProperty: function(e) {
        if (e.propertyName == "text") {
            this._loadData();
        }
    },
    
    _processKeyPress: function(e) {
        if (!this.client || !this.client.verifyInput(this.component)) {
            Core.Web.DOM.preventEventDefault(e);
            return;
        }

        if (e.keyCode == 13) {
            this._fireAction = true;
        }
    },
    
    _processKeyUp: function(e) {
        if (!this.client || !this.client.verifyInput(this.component)) {
            Core.Web.DOM.preventEventDefault(e);
            return;
        }
        
        this.component._richTextArea.peer._markFocused();
        
        this._storeData();
        this._storeRange();
        
        if (this._cursorStyleUpdateRequired || Extras.Sync.RichTextArea.InputPeer._NAVIGATION_KEY_CODES[e.keyCode]) {
            this._notifyCursorStyleChange();
        }
        
        if (this._fireAction) {
            this._fireAction = false;
            this.component._richTextArea.doAction();
        }
    },
    
    _processMouseDown: function(e) {
        if (!this.client || !this.client.verifyInput(this.component)) {
            Core.Web.DOM.preventEventDefault(e);
            return;
        }
    },

    _processMouseUp: function(e) {
        if (!this.client || !this.client.verifyInput(this.component)) {
            Core.Web.DOM.preventEventDefault(e);
            return;
        }

        this._storeRange();
        
        this._notifyCursorStyleChange();
    },
    
    renderAdd: function(update, parentElement) {
        this.component._richTextArea.addListener("property", this._processPropertyRef);
        
        // Create IFRAME container DIV element.
        this._mainDiv = document.createElement("div");
        Echo.Sync.Border.render(this.component._richTextArea.render("border", Extras.RichTextArea.DEFAULT_BORDER), this._mainDiv);
        
        // Create IFRAME element.
        this._iframe = document.createElement("iframe");
        this._iframe.style.width = this.width ? this.width : "100%";

        this._paneRender = this.component._richTextArea.peer._paneRender;
        if (!this._paneRender) {
            this._iframe.style.height = this.height ? this.height : "200px";
        }

        this._iframe.style.border = "0px none";
        this._iframe.frameBorder = "0";
    
        this._mainDiv.appendChild(this._iframe);
    
        parentElement.appendChild(this._mainDiv);
    },
    
    _renderContentDocument: function() {
        // Ensure element is on-screen before rendering content/enabling design mode.
        var element = this._iframe;
        while (element != document.body) {
            if (element == null) {
                // Not added to parent.
                return;
            }
            if (element.style.display == "none") {
                // Not rendered.
                return;
            }
            element = element.parentNode;
        }
        
        var style = "height:100%;width:100%;margin:0px;padding:0px;";
        var foreground = this.component._richTextArea.render("foreground");
        if (foreground) {
            style += "color:" + foreground + ";";
        }
        var background = this.component._richTextArea.render("background");
        if (background) {
            style += "background-color:" + background + ";";
        }
        var backgroundImage = this.component._richTextArea.render("backgroundImage");
        if (backgroundImage) {
            style += "background-attachment: fixed;";
            style += "background-image:url(" + Echo.Sync.FillImage.getUrl(backgroundImage) + ");";
            var backgroundRepeat = Echo.Sync.FillImage.getRepeat(backgroundImage);
            if (backgroundRepeat) {
                style += "background-repeat:" + backgroundRepeat + ";";
            }
            var backgroundPosition = Echo.Sync.FillImage.getPosition(backgroundImage);
            if (backgroundPosition) {
                style += "background-position:" + backgroundPosition + ";";
            }
        }
        
        var text = this.component._richTextArea.get("text");
        var contentDocument = this._iframe.contentWindow.document;
        contentDocument.open();
        contentDocument.write("<html><body tabindex=\"0\" width=\"100%\" height=\"100%\"" +
                (style ? (" style=\"" + style + "\"") : "") + ">" + (text == null ? "" : text) + "</body></html>");
        contentDocument.close();
        if (Core.Web.Env.BROWSER_MOZILLA && !Core.Web.Env.BROWSER_FIREFOX) {
            // workaround for Mozilla (not Firefox)
            var setDesignModeOn = function() {
                contentDocument.designMode = "on";
            };
            setTimeout(setDesignModeOn, 0);
        } else {
            contentDocument.designMode = "on";
        }
        
        Core.Web.Event.add(this._iframe.contentWindow.document, "keypress",  Core.method(this, this._processKeyPress), false);
        Core.Web.Event.add(this._iframe.contentWindow.document, "keyup", Core.method(this, this._processKeyUp), false);
        Core.Web.Event.add(this._iframe.contentWindow.document, "mousedown", Core.method(this, this._processMouseDown), false);
        Core.Web.Event.add(this._iframe.contentWindow.document, "mouseup", Core.method(this, this._processMouseUp), false);

        this._contentDocumentRendered = true;
    },
    
    renderDispose: function(update) {
        this.component._richTextArea.removeListener("property", this._processPropertyRef);
        Core.Web.Event.removeAll(this._iframe.contentWindow.document);
        this._mainDiv = null;
        this._iframe = null;
        this._contentDocumentRendered = false;
        this._selectionRange = null;
    },
    
    renderDisplay: function() {
        if (!this._contentDocumentRendered) {
            this._renderContentDocument();
        }

        var bounds = new Core.Web.Measure.Bounds(this._mainDiv.parentNode);
        
        if (bounds.height) {
            var border = this.component._richTextArea.render("border", Extras.RichTextArea.DEFAULT_BORDER);
            var borderSize = Echo.Sync.Border.getPixelSize(border, "top") + Echo.Sync.Border.getPixelSize(border, "bottom");
    
            var calculatedHeight = (bounds.height < 100 ? 100 : bounds.height - borderSize) + "px";
            if (this._iframe.style.height != calculatedHeight) {
                this._iframe.style.height = calculatedHeight; 
            }
        }
    },

    renderFocus: function() {
        if (Core.Web.Env.BROWSER_SAFARI) {
            // Focus window first to avoid issue where Safari issue with updating content and then focusing.
            window.focus();
        }
        Core.Web.DOM.focusElement(this._iframe.contentWindow);
        this._forceIERedraw();
    },
    
    renderUpdate: function(update) {
        // Not invoked.
    },
    
    _storeData: function() {
        var contentDocument = this._iframe.contentWindow.document;
        var html = contentDocument.body.innerHTML;
        var cleanHtml = Extras.Sync.RichTextArea.Html.clean(html);
        this._renderedHtml = cleanHtml;
        this.component._richTextArea.set("text", cleanHtml);
    },
    
    _storeRange: function() {
        if (Core.Web.Env.BROWSER_INTERNET_EXPLORER) {
            this._selectionRange = this._iframe.contentWindow.document.selection.createRange();
        }
    }
});

Extras.Sync.RichTextArea.MessageDialog = Core.extend(
        Extras.Sync.RichTextArea.AbstractDialog, {
    
    $construct: function(richTextArea, title, message) {
        Extras.Sync.RichTextArea.AbstractDialog.call(this, richTextArea,
                Extras.Sync.RichTextArea.AbstractDialog.TYPE_OK,
                {
                    title: title
                },
                new Echo.Label({
                    text: message,
                    layoutData: {
                        insets: 30 
                    }
                }));
    }
});

Extras.Sync.RichTextArea.TableDialog = Core.extend(
        Extras.Sync.RichTextArea.AbstractDialog, {

    $construct: function(richTextArea) {
        Extras.Sync.RichTextArea.AbstractDialog.call(this, richTextArea,
                Extras.Sync.RichTextArea.AbstractDialog.TYPE_OK_CANCEL,
                {
                    title: richTextArea.peer._msg["TableDialog.Title"], 
                    icon: richTextArea.peer._icons.table
                },
                new Echo.Grid({
                    insets: 10,
                    children: [
                        new Echo.Label({
                            text: richTextArea.peer._msg["TableDialog.PromptRows"],
                            layoutData: {
                                alignment: "trailing"
                            }
                        }),
                        this._rowsField = new Echo.TextField({
                            text: "2",
                            width: 100   
                        }),
                        new Echo.Label({
                            text: