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

Thread: HTMLeditor

  1. #1
    Sencha User
    Join Date
    Mar 2007
    Posts
    580

    Default HTMLeditor

    I`ve started extending the editor and it works great but I run into several issues.
    Some of them might be browser bugs.

    1. On FF when the range is collapsed and I try to hilite text it adds:
    Code:
    <font bgcolor="FFFF00">
    but when the range is not collapsed it adds
    Code:
    <span style="background-color: rgb(255, 255, 0);">
    I don`t care too much about the different tags but on the first case you don`t see the effect of hiliting. Another issue is that FF adds unnecessary nesting of elements when using hilite. Works fine on IE7.

    I`ve reported the following issues on the past but it seems they are forgotten:
    2. On the first time the editor gets focus it adds a single space.
    3. Lists and align text are broken on IE7. Works fine with FF.

    Thanks

  2. #2
    Sencha User
    Join Date
    Mar 2007
    Posts
    210

    Default

    I've duplicated problems 2 and 3 running ext 1.1 RC1.

    I have another problem to add to the list:

    4. Italics don't work in IE6. The editor window shows the characters in italics but when they get posted and read back out of the database they are not italics in IE6 or Firefox. If I submit italic text from the same page with firefox the text is in italics when read out of the database and displayed in either Firefox or IE6.

  3. #3

  4. #4
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    New York, NY
    Posts
    6,956

    Default

    2. The single space is so you can see the cursor. Without it, FireFox refuses to display the cursor when clicking on an empty editor. If you have an alternate solution, I am all ears.

    3. is already fixed in SVN.

    4. It is probably using the EM tag. You will have to configure the container where you are displaying the text to make EM elements italic. reset.css (in ext-all.css) removes italic from the EM tag. It's pretty easy:

    #some-element em { font-style: italic; }
    Jack Slocum
    Sencha Co-Founder, Ext JS Founder
    Original author of Ext JS 1, 2 & 3.
    Twitter: @jackslocum

  5. #5
    Ext JS Premium Member stever's Avatar
    Join Date
    Mar 2007
    Posts
    1,408

    Default

    Quote Originally Posted by jack.slocum View Post
    2. The single space is so you can see the cursor. Without it, FireFox refuses to display the cursor when clicking on an empty editor. If you have an alternate solution, I am all ears.
    Set the value to the space, then set the value back to blank. Works on my hacked up version at least...

  6. #6
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    New York, NY
    Posts
    6,956

    Default

    I tried that in onFirstFocus and ended up with no cursor. Care to share any more details on your "hacked up version"?
    Jack Slocum
    Sencha Co-Founder, Ext JS Founder
    Original author of Ext JS 1, 2 & 3.
    Twitter: @jackslocum

  7. #7
    Ext JS Premium Member stever's Avatar
    Join Date
    Mar 2007
    Posts
    1,408

    Default

    Well, I use this and it works fine for me ....

    Code:
        pushValue : function(){
            if(this.initialized){
                var v = this.el.dom.value;
                //if(v.length < 1){
                //    v = '&nbsp;';
                //}
                if(this.fireEvent('beforepush', this, v) !== false){
                    (this.doc.body || this.doc.documentElement).innerHTML = v;
                    this.fireEvent('push', this, v);
                }
            }
        },
        onFirstFocus : function(editor){
    	.
    	.
    	.
            if(Ext.isGecko){ // prevent silly gecko errors
                var v = this.el.dom.value;
                if(v.length < 1){
                    this.setValue('&nbsp;');
                    this.setValue('');
                }
    BTW: I think it looks better if you hide the textarea itself until stuff is done and then show it when initialization is done so you don't see the value stored in it moved all around while the toolbar is built, etc.

    Also, I get weird things when I try and set its width to 98% or the like. The wrapper, the toolbar, and the textarea are fine, but the iframe is stuck at one preset size.

    Also, if the form gets resized, the HtmlEditor does not... (width issue)

    As for the above two items: if I choose to switch back and forth from source view to wysiwyg, then the iframe gets resized correctly.
    Last edited by stever; 31 Jul 2007 at 6:10 PM. Reason: switch back and forth from source view to wysiwyg fixes some things

  8. #8
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    New York, NY
    Posts
    6,956

    Default

    I tried that change, and I had no cursor.
    Jack Slocum
    Sencha Co-Founder, Ext JS Founder
    Original author of Ext JS 1, 2 & 3.
    Twitter: @jackslocum

  9. #9
    Ext JS Premium Member stever's Avatar
    Join Date
    Mar 2007
    Posts
    1,408

    Default

    OK, I had to rip everything out one by one until I found it. Of course, it was the last thing I checked. Anyhow, I added a resizer to it to stretch the bottom. That has the pleasant side effect of not having the need for the space. I don't know why, but removing the resizer also means a lost cursor. ??? So be it. I'm sure you can figure out what the resizer does to have this effect. BTW: with a lot of content, the scroll bar arrow gets hidden just a bit by the resizer. Any idea why?

    Shortened version (also can have a width:'100%' and stretch like a normal input field without having to watch for resizing events, etc.):

    Code:
    /**
     * @class Ext.ux.HtmlEditor
     * @extends Ext.Component
     * Simple class to put a smiley menu in an HTML editor.<br />
     * @constructor
     * Create a new HtmlEditor
     * @param {Object} config The config object
     */
    Ext.namespace('Ext.ux');
    Ext.ux.HtmlEditor = function(config){
        Ext.ux.HtmlEditor.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:350,
    			    minHeight: 250,         
    			    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.HtmlEditor, Ext.form.HtmlEditor, {
        /**
         * @cfg {Boolean} enableColors Enable the fore/highlight color buttons (defaults to true)
         */
        enableSmileys : true,
    
        defaultAutoCreate : {
            tag: "textarea",
            style:"width:500px;height:300px;",
            autocomplete: "off",
            cls: "x-hidden"
        },
    
        pushValue : function(){
            if(this.initialized){
                var v = this.el.dom.value;
                //if(v.length < 1){
                //    v = '&nbsp;';
                //}
                if(this.fireEvent('beforepush', this, v) !== false){
                    (this.doc.body || this.doc.documentElement).innerHTML = v;
                    this.fireEvent('push', this, v);
                }
            }
        },
    
        // private
        onResize : function(w, h){
        	Ext.ux.HtmlEditor.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;
            }
        }
    
    });

  10. #10
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    New York, NY
    Posts
    6,956

    Default

    I'm not sure what the resizer is doing to enable the cursor. How odd. I will take a look at see what I can figure out.
    Jack Slocum
    Sencha Co-Founder, Ext JS Founder
    Original author of Ext JS 1, 2 & 3.
    Twitter: @jackslocum

Page 1 of 2 12 LastLast

Posting Permissions

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