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

[Nam]

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

[Condor]

You could use the following workaround for enable/disable:

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);
	}
});

[Nam]

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

[Nam]

anyone know a workaround to make the htmleditor field readonly?

[ortizSWF]

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

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:

this.setReadOnly(this.readOnly);

Complete:

   // 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:

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:

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...

[queej]

This works great. Thank you for the complete example!

[queej]

As mentioned above, it does have a problem with falling back to the CSS of the page, which is ext-all.css. Therefore, it loses all bullets, etc. Is there anyway to tweak the above solution and still preserve the isolation of styles from the ext-all.css?

[queej]

Tweaked the above example so that it would not use the innerHTML, which inherits the ext-all.js styles, and changed the opacity of the mask to allow the actual editor text to be seen. Then I hide the toolbar. This provides a reasonable non-edit mode.

                   roMask.dom.style.filter = "alpha(opacity=0);"; //IE
                   roMask.dom.style.opacity = "0"; //Mozilla
                   roMask.dom.style.background = "white";
                   roMask.dom.style.overflow = "scroll";
                   //roMask.dom.innerHTML = this.getValue();  // removed

Hope this is useful to someone else who wants to disable the htmleditor.

[NepalPro]

Very useful ...

[squarefan]

UPDATE:
nevermind, you just have to remove

        if(!this.width){
            this.setSize(this.el.getSize());
        }

works great, but when I define the height - it's not taking that parameter anymore.

do you maybe have a fix for that?

cheers,
squarefan