render.richtextarea.js

一个ajax富客户端的ajax类库

/**
 * Component rendering peer: RichTextArea
 */
ExtrasRender.ComponentSync.RichTextArea = Core.extend(EchoArc.ComponentSync, {

    $static: {
        MESSAGES: new Core.ResourceBundle({
            "ColorDialog.Title.Foreground":     "Text Color",
            "ColorDialog.Title.Background":     "Highlight Color",
            "ColorDialog.PromptForeground":     "Foreground:",
            "ColorDialog.PromptBackground":     "Background:",
            "Error.ClipboardAccessDisabled":    "This browser has clipboard access disabled. "
                                                + "Use keyboard shortcuts or change your security settings.",
            "Generic.Cancel":                   "Cancel",
            "Generic.Error":                    "Error",
            "Generic.Ok":                       "Ok",
            "HyperlinkDialog.Title":            "Insert Hyperlink",
            "HyperlinkDialog.PromptURL":        "URL:",
            "HyperlinkDialog.PromptDescription":
                                                "Description Text:",
            "HyperlinkDialog.ErrorDialogTitle": "Cannot Insert Hyperlink",
            "HyperlinkDialog.ErrorDialog.URL":  
                                                "The URL entered is not valid.",
            "ImageDialog.Title":                "Insert Image",
            "ImageDialog.PromptURL":            "URL:",
            "ImageDialog.ErrorDialogTitle":     "Cannot Insert Image",
            "ImageDialog.ErrorDialog.URL":  
                                                "The URL entered is not valid.",
            "Menu.Edit":                        "Edit",
            "Menu.Undo":                        "Undo",
            "Menu.Redo":                        "Redo",
            "Menu.Cut":                         "Cut",
            "Menu.Copy":                        "Copy",
            "Menu.Paste":                       "Paste",
            "Menu.Delete":                      "Delete",
            "Menu.SelectAll":                   "Select All",
            "Menu.Insert":                      "Insert",
            "Menu.InsertImage":                 "Image...",
            "Menu.InsertHyperlink":             "Hyperlink...",
            "Menu.InsertHorizontalRule":        "Horizontal Rule",
            "Menu.InsertTable":                 "Table...",
            "Menu.BulletedList":                "Bulleted List",
            "Menu.NumberedList":                "Numbered List",
            "Menu.Format":                      "Format",
            "Menu.Bold":                        "Bold",
            "Menu.Italic":                      "Italic",
            "Menu.Underline":                   "Underline",
            "Menu.Strikethrough":               "Strikethrough",
            "Menu.Superscript":                 "Superscript",
            "Menu.Subscript":                   "Subscript",
            "Menu.PlainText":                   "Plain Text",
            "Menu.TextStyle":                   "Text Style",
            "Menu.ParagraphStyle":              "Paragraph Style",
            "Menu.Alignment":                   "Alignment",
            "Menu.Left":                        "Left",
            "Menu.Right":                       "Right",
            "Menu.Center":                      "Center",
            "Menu.Justified":                   "Justified",
            "Menu.Indent":                      "Indent",
            "Menu.Outdent":                     "Outdent",
            "Menu.SetForeground":               "Set Text Color...",
            "Menu.SetBackground":               "Set Highlight Color...",
            "Menu.Heading1":                    "Heading 1",
            "Menu.Heading2":                    "Heading 2",
            "Menu.Heading3":                    "Heading 3",
            "Menu.Heading4":                    "Heading 4",
            "Menu.Heading5":                    "Heading 5",
            "Menu.Heading6":                    "Heading 6",
            "Menu.Normal":                      "Normal",
            "Menu.Preformatted":                "Preformatted",
            "TableDialog.Title":                "Insert Table",
            "TableDialog.PromptRows":           "Rows:",
            "TableDialog.PromptColumns":        "Columns:",
            "TableDialog.ErrorDialogTitle":     "Cannot Insert Table",
            "TableDialog.ErrorDialog.Columns":  "The entered columns value is not valid.  "
                                                + "Please specify a number between 1 and 50.",
            "TableDialog.ErrorDialog.Rows":     "The entered rows value is not valid.  Please specify a number between 1 and 50."
        })
    },

    $load: function() {
        EchoRender.registerPeer("ExtrasApp.RichTextArea", this);
    },

    $virtual: {
        getIcons: function() {
            var icons = this._getDefaultIcons();
            var customIcons = this.component.get("icons");
            if (customIcons) {
                for (var x in customIcons) {
                    icons[x] = customIcons[x];
                }
            }
            return icons;
        }
    },
    
    $construct: function() {
        this._msg = ExtrasRender.ComponentSync.RichTextArea.MESSAGES.get(null);
    },
    
    /**
     * Localized messages for rendered locale.
     */
    _msg: null,
    
    /**
     * {Boolean} Flag indicating whether the parent component is a pane, and thus whether the RichTextArea should consume
     * horizontal and vertical space.
     */
    _paneRender: false,

    createComponent: function() {
        var controlsRow;
        
        var contentPane = new EchoApp.ContentPane({
            children: [
                // Menu SplitPane
                new EchoApp.SplitPane({
                    orientation: EchoApp.SplitPane.ORIENTATION_VERTICAL_TOP_BOTTOM,
                    separatorPosition: 26,
                    children: [
                        // Menu Bar
                        new ExtrasApp.MenuBarPane({
                            styleName: this.component.render("menuStyleName"),
                            layoutData: {
                                overflow: EchoApp.SplitPane.OVERFLOW_HIDDEN
                            },
                            model: this._createMainMenuBarModel(),
                            events: {
                                action: Core.method(this, this._processMenuAction)
                            }
                        }),
                        // Main Layout Container
                        new EchoApp.Column({
                            layoutData: {
                                overflow: EchoApp.SplitPane.OVERFLOW_HIDDEN
                            },
                            children: [
                                // Controls Row (control groups added later)
                                controlsRow = new EchoApp.Row({
                                    styleName: this.component.render("toolbarRowStyleName"),
                                    cellSpacing: 10,
                                    insets: 2
                                }),
                                // Text Input Field
                                this._richTextInput = new ExtrasRender.ComponentSync.RichTextArea.InputComponent()
                            ]
                        })
                    ]
                })
            ]
        });
        
        // Undo/Redo Tools
        controlsRow.add(new EchoApp.Row({
            children: [
                this._createToolbarButton("<<<", this._icons.undo, this._msg["Menu.Undo"], this._processCommand, "undo"),
                this._createToolbarButton(">>>", this._icons.redo, this._msg["Menu.Redo"], this._processCommand, "redo")
            ]
        }));
        
        // Font Bold/Italic/Underline Tools
        controlsRow.add(new EchoApp.Row({
            children: [
                this._createToolbarButton("B", this._icons.bold, this._msg["Menu.Bold"], this._processCommand, "bold"),
                this._createToolbarButton("I", this._icons.italic, this._msg["Menu.Italic"], this._processCommand, "italic"),
                this._createToolbarButton("U", this._icons.underline, this._msg["Menu.Underline"], 
                        this._processCommand, "underline")
            ]
        }));
        
        //Super/Subscript Tools
        controlsRow.add(new EchoApp.Row({
            children: [
                this._createToolbarButton("^", this._icons.superscript, this._msg["Menu.Superscript"], 
                        this._processCommand, "superscript"),
                this._createToolbarButton("v", this._icons.subscript,this._msg["Menu.Subscript"], 
                        this._processCommand, "subscript")
            ]
        }));
        
        // Alignment Tools
        controlsRow.add(new EchoApp.Row({
            children: [
                this._createToolbarButton("<-", this._icons.alignmentLeft, this._msg["Menu.Left"], 
                        this._processCommand, "justifyleft"),
                this._createToolbarButton("-|-", this._icons.alignmentCenter, this._msg["Menu.Center"], 
                        this._processCommand, "justifycenter"),
                this._createToolbarButton("->", this._icons.alignmentRight, this._msg["Menu.Right"], 
                        this._processCommand, "justifyright"),
                this._createToolbarButton("||", this._icons.alignmentJustify, this._msg["Menu.Justified"], 
                        this._processCommand, "justifyfull")
            ]
        }));
        
        // Color Tools
        controlsRow.add(new EchoApp.Row({
            children: [
                this._createToolbarButton("FG", this._icons.foreground, this._msg["Menu.SetForeground"], 
                        this._processSetForegroundDialog),
                this._createToolbarButton("BG", this._icons.background, this._msg["Menu.SetBackground"], 
                        this._processSetBackgroundDialog)
            ]
        }));
        
        // Insert Tools
        controlsRow.add(new EchoApp.Row({
            children: [
                this._createToolbarButton("Bulleted List", this._icons.bulletedList, this._msg["Menu.BulletedList"], 
                        this._processCommand, "insertunorderedlist"),
                this._createToolbarButton("Numbered List", this._icons.numberedList, this._msg["Menu.NumberedList"], 
                        this._processCommand, "insertorderedlist"),
                this._createToolbarButton("Horizontal Rule", this._icons.horizontalRule, this._msg["Menu.InsertHorizontalRule"], 
                        this._processCommand, "inserthorizontalrule"),
                this._createToolbarButton("Image", this._icons.image, this._msg["Menu.InsertImage"], 
                        this._processInsertImageDialog),
                this._createToolbarButton("Hyperlink", this._icons.hyperlink, this._msg["Menu.InsertHyperlink"], 
                        this._processInsertHyperlinkDialog),
                this._createToolbarButton("Table", this._icons.table, this._msg["Menu.InsertTable"], 
                        this._processInsertTableDialog)
            ]
        }));
    
        this._richTextInput._richTextArea = this.component;
        
        return contentPane;
    },
    
    _getDefaultIcons: function() {
        return { 
            ok: this.client.getResourceUrl("Extras", "image/richtext/Ok.gif"),
            cancel: this.client.getResourceUrl("Extras", "image/richtext/Cancel.gif"),
            undo: this.client.getResourceUrl("Extras", "image/richtext/Undo.gif"),
            redo: this.client.getResourceUrl("Extras", "image/richtext/Redo.gif"),
            cut: this.client.getResourceUrl("Extras", "image/richtext/Cut.gif"),
            copy: this.client.getResourceUrl("Extras", "image/richtext/Copy.gif"),
            paste: this.client.getResourceUrl("Extras", "image/richtext/Paste.gif"),
            bold: this.client.getResourceUrl("Extras", "image/richtext/Bold.gif"),
            underline: this.client.getResourceUrl("Extras", "image/richtext/Underline.gif"),
            italic: this.client.getResourceUrl("Extras", "image/richtext/Italic.gif"),
            superscript: this.client.getResourceUrl("Extras", "image/richtext/Superscript.gif"),
            subscript: this.client.getResourceUrl("Extras", "image/richtext/Subscript.gif"),
            alignmentLeft: this.client.getResourceUrl("Extras", "image/richtext/AlignLeft.gif"),
            alignmentCenter: this.client.getResourceUrl("Extras", "image/richtext/AlignCenter.gif"),
            alignmentRight: this.client.getResourceUrl("Extras", "image/richtext/AlignRight.gif"),
            alignmentJustify: this.client.getResourceUrl("Extras", "image/richtext/AlignJustify.gif"),
            foreground: this.client.getResourceUrl("Extras", "image/richtext/Foreground.gif"),
            background: this.client.getResourceUrl("Extras", "image/richtext/Background.gif"),
            bulletedList: this.client.getResourceUrl("Extras", "image/richtext/BulletedList.gif"),
            numberedList: this.client.getResourceUrl("Extras", "image/richtext/NumberedList.gif"),
            horizontalRule: this.client.getResourceUrl("Extras", "image/richtext/HorizontalRule.gif"),
            image: this.client.getResourceUrl("Extras", "image/richtext/Image.gif"),
            hyperlink: this.client.getResourceUrl("Extras", "image/richtext/Hyperlink.gif"),
            table: this.client.getResourceUrl("Extras", "image/richtext/Table.gif")
        };
    },
    
    _createMainMenuBarModel: function() {
        return new ExtrasApp.MenuModel(null, null, null, [
            new ExtrasApp.MenuModel(null, this._msg["Menu.Edit"], null, [
                new ExtrasApp.OptionModel("/undo", this._msg["Menu.Undo"], this._icons.undo),
                new ExtrasApp.OptionModel("/redo", this._msg["Menu.Redo"], this._icons.redo),
                new ExtrasApp.SeparatorModel(),
                new ExtrasApp.OptionModel("cut", this._msg["Menu.Cut"], this._icons.cut),
                new ExtrasApp.OptionModel("copy", this._msg["Menu.Copy"], this._icons.copy),
                new ExtrasApp.OptionModel("paste", this._msg["Menu.Paste"], this._icons.paste),
                new ExtrasApp.OptionModel("delete", this._msg["Menu.Delete"], this._icons["delete"]),
                new ExtrasApp.SeparatorModel(),
                new ExtrasApp.OptionModel("/selectall", this._msg["Menu.SelectAll"], this._icons.selectAll)
            ]),
            new ExtrasApp.MenuModel(null, this._msg["Menu.Insert"], null, [
                new ExtrasApp.OptionModel("/insertunorderedlist", this._msg["Menu.BulletedList"], this._icons.bulletedList),
                new ExtrasApp.OptionModel("/insertorderedlist", this._msg["Menu.NumberedList"], this._icons.numberedList),
                new ExtrasApp.SeparatorModel(),
                new ExtrasApp.OptionModel("/inserthorizontalrule", this._msg["Menu.InsertHorizontalRule"],
                        this._icons.horizontalRule),
                new ExtrasApp.OptionModel("insertimage", this._msg["Menu.InsertImage"], this._icons.image),
                new ExtrasApp.OptionModel("inserthyperlink", this._msg["Menu.InsertHyperlink"], this._icons.hyperlink),
                new ExtrasApp.SeparatorModel(),
                new ExtrasApp.OptionModel("inserttable", this._msg["Menu.InsertTable"], this._icons.table)
            ]),
            new ExtrasApp.MenuModel(null, this._msg["Menu.Format"], null, [
                new ExtrasApp.MenuModel(null, this._msg["Menu.TextStyle"], null, [
                    new ExtrasApp.OptionModel("/removeformat",  this._msg["Menu.PlainText"], null),
                    new ExtrasApp.SeparatorModel(),
                    new ExtrasApp.OptionModel("/bold",  this._msg["Menu.Bold"], this._icons.bold),
                    new ExtrasApp.OptionModel("/italic",  this._msg["Menu.Italic"], this._icons.italic),
                    new ExtrasApp.OptionModel("/underline",  this._msg["Menu.Underline"], this._icons.underline),
                    new ExtrasApp.OptionModel("/strikethrough",  this._msg["Menu.Strikethrough"], this._icons.strikethrough),
                    new ExtrasApp.SeparatorModel(),
                    new ExtrasApp.OptionModel("/superscript", this._msg["Menu.Superscript"], this._icons.superscript),
                    new ExtrasApp.OptionModel("/subscript", this._msg["Menu.Subscript"], this._icons.subscript)
                ]),
                new ExtrasApp.MenuModel(null, this._msg["Menu.Format"], null, [
                    new ExtrasApp.OptionModel("/formatblock/<p>", this._msg["Menu.ParagraphStyle"], null),
                    new ExtrasApp.OptionModel("/formatblock/<pre>", this._msg["Menu.Preformatted"], null),
                    new ExtrasApp.OptionModel("/formatblock/<h1>", this._msg["Menu.Heading1"], null),
                    new ExtrasApp.OptionModel("/formatblock/<h2>", this._msg["Menu.Heading2"], null),
                    new ExtrasApp.OptionModel("/formatblock/<h3>", this._msg["Menu.Heading3"], null),
                    new ExtrasApp.OptionModel("/formatblock/<h4>", this._msg["Menu.Heading4"], null),
                    new ExtrasApp.OptionModel("/formatblock/<h5>", this._msg["Menu.Heading5"], null),
                    new ExtrasApp.OptionModel("/formatblock/<h6>", this._msg["Menu.Heading6"], null)
                ]),
                new ExtrasApp.MenuModel(null, this._msg["Menu.Alignment"], null, [
                    new ExtrasApp.OptionModel("/justifyleft",  this._msg["Menu.Left"], this._icons.alignmentLeft),
                    new ExtrasApp.OptionModel("/justifycenter",  this._msg["Menu.Center"], this._icons.alignmentCenter),
                    new ExtrasApp.OptionModel("/justifyright",  this._msg["Menu.Right"], this._icons.alignmentRight),
                    new ExtrasApp.OptionModel("/justifyfull",  this._msg["Menu.Justified"], this._icons.alignmentJustify)
                ]),
                new ExtrasApp.SeparatorModel(),
                new ExtrasApp.OptionModel("/indent",  this._msg["Menu.Indent"], this._icons.indent),
                new ExtrasApp.OptionModel("/outdent",  this._msg["Menu.Outdent"], this._icons.outdent),
                new ExtrasApp.SeparatorModel(),
                new ExtrasApp.OptionModel("foreground",  this._msg["Menu.SetForeground"], this._icons.foreground),
                new ExtrasApp.OptionModel("background",  this._msg["Menu.SetBackground"], this._icons.background)
            ])
        ]);
    },
    
    _createToolbarButton: function(text, icon, toolTipText, eventMethod, actionCommand) {
        var button = new EchoApp.Button({
            actionCommand: actionCommand,
            styleName: this.component.render("toolbarButtonStyleName"),
            text: icon ? null : text,