Results 1 to 10 of 28

Thread: [FIXED-92][3.0.0/2.x] HtmlEditor readOnly and disabled not working

Hybrid View

Previous Post Previous Post   Next Post Next Post
    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha Premium Member
    Join Date
    Jul 2007
    Posts
    108

    Default [FIXED-92][3.0.0/2.x] HtmlEditor readOnly and disabled not working

    I originally posted a thread into the Help forum, but it has been suggested that I post it here...

    If I add the config options (which are listed in the docs) "readOnly: true" and "disabled: true" nothing actually happens. The content is still editable, and it's not disabled. Example code is posted in the following link to the other thread...

    http://extjs.com/forum/showthread.php?p=125101

  2. #2
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246

    Default

    You could use the following workaround for enable/disable:

    Code:
    Ext.override(Ext.form.HtmlEditor, {
    	onDisable: function(){
    		if(this.rendered){
    			this.wrap.mask();
    		}
    		Ext.form.HtmlEditor.superclass.onDisable.call(this);
    	},
    	onEnable: function(){
    		if(this.rendered){
    			this.wrap.unmask();
    		}
    		Ext.form.HtmlEditor.superclass.onEnable.call(this);
    	}
    });

  3. #3
    Sencha Premium Member
    Join Date
    Jul 2007
    Posts
    108

    Default

    awesome, what about the readOnly part though? I want someone to be able to view the contents and scroll, just not edit the content.

    Thanks

  4. #4
    Sencha Premium Member
    Join Date
    Jul 2007
    Posts
    108

    Default

    anyone know a workaround to make the htmleditor field readonly?

  5. #5
    Ext User
    Join Date
    Dec 2007
    Location
    Aguascalientes, Ags.
    Posts
    37

    Thumbs up htmleditor readOnly (setReadOnly(true|false))

    I did something like this, but i dont know if this could help you as well.

    Code:
    Ext.override(Ext.form.HtmlEditor, {
    /**
    	 * Set a readonly mask over the editor
    	 * @param {Boolean} readOnly - True to set the read only property, False to switch to the editor
    	 */
    	setReadOnly: function(readOnly){
    		if(readOnly){
    			this.syncValue();
    			var roMask = this.wrap.mask();
    			roMask.dom.style.filter = "alpha(opacity=100);"; //IE
    			roMask.dom.style.opacity = "1"; //Mozilla
    			roMask.dom.style.background = "white";
    			roMask.dom.style.overflow = "scroll";
    			roMask.dom.innerHTML = this.getValue();
    			this.el.dom.readOnly = true;
    		} else {
    			if(this.rendered){
    				this.wrap.unmask();
    			}
    			this.el.dom.readOnly = false;
    		}
    	}
    });
    Also you need to add this in onRender method:

    Code:
    this.setReadOnly(this.readOnly);
    Complete:

    Code:
       // private
        onRender : function(ct, position){
            Ext.form.HtmlEditor.superclass.onRender.call(this, ct, position);
            this.el.dom.style.border = '0 none';
            this.el.dom.setAttribute('tabIndex', -1);
            this.el.addClass('x-hidden');
            if(Ext.isIE){ // fix IE 1px bogus margin
                this.el.applyStyles('margin-top:-1px;margin-bottom:-1px;')
            }
            this.wrap = this.el.wrap({
                cls:'x-html-editor-wrap', cn:{cls:'x-html-editor-tb'}
            });
    
            this.createToolbar(this);
    
            this.tb.items.each(function(item){
               if(item.itemId != 'sourceedit'){
                    item.disable();
                }
            });
    
            var iframe = document.createElement('iframe');
            iframe.name = Ext.id();
            iframe.frameBorder = 'no';
    
            iframe.src=(Ext.SSL_SECURE_URL || "javascript:false");
    
            this.wrap.dom.appendChild(iframe);
    
            this.iframe = iframe;
    
            if(Ext.isIE){
                iframe.contentWindow.document.designMode = 'on';
                this.doc = iframe.contentWindow.document;
                this.win = iframe.contentWindow;
            } else {
                this.doc = (iframe.contentDocument || window.frames[iframe.name].document);
                this.win = window.frames[iframe.name];
                this.doc.designMode = 'on';
            }
            this.doc.open();
            this.doc.write(this.getDocMarkup())
            this.doc.close();
    
            var task = { // must defer to wait for browser to be ready
                run : function(){
                    if(this.doc.body || this.doc.readyState == 'complete'){
                        Ext.TaskMgr.stop(task);
                        this.doc.designMode="on";
                        this.initEditor.defer(10, this);
                    }
                },
                interval : 10,
                duration:10000,
                scope: this
            };
            Ext.TaskMgr.start(task);
    
            if(!this.width){
                this.setSize(this.el.getSize());
            }
    
    		this.setReadOnly(this.readOnly);
    
        }
    all Code:

    Code:
    Ext.override(Ext.form.HtmlEditor, {
    	/**
    	 * Set a readonly mask over the editor
    	 * @param {Boolean} readOnly - True to set the read only property, False to switch to the editor
    	 */
    	setReadOnly: function(readOnly){
    		if(readOnly){
    			this.syncValue();
    			var roMask = this.wrap.mask();
    			roMask.dom.style.filter = "alpha(opacity=100);"; //IE
    			roMask.dom.style.opacity = "1"; //Mozilla
    			roMask.dom.style.background = "white";
    			roMask.dom.style.overflow = "scroll";
    			roMask.dom.innerHTML = this.getValue();
    			this.el.dom.readOnly = true;
    		} else {
    			if(this.rendered){
    				this.wrap.unmask();
    			}
    			this.el.dom.readOnly = false;
    		}
    	},
       // private
        onRender : function(ct, position){
            Ext.form.HtmlEditor.superclass.onRender.call(this, ct, position);
            this.el.dom.style.border = '0 none';
            this.el.dom.setAttribute('tabIndex', -1);
            this.el.addClass('x-hidden');
            if(Ext.isIE){ // fix IE 1px bogus margin
                this.el.applyStyles('margin-top:-1px;margin-bottom:-1px;')
            }
            this.wrap = this.el.wrap({
                cls:'x-html-editor-wrap', cn:{cls:'x-html-editor-tb'}
            });
    
            this.createToolbar(this);
    
            this.tb.items.each(function(item){
               if(item.itemId != 'sourceedit'){
                    item.disable();
                }
            });
    
            var iframe = document.createElement('iframe');
            iframe.name = Ext.id();
            iframe.frameBorder = 'no';
    
            iframe.src=(Ext.SSL_SECURE_URL || "javascript:false");
    
            this.wrap.dom.appendChild(iframe);
    
            this.iframe = iframe;
    
            if(Ext.isIE){
                iframe.contentWindow.document.designMode = 'on';
                this.doc = iframe.contentWindow.document;
                this.win = iframe.contentWindow;
            } else {
                this.doc = (iframe.contentDocument || window.frames[iframe.name].document);
                this.win = window.frames[iframe.name];
                this.doc.designMode = 'on';
            }
            this.doc.open();
            this.doc.write(this.getDocMarkup())
            this.doc.close();
    
            var task = { // must defer to wait for browser to be ready
                run : function(){
                    if(this.doc.body || this.doc.readyState == 'complete'){
                        Ext.TaskMgr.stop(task);
                        this.doc.designMode="on";
                        this.initEditor.defer(10, this);
                    }
                },
                interval : 10,
                duration:10000,
                scope: this
            };
            Ext.TaskMgr.start(task);
    
            if(!this.width){
                this.setSize(this.el.getSize());
            }
    
    		this.setReadOnly(this.readOnly);
    
        }
    });
    Example:
    JS:
    Code:
    Ext.onReady(function(){
    
    Ext.QuickTips.init();
    
    var html = '<h4>An Ordered List:</h4><ol><li>Coffee</li><li>Tea</li><li>Milk</li></ol><br><br>' + 
    		'<h4>With a normal border:</h4><table border="1"><tr><td>First</td><td>Row</td></tr><tr><td>Second</td><td>Row</td></tr></table><h4>With a thick border:</h4><table border="8"><tr><td>First</td><td>Row</td></tr><tr><td>Second</td><td>Row</td></tr></table><h4>With a very thick border:</h4><table border="15"><tr><td>First</td><td>Row</td></tr><tr><td>Second</td><td>Row</td></tr></table>' +
    		'<br><br><p>An image from W3Schools:<img src="http://www.w3schools.com/images/ie.gif"></p>';
    
    Editor = new Ext.form.HtmlEditor({
        id:'edi',
        fieldLabel:'Biography',
    	width: 500,
    	readOnly: true,
    	height: 250,
        anchor:'98%',
    	value: html
    });
    
    var top = new Ext.FormPanel({
            labelAlign: 'top',
            frame:true,
            title: 'Multi Column, Nested Layouts and Anchoring',
            bodyStyle:'padding:5px 5px 0',
            width: 600,
            items: [Editor],
            buttons: [{
                text: 'Enable',
    			handler: function(){
    				Editor.setReadOnly(false);
    			}
            },{
                text: 'Disable',
    			handler: function(){
    				Editor.setReadOnly(true);
    			}
            }]
        });
    
    
    top.render(document.body);
    
    });
    PD: You could have problems with the CSS... This could help me at its moment

    Greetings...
    </war>

  6. #6
    Sencha User queej's Avatar
    Join Date
    Aug 2008
    Location
    Ithaca, NY
    Posts
    144

    Thumbs up Wonderful!

    This works great. Thank you for the complete example!
    Tripping the light fantastic.

  7. #7
    Sencha User Juvs's Avatar
    Join Date
    Oct 2007
    Posts
    36

    Exclamation

    @ortizSWF

    When you use setValue() needs to handle too..

    Code:
        // docs inherit from Field
        setValue : function(v){
            Ext.form.HtmlEditor.superclass.setValue.call(this, v);
            this.pushValue();
            //This for set read only
            this.setReadOnly(this.readOnly);        
        },

  8. #8

    Default

    Quote Originally Posted by Nam View Post
    anyone know a workaround to make the htmleditor field readonly?

    I've been using this ReadOnly workaround, yet still haven't found a way to allow the area to be scrolled.

    Any updates on this?

  9. #9
    Ext User krzak's Avatar
    Join Date
    May 2008
    Location
    Poland
    Posts
    62

    Default

    It's still in 3.0.
    setting disable: true, still alow to edit content

Posting Permissions

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