PDA

View Full Version : htmleditor - inserted image attributes



slammer
20 Sep 2009, 4:45 PM
Ext.override(Ext.form.HtmlEditor, {
onRender : function(){
// ...
// insert image
editor = this;
this.getToolbar().insertButton(16, {
iconCls: 'icon-insertimage',
handler: function(b,e) {
insertimagewindow = new Ext.Window({
title: 'Insert image',
layout: "fit",
closable : true,
items: [
insertimageFormPanel = new Ext.form.FormPanel({
fileUpload: true,
autoHeight: true,
autoWidth: true,
labelWidth: 70,
frame:true,
bodyStyle:'padding:5px 5px 0',
labelAlign: 'right',
defaultType: 'textfield',
defaults: {width: 220},
items: [
{
fieldLabel: 'URL',
name: 'image',
id: 'image'
},{
fieldLabel: 'Upload',
xtype: 'fileuploadfield',
id: 'imagename',
emptyText: 'Select image...',
name: 'imagename',
buttonText: '',
buttonCfg: {
iconCls: 'icon-upload'
}
}
],
buttons: [
{
handler: function() {
if(insertimageFormPanel.getForm().isValid()) {
insertimageFormPanel.getForm().submit({
url: 'ajax/uploadimage.php',
method: 'get',
params: {image: Ext.getCmp('image').getValue(), dir:'pages'},
waitMsg: 'sending...',
success: function(fp, o){
if(o.result.imgname == 'none') {
if(!Ext.getCmp('image').getValue()) errorMsg('insert URL');
else {
editor.relayCmd('insertimage', Ext.getCmp('image').getValue());
insertimagewindow.close();
}
} else {
editor.relayCmd('insertimage', o.result.imgname);
insertimagewindow.close();
}
}
});
} else {
errorMsg('error.');
}
},
text: 'Add'
}
]
})
],
closable: true,
width: 350,
modal: true,
autoHeight: true
});
insertimagewindow.show();
}
});
}
});
I use this code to adding image on htmleditor.
Can anyone tell me how can I add align, alt, title etc. attributes to my inserted image?

mschwartz
21 Sep 2009, 8:21 AM
I think insertimage midas command is not what you want to use. You want to insert HTML with the img tag and the attributes.

Seems easy enough.

slammer
21 Sep 2009, 11:16 AM
Yes it solved my problem.
I use:

editor.execCmd('InsertHTML', '<img src="'+o.result.imgname+'" alt="'+o.result.alt+'" '+o.result.align+' />');

Thank you. :D

pmungai
23 Nov 2009, 2:36 AM
Hello there,

Where does one override, on HtmlEditor.js or ext-all-debug

ext-all-debug.js
source/widgets/form/HtmlEditor.js

I am abit new to extJs and using ext-3.0-rc2

I need to include the insert image on the toolbar.


I suppose this example could work only if I knew where to place it inorder to put my own configurations

Ext.override(Ext.form.HtmlEditor, {
onRender : function(){
// ...
// insert image
editor = this;
this.getToolbar().insertButton(16, {
iconCls: 'icon-insertimage',
handler: function(b,e) {
insertimagewindow = new Ext.Window({
title: 'Insert image',
layout: "fit",
closable : true,
items: [
insertimageFormPanel = new Ext.form.FormPanel({
fileUpload: true,
autoHeight: true,
autoWidth: true,
labelWidth: 70,
frame:true,
bodyStyle:'padding:5px 5px 0',
labelAlign: 'right',
defaultType: 'textfield',
defaults: {width: 220},
items: [
{
fieldLabel: 'URL',
name: 'image',
id: 'image'
},{
fieldLabel: 'Upload',
xtype: 'fileuploadfield',
id: 'imagename',
emptyText: 'Select image...',
name: 'imagename',
buttonText: '',
buttonCfg: {
iconCls: 'icon-upload'
}
}
],
buttons: [
{
handler: function() {
if(insertimageFormPanel.getForm().isValid()) {
insertimageFormPanel.getForm().submit({
url: 'ajax/uploadimage.php',
method: 'get',
params: {image: Ext.getCmp('image').getValue(), dir:'pages'},
waitMsg: 'sending...',
success: function(fp, o){
if(o.result.imgname == 'none') {
if(!Ext.getCmp('image').getValue()) errorMsg('insert URL');
else {
editor.relayCmd('insertimage', Ext.getCmp('image').getValue());
insertimagewindow.close();
}
} else {
editor.relayCmd('insertimage', o.result.imgname);
insertimagewindow.close();
}
}
});
} else {
errorMsg('error.');
}
},
text: 'Add'
}
]
})
],
closable: true,
width: 350,
modal: true,
autoHeight: true
});
insertimagewindow.show();
}
});
}
});