Page 3 of 3 FirstFirst 123
Results 21 to 28 of 28

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

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #21
    Sencha Premium User wemerson.januario's Avatar
    Join Date
    Nov 2008
    Location
    Goiânia - GO, Brazil
    Posts
    883

    Default

    I can't make it work. it doesn't happen nothing diferent for me.

  2. #22

    Default Question: ExtJS used version?

    Hi,

    I've tried your code Queej, well actually the one from ortizSWF but with your updates.
    Unfortunately it does not work and obtain the same behaviour as if it was set to disabled.
    I'm using version 2.2.1. Please could you tell me which versions of ExtJS did you use?

    Thanks in advance.


    Quote Originally Posted by queej View Post
    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.

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

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

    Default Re: Version

    Hey phernaca,

    I used it with 2.1.1. It's been more than a year since I wrote that, but it has been in use in production for a year, so I think it is working okay. Below is the complete code, which includes a resizer. I hope it is helpful.

    Cheers,
    -queej

    Code:
     * @class Ext.ux.esaHtmlEditor
     * @extends Ext.Component
     * @constructor
     * Create a new HtmlEditor
     * @param {Object} config The config object
     */
    Ext.namespace('Ext.ux');
    Ext.ux.esaHtmlEditor = function(config){
      Ext.ux.esaHtmlEditor.superclass.constructor.call(this, config);
      if (config.width && typeof config.width != 'number')
        this.pWidth = config.width;
    
      var Me=this;
      this.on('initialize', function(){
                new Ext.Resizable(Me.getResizeEl(), {
                  handles: 's',
                                      pinned:true,
                                      minWidth:700,
                                      minHeight: 50,
                                      resizeElement: function(){  // override default resizing
                                      var size = this.proxy.getSize();
                                      Me.setSize(Me.pWidth?Me.pWidth:size.width, size.height);
                                      return size;
                                    }
                  });
              });
        
    }
    
    Ext.extend(Ext.ux.esaHtmlEditor, Ext.ux.HTMLEditor, {
                   defaultAutoCreate : {
                 tag: "textarea",
                     style:"width:700px;height:300px;",
                     autocomplete: "off",
                     cls: "x-hidden"
                     },
                   
                   pushValue : function(){
                   if(this.initialized){
                     var v = this.el.dom.value;
                     if(this.fireEvent('beforepush', this, v) !== false){
                       (this.doc.body || this.doc.documentElement).innerHTML = v;
                       this.fireEvent('push', this, v);
                     }
                   }
                 },
                   onResize : function(w, h){
                   Ext.ux.esaHtmlEditor.superclass.onResize.apply(this, arguments);
                   if(this.el && this.iframe){
                     if(typeof w != 'number')
                       this.iframe.style.width = w;
                     if(typeof h != 'number')
                       this.iframe.style.height = h;
                   }
                 }
                 
      });
    
    Ext.override(Ext.ux.esaHtmlEditor, {
        /**
         * Set a readonly mask over the editor
         * @param {Boolean} readOnly - True to set the read only property, False to switch to the editor
         */
      onDisable: function() {
                     this.setReadOnly( true );
                     },
      onEnable: function() {
                     this.setReadOnly( false );
                   },
      setReadOnly: function( readOnly ) {
                     if(readOnly){
                       this.syncValue();
                       var roMask = this.wrap.mask();
                       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.style.zIndex = 10; // dqj - eCornell - was hiding other dialogs
                       if ( this && this.width && this.width > 0 )
                         roMask.dom.style.width = this.width-19; // scrollbar width; no way to determine actual, according to ExtJS
                       //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];
                       if ( !Ext.isGecko2 ) { // dqj
                         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.initEditor.defer(10, this);
                           this.doc.designMode="on";
                         }
                       },
                       interval : 10,
                       duration:10000,
                       scope: this
                     };
                     Ext.TaskMgr.start(task);
    
                     if(!this.width){
                       this.setSize(this.el.getSize());
                     }                 
                   }
      });
    Tripping the light fantastic.

  4. #24

    Default Re:Re: Version

    Hi queej,

    Thanks a lot!

    I struggled yesterday cause I'm pretty newbie to extJS but I finally got my Editor with a nice 'alive' scrollbar when in view mode.

    On the other hand I've still got a problem as I can not select the contents and so a copy/paste is not possible.

    Does anybody know if is this feasible?

    Thanks again,

    phernaca

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

    Default

    It's not ideal, but you could include a Copy button that issues a retrieval command to the editor.
    Tripping the light fantastic.

  6. #26

    Default

    Do you mean that it exists a plugin for the Toolbar that allows to copy the contents of an HtmlEditor to the clipboard?

    If it is the case I'm pretty sure that it will be good enough.

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

    Default

    I'm pretty sure there is functionality that will allow you to create your own button external to the editor, or to add a button to the editor. I have been using TinyMCE mostly, lately, so I don't remember the details. I would search the forums here.
    Tripping the light fantastic.

  8. #28
    Sencha User
    Join Date
    Feb 2013
    Location
    INDIA
    Posts
    51

    Default

    Perfect Example ,

    Thanks a lot .

    // Naresh Dwivedi

Page 3 of 3 FirstFirst 123

Posting Permissions

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