PDA

View Full Version : HtmlEditor background color and scrollbar problem



dddu88
4 Apr 2008, 9:44 AM
Hi, all,
I created a HtmlEditor with background color, but the problem is that the top part of the field is not in the color (red) I set to, not sure why and how to cover the whole area with the color I set. Also the scrollbar always shows up on load when there is no data typed in the area, I want it disappear until data input is out of the area, it then automatically shows up. I checked the HtmlEditor API, there is no setting for scrollbar.

Attached is the picture of the html editor.

Thanks in advance for your help.
Dave

4 Apr 2008, 4:33 PM
please post relevant code in PHP or code tags if you want assistance.

Thanks :)

dddu88
4 Apr 2008, 7:02 PM
Ok, sorry for that, here is the code to initiate htmlEditor:

var htmlEditor = new Ext.ux.Editor({
// xtype:'htmleditor',// xtype:'textarea',
id:'message-'+userId,
hideLabel: true,
//autoscroll:false,
region:'center',
border: true,
labelSeparator:'',
enableSourceEdit: false,
name: 'msg',
//bkImage: '/images/editorimage.jpg',
bkColor: '#FF0000',
anchor: '100% 98% });

Here is the code for Editor class:

Ext.namespace('Ext.ux');

Ext.ux.Editor = function(config){
//New.Class constructor logic here
//don't forget to call the superclass constructor:
Ext.ux.Editor.superclass.constructor.call(this, config);

};

Ext.extend(Ext.ux.Editor, Ext.form.HtmlEditor, {
//Ext.ux.Editor = Ext.extend( Ext.form.HtmlEditor, {


/**
* @cfg {String} bkImage Path to the image to use for the background to the HTML editor
*/
bkImage: null,
bkColor: null,

/**
* extend the init function to change the default background image from the standard text-bg.gif to the
* users custom configuration
*/
getDocMarkup : function()
{
Ext.ux.Editor.superclass.constructor.call( this );

if ( this.bkImage != null || this.bkColor != null)
{
var dbody = this.getEditorBody();
var ss = this.el.getStyles('font-size', 'font-family', 'background-image','background-color', 'background-repeat');

//ss['background'] = 'url(' + this.bkImage + ') repeat-x fixed center';
if ( this.bkImage != null)
ss['background-image'] = 'url(' + this.bkImage + ')';
if(this.bkColor != null)
ss['background-color'] = this.bkColor;
Ext.DomHelper.applyStyles(dbody, ss);
}

},

defaultAutoCreate : {
tag: "textarea",
style:"width:500px;height:99px;",
autocomplete: "off"
},

//this is initiated when enter is pressed
enterFunc : function(e){
// alert('Enter Pressed');
},

fixKeys : function(){
if(Ext.isIE){
return function(e){
var k = e.getKey(), r;
if(k == e.TAB){
e.stopEvent();
r = this.doc.selection.createRange();
if(r){
r.collapse(true);
r.pasteHTML('    ');
this.deferFocus();
}
}else if(k == e.ENTER){

this.enterFunc(e);

r = this.doc.selection.createRange();
if(r){
var target = r.parentElement();
if(!target || target.tagName.toLowerCase() != 'li'){
e.stopEvent();
r.pasteHTML('<br />');
r.collapse(false);
r.select();
}
}
}
};
}else if(Ext.isOpera){
return function(e){
var k = e.getKey();
if(k == e.TAB){
e.stopEvent();
this.win.focus();
this.execCmd('InsertHTML','&nbsp;&nbsp;&nbsp;&nbsp;');
this.deferFocus();
}
};
}else if(Ext.isSafari){
return function(e){
var k = e.getKey();
if(k == e.TAB){
e.stopEvent();
this.execCmd('InsertText','\t');
this.deferFocus();
}
};
}
}(),

applyCommand : function(e){

if(e.getKey() == 13) {
//this.enterFunc(e);
e.stopEvent();
}

if(e.ctrlKey){
var c = e.getCharCode(), cmd;
if(c > 0){
c = String.fromCharCode(c);
switch(c){
case 'b':
cmd = 'bold';
break;
case 'i':
cmd = 'italic';
break;
case 'u':
cmd = 'underline';
break;
}
if(cmd){
this.win.focus();
this.execCmd(cmd);
this.deferFocus();
e.preventDefault();
}
}
}
}
});

Ext.reg('editorUX', Ext.ux.Editor);


I set the bkColor to 'red', so I got it in the attached picture, I tested image file, and got the same result, the top area is always not filled with either the image or the red color.

Thanks for your help.

Dave

dddu88
6 Apr 2008, 12:36 PM
Ok, finally I got it working, I need to override the gotDocMarkup() to use my own html document, set color and use s.gif instead of form-bk.gif.

Thanks
Dave