Page 1 of 2 12 LastLast
Results 1 to 10 of 14

Thread: ?????Ext.form.RichEditor, ???????

  1. #1
    Sencha User
    Join Date
    Aug 2009
    Location
    HangZhou, China
    Posts
    14
    Vote Rating
    0
      0  

    Red face ?????Ext.form.RichEditor, ???????

    Ext.form.RichEditor ??Office 2010???? ??????????? ?????? ??????? ??????????????????????????H1?H2???????? ?????????????????????????????????????????????????????????????
    ???
    Code:
    /**
    * ???????????
    * @class Ext.form.RichEditor
    * @extends Ext.form.HtmlEditor
    */
    
    /*
    * useage:
    *   	var field = new Ext.form.RichEditor({
    *           renderTo:Ext.getBody(),
    *           enableFace:false,
    *           enableUpload: true,   // ???filefield ??
    *           abyPath:'E:/aby/js/ext',
    *           height:500,
    *           width:760
    *       });
    *       
    *       or
    *       
    *       var frm = new Ext.form.FormPanel({
    *       	layout:'fit',
    *       	items : [{
    *       		xtype :'richeditor',
    *       		enableFace:false,
    *       		enableUpload: true,
    *       		name:'demo'
    *       	}],
    *       	renderTo:Ext.getBody()
    *       });
    *       
    *       
    */
    
    Ext.form.RichEditor = Ext.extend(Ext.form.HtmlEditor, {
        enableFace: false,
        hideTools: false,
        enableUpload: false,
        constructor: function (cfg) {
            Ext.apply(this, cfg);
            this.currentPath = this.uploadFolder;
            var splt = this.abyPath.substring(this.abyPath.length - 1);
            if (this.abyPath.length > 1 && (splt == "/" || splt == "\\"))
                this.abyPath = this.abyPath.substring(0, this.abyPath.length - 1);
    
            this.serverUrl = (this.abyPath || "") + "/aby/aspx/upload.aspx";
            Ext.form.RichEditor.superclass.constructor.call(this);
        },
        setReadOnly: function (readOnly) {
            Ext.form.HtmlEditor.superclass.setReadOnly.call(this, readOnly);
            if (this.initialized) {
                if (Ext.isIE) {
                    this.getEditorBody().contentEditable = !readOnly;
                } else {
                    this.setDesignMode(!readOnly);
                }
                var bd = this.getEditorBody();
                if (bd) {
                    bd.style.cursor = this.readOnly ? 'default' : 'text';
                }
                this.disableItems(readOnly);
                this[readOnly ? "hideTool" : "showTool"]();
            }
        },
        createToolbar: function (editor) {
            var me = this, items = [], clip = [], font = [], paragraph = [], edit = [], insert = [];
            var tipsEnabled = Ext.QuickTips && Ext.QuickTips.isEnabled();
    
            function btn(id, text, cfg, toggle, handler) {
                return Ext.apply({
                    itemId: id,
                    text: text,
                    cls: 'x-richedit-common',
                    iconCls: 'x-richedit-' + id,
                    enableToggle: toggle !== false,
                    scope: editor,
                    handler: handler || editor.relayBtnCmd,
                    clickEvent: 'mousedown',
                    tooltip: tipsEnabled ? editor.buttonTips[id] || undefined : undefined,
                    //overflowText: editor.buttonTips[id].title || undefined,
                    tabIndex: -1
                }, cfg);
            }
    
            function btngrp(id, text, items, cfg) {
                return Ext.apply({
                    xtype: 'buttongroup',
                    itemId: id,
                    title: text,
                    items: items
                }, cfg);
            }
    
            clip.push(
    			btn("paste", "??", { rowspan: 2, scale: 'medium', iconAlign: 'top', cls: 'x-btn-as-arrow' }, false),
    			btn("cut", "", { width: 25, height: 25 }, false),
    			btn("copy", "", { width: 25, height: 25 }, false)
        	);
            var fontName = new Ext.form.ComboBox({
                xtype: 'combo',
                store: new Ext.data.ArrayStore({
                    data: [["", "??"], ['??', '??'], ["??", '??']],
                    fields: ["value", 'text']
                }),
                width: 103,
                itemId: 'fontName',
                ctCls: 'x-richedit-font-name',
                typeAhead: true,
                triggerAction: 'all',
                mode: 'local',
                colspan: 4,
                valueField: 'value',
                displayField: 'text',
                listeners: {
                    select: function (c, n, o) {
                    	me.getEditorBody().innerHTML = me.getValue().replace(me.currentSelected,
                    	"<span style='font-family:"+c.getValue()+";'>"+me.currentSelected+"</span>");
                        me.deferFocus();
                        me.currentSelected="";
                    },
                    expand:function(){
                    	me.currentSelected =me.getDoc().selection.createRange().text; 
                    }
                }
            });
            var fontSize = new Ext.form.ComboBox({
                xtype: 'combo',
                itemId: 'fontSize',
                ctCls: 'x-richedit-font-size',
                store: new Ext.data.ArrayStore({
                    data: (function () {
                        var d = [];
                        for (var i = 3; i < 100; i++) {
                            d.push([i + "px", i + "px"])
                        }
                        return d;
                    })(),
                    fields: ["value", 'text']
                }),
                width: 63,
                colspan: 2,
                typeAhead: true,
                triggerAction: 'all',
                mode: 'local',
                valueField: 'value',
                displayField: 'text',
                listeners: {
                    select: function (c, n, o) {                	
                    	me.getEditorBody().innerHTML = me.getValue().replace(me.currentSelected,
                    	"<span style='font-size:"+c.getValue()+";'>"+me.currentSelected+"</span>");
                        //me.execCmd('FontSize', c.getValue());
                        me.deferFocus();
                        me.currentSelected="";
                    },
                    expand:function(){
                    	me.currentSelected =me.getDoc().selection.createRange().text; 
                    }
                }
            });
            var h = new Ext.form.ComboBox({
                xtype: 'combo',
                itemId: 'h',
                ctCls: 'x-richedit-font-size',
                store: new Ext.data.ArrayStore({
                    data: (function () {
                        var d = [];
                        for (var i = 1; i < 6; i++) {
                            d.push(["H" + i, "H" + i])
                        }
                        return d;
                    })(),
                    fields: ["value", 'text']
                }),
                width: 60,
                colspan: 2,
                typeAhead: true,
                triggerAction: 'all',
                mode: 'local',
                valueField: 'value',
                displayField: 'text',
                listeners: {
                    select: function (c, n, o) {
                    	me.getEditorBody().innerHTML = me.getValue().replace(me.currentSelected,
                    	"<"+c.getValue()+">"+me.currentSelected+"</"+c.getValue()+">");
                        me.deferFocus();
                        me.currentSelected="";
                    },
                    expand:function(){
                    	me.currentSelected =me.getDoc().selection.createRange().text; 
                    }
                }
            });
            font.push(
    			fontName, fontSize, h,
    			btn('bold', '', {}, true),
                btn('italic', '', {}, true),
                btn('underline', '', {}, true),
                btn('strikethrough', '', {}, true),
               	{
               	    itemId: 'forecolor',
               	    cls: 'x-btn-icon',
               	    iconCls: 'x-edit-forecolor',
               	    clickEvent: 'mousedown',
               	    tooltip: tipsEnabled ? editor.buttonTips.forecolor || undefined : undefined,
               	    tabIndex: -1,
               	    menu: new Ext.menu.ColorMenu({
               	        allowReselect: true,
               	        focus: Ext.emptyFn,
               	        value: '000000',
               	        plain: true,
               	        listeners: {
               	            scope: this,
               	            select: function (cp, color) {
               	                this.execCmd('forecolor', Ext.isWebKit || Ext.isIE ? '#' + color : color);
               	                this.deferFocus();
               	            }
               	        },
               	        clickEvent: 'mousedown'
               	    })
               	},
                {
                    itemId: 'backcolor',
                    cls: 'x-btn-icon',
                    iconCls: 'x-edit-backcolor',
                    clickEvent: 'mousedown',
                    tooltip: tipsEnabled ? editor.buttonTips.backcolor || undefined : undefined,
                    tabIndex: -1,
                    menu: new Ext.menu.ColorMenu({
                        focus: Ext.emptyFn,
                        value: 'FFFFFF',
                        plain: true,
                        allowReselect: true,
                        listeners: {
                            scope: this,
                            select: function (cp, color) {
                                if (Ext.isGecko) {
                                    this.execCmd('useCSS', false);
                                    this.execCmd('hilitecolor', color);
                                    this.execCmd('useCSS', true);
                                    this.deferFocus();
                                } else {
                                    this.execCmd(Ext.isOpera ? 'hilitecolor' : 'backcolor', Ext.isWebKit || Ext.isIE ? '#' + color : color);
                                    this.deferFocus();
                                }
                            }
                        },
                        clickEvent: 'mousedown'
                    })
                },
    			btn('subscript', '', {}, true),
    			btn('superscript', '', {}, true)
    
    		);
    
            paragraph.push(
    			btn('justifyleft', '', { iconCls: 'x-edit-justifyleft' }),
                btn('justifycenter', '', { iconCls: 'x-edit-justifycenter' }),
                btn('justifyright', '', { iconCls: 'x-edit-justifyright' }),
                btn('justifyright', '', { iconCls: 'x-edit-justifyright' }),
                btn('justifyfull', '', { iconCls: 'x-richedit-justifyfull' }),
                btn('paraformatting', '????', { rowspan: 2, scale: 'medium',
                    iconAlign: 'top', cls: 'x-btn-as-arrow',
                    iconCls: 'x-richedit-paraformatting'
                },
    	            true, me.paraFormatting),
    
                btn('indent', '', {}, false),
                btn('outdent', '', {}, false),
                btn('insertorderedlist', '', { iconCls: 'x-edit-insertorderedlist' }),
                btn('insertunorderedlist', '', { iconCls: 'x-edit-insertunorderedlist' })
    
    
    		);
    
            var findWin = function (btn) {
                var win = new Ext.Window({
                    codeAt: 0,
                    title: '??',
                    layout: 'fit',
                    modal: true,
                    width: 200,
                    height: 100,
                    items: [{
                        xtype: 'form',
                        frame: true,
                        labelWidth: 40,
                        labelAlign: 'right',
                        defaults: { xtype: 'textfield', allowBlank: false, anchor: '100%' },
                        items: [{
                            fieldLabel: '??',
                            value: ''
                        }]
                    }],
                    listeners: {
                        show: function () {
                            this.html = this.old = me.getValue();
                        },
                        close: function () {
                            me.getEditorBody().innerHTML = this.old;
                        }
                    },
                    buttons: [{
                        text: '??',
                        iconCls: '',
                        handler: function () {
                            var txt = win.get(0).get(0).getValue();
                            if (txt) {
                                var html = win.html;
                                var re = new RegExp(txt, "g");
                                if (html.match(re)) {
                                        me.getEditorBody().innerHTML = html.replace(re, "<font color='blue'><b>" +
    								       txt + "</b></font>");
                                } else {
                                    Ext.Msg.alert("??", "?????");
                                }
                            }
                        }
                    }]
                });
                win.show();
            };
            var replaceWin = function (btn) {
                var win = new Ext.Window({
                    codeAt: 0,
                    title: '??',
                    layout: 'fit',
                    modal: true,
                    width: 200,
                    height: 150,
                    items: [{
                        xtype: 'form',
                        frame: true,
                        labelWidth: 40,
                        labelAlign: 'right',
                        defaults: { xtype: 'textfield', allowBlank: false, anchor: '100%' },
                        items: [{
                            fieldLabel: '??',
                            value: ''
                        }, {
                            fieldLabel: '???',
                            value: ''
                        }]
                    }],
                    buttons: [{
                        text: '??',
                        iconCls: '',
                        handler: function () {
                            var txt = win.get(0).get(0).getValue();
                            var rp = win.get(0).get(1).getValue();
                            if (txt) {
                                var html = me.getValue();
                                var re = new RegExp(txt, "g");
                                me.getEditorBody().innerHTML = html.replace(re, rp);
                            }
                        }
                    }]
                });
                win.show();
    
                function demoReplaceClick() {
                    var re = new RegExp(document.demoMatch.regex.value, "g");
                    document.demoMatch.result.value =
    			    document.demoMatch.subject.value.replace(re,
    			      document.demoMatch.replacement.value);
                }
            };
            edit.push(
    			btn('undo', '', {}, false),
                btn('redo', '', {}, false),
                btn('selectall', '', {}, false),
                btn('delete', '', {}, false),
                btn('removeformat', '', {}, false),
                btn('print', '', {}, false),
                btn('find', '', {}, false, findWin),
                btn('replace', '', {}, false, replaceWin),
                btn('saveas', '', {}, false),
                btn('sourceedit', '', { iconCls: 'x-edit-sourceedit' }, true, function (btn) {
                    me.toggleSourceEdit.call(me, !me.sourceEditMode);
                })
    		);
    
            var createLink = function (el) {
                var win = new Ext.Window({
                    title: '????',
                    layout: 'fit',
                    modal: true,
                    width: 300,
                    height: 150,
                    items: [{
                        xtype: 'form',
                        frame: true,
                        labelWidth: 60,
                        labelAlign: 'right',
                        defaults: { xtype: 'textfield', allowBlank: false, anchor: '100%' },
                        items: [{
                            fieldLabel: '????',
                            xtype: 'combo',
                            store: new Ext.data.ArrayStore({
                                data: [['_blank', '?????'], ["_self", '???']],
                                fields: ["value", 'text']
                            }),
                            typeAhead: true,
                            editable: false,
                            allowBlank: true,
                            triggerAction: 'all',
                            mode: 'local',
                            valueField: 'value',
                            displayField: 'text'
                        }, {
                            fieldLabel: '????',
                            value: ''
                        }, {
                            fieldLabel: '????',
                            vtype: 'email',
                            value: me.defaultLinkValue
                        }]
                    }],
                    buttons: [{
                        text: '??',
                        iconCls: '',
                        handler: function () {
                            var os = win.get(0).get(0).getValue() || "_blank";
                            var text = win.get(0).get(1).getValue();
                            var url = win.get(0).get(2).getValue();
                            if (url && text && url != 'http:/' + '/') {
                                me.insertAny(String.format("<a href='{0}' target='{1}' title='{2}'>{2}</a>",
    	        				url, os, text));
                                win.close();
                            }
                        }
    
                    }]
                });
                win.show();
            };
            var createTable = function (el) {
                var win = new Ext.Window({
                    title: '????',
                    layout: 'column',
                    layoutCfg: { columns: 2, columnWidth: 0.49 },
                    modal: true,
                    width: 300,
                    height: 185,
                    defaults: {
                        xtype: 'form',
                        labelWidth: 35,
                        labelAlign: 'right',
                        defaults: {
                            xtype: 'numberfield',
                            value: 0, allowBlank: false,
                            width: 100
                        },
                        border: false,
                        bodyStyle: "padding-top:8px;background:#dfe8f6"
                    },
                    items: [{
                        items: [{
                            fieldLabel: '?',
                            value: 2
                        }, {
                            fieldLabel: '??'
                        }, {
                            fieldLabel: '??'
                        }, {
                            fieldLabel: '??'
                        }]
                    }, {
                        items: [{
                            fieldLabel: '?',
                            value: 2
                        }, {
                            fieldLabel: '??'
                        }, {
                            fieldLabel: '??',
                            xtype: 'combo',
                            store: new Ext.data.ArrayStore({
                                data: [['', '???'], ["left", '???'], ["center", '??'], ["right", '???']],
                                fields: ["value", 'text']
                            }),
                            typeAhead: true,
                            editable: false,
                            allowBlank: true,
                            triggerAction: 'all',
                            mode: 'local',
                            valueField: 'value',
                            displayField: 'text'
                        }, {
                            fieldLabel: '??'
                        }]
                    }],
                    buttons: [{
                        text: '??',
                        iconCls: '',
                        handler: function () {
                            var lf = win.get(0), rf = win.get(1);
                            var rows = lf.get(0).getValue(), cols = rf.get(0).getValue(),
    	        			h = rf.get(1).getValue(), w = lf.get(1).getValue(),
    	        			border = lf.get(2).getValue(), align = rf.get(2).getValue(),
    	        			celsp = lf.get(3).getValue(), celpad = rf.get(3).getValue();
                            var table = "<table " + (h ? "height='" + h + "px' " : "") +
    	        			(w ? "width='" + w + "px' " : "") + (align ? "align=" + align+" " : "") +
    	        			(border ? "border='" + border + "px solid' " : "") +
    	        			(celsp ? "cellspacing='" + celsp + "px' " : "") + (celpad ? "cellpadding='" + celpad+"' " : "") + ">";
                            for (var i = 0; i < rows; i++) {
                                table = table + "<tr>";
                                for (var c = 0; c < cols; c++) {
                                    table = table + "<td>&nbsp;</td>";
                                }
                                table = table + "</tr>";
                            }
                            table = table + "</table>";
                            me.insertAny(table);
                            win.close();
                        }
                    }]
                });
                win.show();
            }
            insert.push(
    			btn('createlink', '', { iconCls: 'x-edit-createlink' }, false, createLink),
    			btn("face", '', { iconCls: 'aby-htmleditor-face' }, false, this.showFace),
    			btn('upload', '', { iconCls: 'aby-htmleditor-upload' }, false, this.upload),
    			btn('browerfile', '', { iconCls: 'aby-htmleditor-browerfile' }, false, this.browerFile),
    
    			btn('table', '', {}, false, createTable)
    		);
            items.push(
    			btngrp("clip", "???", clip, { columns: 2 }),
    			btngrp("font", "? ?", font, { columns: 8, height: 76 }),
    			btngrp("paragraph", "? ?", paragraph, { columns: 5, height: 76 }),
    			btngrp("edit", "? ?", edit, { columns: 5, height: 76 }),
    			btngrp("insert", "? ?", insert, { columns: 5, height: 76 })
    		);
            // build the toolbar
            var tb = new Ext.Toolbar({
                renderTo: this.wrap.dom.firstChild,
                items: items
            });
    
            // stop form submits
            this.mon(tb.el, 'click', function (e) {
                e.preventDefault();
            });
            this.tb = tb;
            this.tb.doLayout();
        },
        insertAny: function (text) {
            if (this.activated) {
                this.insertAtCursor(text);
            } else {
                this.getEditorBody().innerHTML = text;
            }
        },
        showTool: function () {
            this.wrap.dom.firstChild.style.display = 'block';
        },
        hideTool: function () {
            this.wrap.dom.firstChild.style.display = 'none';
        },
        paraFormatting: function () {
            var oBody = this.getEditorBody();
            var oChild = oBody.childNodes;
            for (var i = 0; i < oChild.length; i++) {
                if (oChild[i].tagName) {
    
                    // ??????
                    oChild[i].innerHTML = oChild[i].innerHTML.split('&nbsp;').join('?');
                    oChild[i].innerHTML = oChild[i].innerHTML.replace(/(^[ |?|?]*)|([ |?|?]*$)/g, "");
                    oChild[i].innerHTML = oChild[i].innerHTML.split('?').join('&nbsp;');
    
                    // ???????,?? 2em ?????????h1,h2??,????? 28 ?????????? fontSize ????????
                    if (!oChild[i].style.textIndent) {
                        oChild[i].style.textIndent = '2em';
                        // ?????
                    } else {
                        oChild[i].style.textIndent = '';
                    }
                    // ???
                } else {
                    oBody.innerHTML = '<div style="text-indent:2em;">' + oBody.innerHTML.replace(/(^[ |?]*)|([ |?]*$)/g, ""); +'</div>';
                }
            }
        },
        showFace: function (el) {
            var me = this;
            var win = this.faceWin;
            var selectFace = function (el) {
                var tpl = (me.abyPath || "") + "/aby/resources/images/face/{0}.gif";
                var text = String.format("<img src='{0}' />",
    	        	String.format(tpl, el.getAttribute("imgIndex")));
                if (me.activated) {
                    me.insertAtCursor(text);
                } else {
                    me.getEditorBody().innerHTML = text;
                }
                me.faceWin.hide()
            };
            if (!win) {
                var items = [];
                for (var i = 0; i < 105; i++) {
                    items.push({
                        autoEl: {
                            tag: 'a',
                            href: '##',
                            imgIndex: i,
                            cls: 'aby-htmleditor-facebg',
                            style: "background-position:-" + (((i % 15) * 29)) + "px -" + (parseInt(i / 15) * 29) + "px;"
                        }
                    });
                }
                win = new Ext.QuickTip({
                    autoHide: false,
                    target: el.getEl(),
                    width: 465,
                    anchor: 'top',
                    closable: true,
                    cls: 'aby-htmleditor-fasespace',
                    defaults: {
                        xtype: 'box'
                    },
                    layout: 'column',
                    items: [items]
                });
                this.faceWin = win;
            }
            win.show();
            var md = function (e, dom, cfg) {
                if (dom.getAttribute("imgIndex"))
                    selectFace(dom);
                else
                    e.stopPropagation();
                win.getEl().un('mousedown', md);
            };
            win.getEl().on('mousedown', md);
        },
        browerFile: function (el) {
            var me = this;
            var win = this.browerFileWin;
            if (!win) {
                var queryForm = new Ext.form.FormPanel({
                    region: 'north',
                    height: 40,
                    labelWidth: 50,
                    labelAlign: 'right',
                    bodyStyle: "padding-top:8px;background:#dfe8f6",
                    items: [{
                        fieldLabel: '???',
                        xtype: 'textfield',
                        anchor: '99%',
                        name: 'filename',
                        enableKeyEvents: true,
                        listeners: {
                            keyup: function (txt, e) {
                                try {
                                    files.getStore().filter("fileName", new RegExp(txt.getValue()),
                                    true, false);
                                } catch (e) { }
                            }
                        }
                    }]
                });
                var folder = new Ext.tree.TreePanel({
                    region: 'west',
                    title: '???',
                    headerStyle: "border-top:0px;",
                    width: 120,
                    root: {
                        nodeType: 'async',
                        text: me.uploadFolder,
                        draggable: false,
                        id: me.uploadFolder,
                        expanded: true
                    },
                    loader: new Ext.tree.TreeLoader({
                        dataUrl: me.serverUrl,
                        baseParams:
                        {
                            methodname: 'GetFolder'
                        },
                        requestMethod: "POST",
                        listeners:
                        {
                            "beforeload": function (treeLoader, node) {
                                this.baseParams.path = node.getPath("text");
                            }
                        }
                    }),
                    listeners: {
                        click: function (node, e) {
                            me.currentPath = node.getPath("text");
                            files.getStore().load({ params: { path: me.currentPath} })
                        }
                    }
                });
                var sm = new Ext.grid.RowSelectionModel({ singleSelect: true });
                var files = new Ext.grid.GridPanel({
                    region: 'center',
                    autoExpandColumn: 'bffilename',
                    bodyStyle: "border-top:0px;border-left:0;",
                    sm: sm,
                    columns: [new Ext.grid.RowNumberer(), {
                        dataIndex: 'fileName',
                        header: '???',
                        autoExpandMin: 100,
                        id: 'bffilename'
                    }, {
                        dataIndex: 'fileType',
                        header: '????',
                        width: 100
                    }, {
                        dataIndex: 'date',
                        header: '????',
                        width: 150
                    }],
                    store: new Ext.data.JsonStore({
                        url: me.serverUrl,
                        baseParams: {
                            methodname: 'GetFileByFolder',
                            path: me.uploadFolder
                        },
                        autolLoad: true,
                        fields: ["fileName", "fileType", "date"]
                    }),
                    listeners: {
                        rowcontextmenu: function (g, ri, e) {
                            var fileName = (files.getStore().getAt(ri) || {}).get("fileName");
                            if (fileName) {
                                var o = {
                                    fileName: me.currentPath + "/" + fileName,
                                    type: me.getFileType((files.getStore().getAt(ri) || {}).get("fileType"))
                                }
                                win.hide();
                                me.insertValue.call(me, o);
                                e.preventDefault();
                            }
                        },
                        rowclick: function (g, ri, e) {
                            try {
                                var fileName = (files.getSelectionModel().getSelected() || {}).get("fileName");
                                if (fileName)
                                    new Ext.QuickTip({
                                        target: "",
                                        autoHide: true,
                                        border: false,
                                        trackMouse: true,
                                        html: String.format("<img src='{0}' width=200 />", me.currentPath + "/" + fileName)
                                    }).showAt(e.getXY());
                            } catch (e) { }
                        }
                    }
                });
    
                var fileList = new Ext.Panel({
                    layout: 'border',
                    region: 'center',
                    border: false,
                    items: [folder, files]
                });
    
                win = new Ext.Window({
                    width: 650,
                    height: 450,
                    modal: true,
                    iconCls: el.iconCls,
                    closeAction: 'hide',
                    title: '????',
                    layout: 'border',
                    border: false,
                    items: [queryForm, fileList],
                    buttons: [{
                        text: '??',
                        iconCls: 'aby-icon-close',
                        handler: function () { win.hide(); }
                    }]
                });
                this.browerFileWin = win;
            }
            win.show();
        },
        getFileType: function (ext) {
            switch (ext.toLowerCase()) {
                case ".gif":
                case ".jpg":
                case ".jpeg":
                case ".pne":
                case ".ico":
                    return "images";
                case "swf":
                    return "flash";
                case ".flv":
                case ".mp3":
                case ".mp4":
                case ".aiv":
                case ".rmvb":
                case ".wmp":
                    return "media";
                default:
                    return "any";
            }
        },
        upload: function (el) {
            try {
                var me = this;
                var win = this.uploadWin;
                if (!win) {
                    var item = new Ext.form.FormPanel({
                        labelWidth: 50,
                        border: false,
                        fileUpload: true,
                        labelAlign: 'right',
                        items: [{
                            fieldLabel: '? ?',
                            name: 'htmleditorFile',
                            xtype: 'filefield',
                            buttonText: '??',
                            width: 250,
                            focusUpload: true,
                            listeners: {
                                fileselected: function (el) {
                                    item.form.submit({
                                        url: me.serverUrl,
                                        params: {
                                            methodname: 'Upload',
                                            baseFolder: me.uploadFolder
                                        },
                                        success: me.onUploadCb,
                                        scope: me
                                    });
                                    me.onUpload.call(me, el);
                                }
                            }
                        }]
                    });
                    win = new Ext.QuickTip({
                        autoHide: false,
                        target: el.getEl(),
                        width: 350,
                        anchor: 'top',
                        form: item,
                        closable: true,
                        cls: 'aby-htmleditor-upload',
                        layout: 'fit',
                        items: [item]
                    });
                    this.uploadWin = win;
                } else
                    win.form.form.reset();
                win.show()
            } catch (e) {
                Ext.Msg.alert("??", "???FileField(????)???");
            }
        },
        insertValue: function (o) {
            var text;
            if (o.type == "flash") {
                text = String.format("<a upload=true href='{0}' >{0}</a>", o.fileName);
            } else if (o.type == "images") {
                text = String.format("<img upload=true src='{0}' />", o.fileName);
            } else {
                text = String.format("<a upload=true href='{0}' >{0}</a>", o.fileName);
            }
            this.insertAny(text);
        },
        onUploadCb: function (re, op) {
            var o = op.result, me = this;
            if (o) {
                me.insertValue(o);
            } else {
                Ext.Msg.alert("??", "??????");
            }
        },
        onUpload: function (el) {
            this.uploadWin.hide();
        },
        updateToolbar: function () {
    
            if (this.readOnly) {
                return;
            }
    
            if (!this.activated) {
                this.onFirstFocus();
                return;
            }
            var btngrps = this.tb.items.items, btns = [], doc = this.getDoc();
            for (var i = 0, l = btngrps.length; i < l; i++) {
                Ext.apply(btns, btngrps[i].items.map);
            }
    
            if (this.enableFont && !Ext.isSafari2) {
                var name = (doc.queryCommandValue('FontName') || this.defaultFont).toLowerCase();
                //            if(name != this.fontSelect.dom.value){
                //                this.fontSelect.dom.value = name;
                //            }
            }
            if (this.enableFormat) {
                btns.bold.toggle(doc.queryCommandState('bold'));
                btns.italic.toggle(doc.queryCommandState('italic'));
                btns.underline.toggle(doc.queryCommandState('underline'));
            }
            if (this.enableAlignments) {
                btns.justifyleft.toggle(doc.queryCommandState('justifyleft'));
                btns.justifycenter.toggle(doc.queryCommandState('justifycenter'));
                btns.justifyright.toggle(doc.queryCommandState('justifyright'));
            }
            if (!Ext.isSafari2 && this.enableLists) {
                btns.insertorderedlist.toggle(doc.queryCommandState('insertorderedlist'));
                btns.insertunorderedlist.toggle(doc.queryCommandState('insertunorderedlist'));
            }
    
            Ext.menu.MenuMgr.hideAll();
    
            this.syncValue();
        },
        disableItems: function (disabled) {
            if (this.fontSelect) {
                this.fontSelect.dom.disabled = disabled;
            }
            this.tb.items.each(function (item) {
                item.items.each(function (it) {
                    if (it.getItemId() != 'sourceedit') {
                        it.setDisabled(disabled);
                    }
                })
            });
        },
        toggleSourceEdit: function (sourceEditMode) {
            var iframeHeight,
                elHeight,
                ls;
            if (sourceEditMode === undefined) {
                sourceEditMode = !this.sourceEditMode;
            }
            this.sourceEditMode = sourceEditMode === true;
            //var btn = this.tb.items.map.edit.getComponent('sourceedit');
            var btn = this.tb.items.map.edit.items.map.sourceedit;
            if (btn.pressed !== this.sourceEditMode) {
                btn.toggle(this.sourceEditMode);
                if (!btn.xtbHidden) {
                    return;
                }
            }
            if (this.sourceEditMode) {
    
                ls = this.getSize();
    
                iframeHeight = Ext.get(this.iframe).getHeight();
    
                this.disableItems(true);
                this.syncValue();
                this.iframe.className = 'x-hidden';
                this.el.removeClass('x-hidden');
                this.el.dom.removeAttribute('tabIndex');
                this.el.focus();
                this.el.dom.style.height = iframeHeight + 'px';
            }
            else {
                elHeight = parseInt(this.el.dom.style.height, 10);
                if (this.initialized) {
                    this.disableItems(this.readOnly);
                }
                this.pushValue();
                this.iframe.className = '';
                this.el.addClass('x-hidden');
                this.el.dom.setAttribute('tabIndex', -1);
                this.deferFocus();
    
                this.setSize(ls);
                this.iframe.style.height = elHeight + 'px';
            }
            this.fireEvent('editmodechange', this, this.sourceEditMode);
        }
    });
    
    Ext.reg("richeditor", Ext.form.RichEditor);
    ???????

  2. #2
    Sencha User
    Join Date
    Mar 2008
    Posts
    566
    Vote Rating
    0
      0  

    Default

    what is richeditor? Looks interesting

  3. #3
    Sencha User
    Join Date
    Apr 2010
    Location
    Toronto
    Posts
    33
    Vote Rating
    0
      0  

    Default

    I think we need a little more code for it to work

  4. #4
    Sencha User wmwdg's Avatar
    Join Date
    Oct 2010
    Location
    changzhou
    Posts
    2
    Vote Rating
    0
      0  

    Default ???

    ????~

  5. #5
    Sencha User
    Join Date
    Mar 2011
    Location
    Shanghai
    Posts
    3
    Vote Rating
    0
      0  

    Default

    How to show this component in Ext JS Designer?????designer?????

  6. #6
    Sencha User wmwdg's Avatar
    Join Date
    Oct 2010
    Location
    changzhou
    Posts
    2
    Vote Rating
    0
      0  

    Default

    Quote Originally Posted by joeman View Post
    How to show this component in Ext JS Designer?????designer?????
    ?designer???htmleditor????~
    java-web-programmer

  7. #7
    Sencha User
    Join Date
    Oct 2009
    Posts
    6
    Vote Rating
    0
      0  

    Default

    ??! ??, ??!

  8. #8
    Sencha User
    Join Date
    Jun 2009
    Posts
    2
    Vote Rating
    0
      0  

    Red face ????

    ??KindEditor??????????????

  9. #9
    Sencha User
    Join Date
    Feb 2009
    Posts
    1
    Vote Rating
    0
      0  

    Default

    ???????????????????????

  10. #10
    Sencha User
    Join Date
    Aug 2009
    Location
    HangZhou, China
    Posts
    14
    Vote Rating
    0
      0  

    Default

    ???????????, ??

Page 1 of 2 12 LastLast

Similar Threads

  1. Replies: 9
    Last Post: 14 Oct 2010, 4:25 AM
  2. Populate form in popup window. Form doesn't recieve data on 'load'
    By woffie in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 2 May 2010, 1:09 PM
  3. HTML <form> to com.gwtext.client.widgets.form.Form ?
    By gavinandresen in forum Ext GWT: Help & Discussion (1.x)
    Replies: 2
    Last Post: 20 Aug 2008, 1:12 PM
  4. Creating an Ext.form.Form from an existing form
    By bowa in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 12 Nov 2007, 8:13 AM
  5. Ext.form.Form/Ext.form.BasicForm consistency
    By Animal in forum Ext 1.x: Bugs
    Replies: 0
    Last Post: 2 May 2007, 11:51 PM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •