PDA

View Full Version : [3.x]Ext.ux.form.HtmlEditor.Picture



bywayboy
29 Sep 2009, 12:03 PM
Ext.form.HtmlEditor not support Upload image.


<script type="text/javascript" src="js/Ext.ux.form.HtmlEditor.Picture.js"></script>
<link rel="stylesheet" type="text/css" href="js/Ext.ux.form.HtmlEditor.Picture.css" />


Ext.QuickTips.init();
new Ext.form.HtmlEditor({
renderTo: Ext.getBody(),
width: 600,
height: 300,
plugins: [
new Ext.ux.form.HtmlEditor.Divider(),
new Ext.ux.form.HtmlEditor.Picture({
uploadUrl:'php/up-img.php',
downloadUrl:'php/get-images.php',
flashUrl:'js/swfupload.swf'
})
]
});


demo:http://plugins.extgui.cn/htmleditor_plugins_picture/index.php

16504

16505

16506

wemerson.januario
29 Sep 2009, 7:00 PM
Nice work. I'm gonna test.

Fabyo
9 Oct 2009, 4:57 AM
Example files online and downloads do not work

bywayboy
18 Oct 2009, 5:51 PM
Example files online and downloads do not work
fixed, please try again.:D

16828

Fabyo
19 Oct 2009, 2:22 AM
Thank you for your dedication, but still not working.

:(


Error calling method on NPObject!
var swfobject=function(){var E="undefine...}});Ext.grid.GroupingView.GROUP_ID=1000;ext-all.js (linha 11)

e is undefined
window.undefined=window.undefined;Ext={v...)}window.attachEvent("onunload",a)}})();ext-base.js (linha 7)

Ext.ux.form.HtmlEditor.Divider is not a constructor
new Ext.ux.form.HtmlEditor.Divider(),\r\n

VinylFox
19 Oct 2009, 5:05 AM
"Ext.ux.form.HtmlEditor.Divider is not a constructor"

The Divider is part of the HtmlEditor Plugins UX (http://www.extjs.com/forum/showthread.php?t=72106), so you will need to include that as well.

Fabyo
19 Oct 2009, 5:20 AM
index.php included:


<script type="text/javascript" src="js/ext-base.js"></script>
<script type="text/javascript" src="js/ext-all.js"></script>
<script type="text/javascript" src="js/Ext.ux.HtmlEditor.Plugins.js"></script>
<script type="text/javascript" src="js/ext-lang-pt_BR.js"></script>
<script type="text/javascript" src="js/Ext.ux.form.HtmlEditor.Picture.js"></script>
<link rel="stylesheet" type="text/css" href="css/Ext.ux.form.HtmlEditor.Picture.css" />
<script type="text/javascript" src="js/swfupload.js"></script>error:


Error calling method on NPObject!
var swfobject=function(){var E="undefine...}});Ext.grid.GroupingView.GROUP_ID=1000;ext-all.js (linha 11)

e is undefined
window.undefined=window.undefined;Ext={v...)}window.attachEvent("onunload",a)}})();ext-base.js (linha 7)

Ext.ux.form.HtmlEditor.Picture is not a constructor
flashUrl:'js/swfupload.swf'\r\n

bywayboy
19 Oct 2009, 10:04 PM
if you have the last version of the Ext3.
remove the code

Ext.override(Ext.form.HtmlEditor, {
insertAtCursor : function(text){
if(!this.activated){
return;
}
if(Ext.isIE){
this.win.focus();
var r = this.doc.selection.createRange();
if(r){
r.collapse(true);
r.pasteHTML(text);
this.syncValue();
this.deferFocus();
}
}else if(Ext.isGecko || Ext.isOpera || Ext.isWebKit){
this.win.focus();
this.execCmd('InsertHTML', text);
this.deferFocus();
}
}
});

if you are already include the HtmlEditor Plugins UX (http://www.extjs.com/forum/showthread.php?t=72106) please remvoe the code.


Ext.ux.form.HtmlEditor.Divider = Ext.extend(Ext.util.Observable, {
// private
init: function(cmp){
this.cmp = cmp;
this.cmp.on('render', this.onRender, this);
},
// private
onRender: function(){
this.cmp.getToolbar().addButton([new Ext.Toolbar.Separator()]);
}
});

the online demo is work's in ie 6.0 8.0 google chrome.

the online demo was disabled the upload. some bad guy's.upload sex picture.:">

Fabyo
20 Oct 2009, 2:03 AM
thanks

I got to work in firefox, only that the "upload" button when you do not run anything, or show error in the firebug

vizcano
3 Nov 2009, 5:09 AM
Is there a way to disable the button until the user clicks in the editable area? Just like the behavior of the standard buttons of the toolbar

vizcano
3 Nov 2009, 5:22 AM
Is there a way to disable the button until the user clicks in the editable area? Just like the behavior of the standard buttons of the toolbar

I should learn to wait for two minutes before posting anything, cause in many times i get the solution just after have posted my answer...

Just add "disabled:true" to btn button and its done :)

vizcano
3 Nov 2009, 6:05 AM
I should learn to wait for two minutes before posting anything, cause in many times i get the solution just after have posted my answer...

Just add "disabled:true" to btn button and its done :)

But only works in firefox, anyone could help me?

Fabyo
3 Nov 2009, 7:09 AM
Ext.ux.formHtmlEditor.Picture only works in IE

:(

vizcano
3 Nov 2009, 8:08 AM
Ext.ux.formHtmlEditor.Picture only works in IE

:(

¿? I've got it working in both FF and IE, the only important thing i have changed is the upload method from the flash one to an uploadfile onlybutton...

I just want to know how to disable the button at the toolbar until htmleditor is clicked, like the rest of the htmleditor toolbar items

Fabyo
3 Nov 2009, 9:05 AM
Insert btn.disable() after line 29:

example:

Ext.ux.form.HtmlEditor.Picture.js


onRender:function()
{
var btn = this.cmp.getToolbar().addButton({
iconCls: 'x-edit-picture',
handler: function(){
this.show();
},
scope: this,
tooltip: {
title: 'Insert Picture'
},
overflowText: 'Picture'
})
btn.disable();
},

vizcano
3 Nov 2009, 9:13 AM
Thank u so much :)

Stephan Schrade
3 Nov 2009, 2:51 PM
Thank you very much for this extension.
It works great so far.
But unfortunately the swf upload doesn't work in FF.
How can I perform uploads with other methods?
Any hints?

TIA Stephan

vizcano
3 Nov 2009, 11:51 PM
Well i changed the swf upload to an onlybutton fileuploadfiel, but i'm having some problems now with the new button position,because if i add to class "x-form-file-wrap" a float right property all my fileuploadfields are affected by this change, anyway i post here my solution if it helps



Ext.ux.InsertPictureWindow=Ext.extend(Ext.Window ,{
xtype:"window",
title:"Insertar Imagen",
width:430,
height:160,
layout:"fit",
initComponent: function(){
this.on_change={
change:{
scope:this,fn:function(){this.generate_code();}
}
};
this.buttons=[
{
xtype:'progress',
width:220,hidden:true
},
{
text:'Insertar',scope:this,
handler:function(){
if(this.callback){
this.callback.call(this.scope||this,this.get_code_value());
}
this.hide();
}
},{
text:'Cancelar',scope:this,handler:
function(){
this.hide();
}
}]
this.items=[
{
xtype:'form',border:false,layout:'vbox',
id : 'attachimg',fileUpload: true,
layoutConfig:{
align:"stretch",
padding:"0"
},
defaults:{
layout:"hbox",border:false,xtype:'panel',
layoutConfig:{
padding:"5"
},
defaults:{
margins:'0 5 0 0',
xtype:"textfield"
}
},
items:[
{
items:[
{
xtype:"label",
text:"URL:",
style:"line-height:22px;",
width:70
},
{
width:200,name:'src',
listeners:this.on_change
},
{
xtype:"button",
text:"Galeria...",scope:this,
handler:function(){
if(!this.pic_view)
{
this.pic_view = new Ext.ux.PicView({
url: this.downloadUrl,
closeAction:'hide',
scope:this,
callback:function(o){
var f=this.findByType('form')[0];
o.width+='px';o.height+='px';
f.form.setValues(o);
this.generate_code();
}
});
}
this.pic_view.show();
}
},{
xtype:"fileuploadfield",
buttonOnly: true,
buttonText: 'Examinar...',
name:'file',
id:'fileup',
scope:this,
callback:function(o){
var f=this.findByType('form')[0];
f.form.findField('src').setValue('?do=filetools.getImage&amp;id='+o);
this.generate_code();
},
listeners: {
'fileselected': function(fb, v){
Ext.getCmp('attachimg').getForm().findField('src').setValue(v);
//subimos archivo
var pbar = Ext.Msg.progress('Espere unos instantes', 'cargando datos', 'actualizando datos . . .');
Ext.getCmp('attachimg').getForm().submit({
url: String.format('?do=awejson.request&what={0}&which={1}', 'files', 'setImages'),
waitTitle: 'Por favor, espere',
waitMsg: 'espere unos instantes ...',
method: 'POST',
params: {
'mode' : 'new',
'label': 'insertado desde editor',
'description': 'insertado desde editor'
},
reset: false,
failure: function(form, response) {
pbar.hide();
Ext.MessageBox.show({
title: 'Error',
msg: response.result.message,
buttons: Ext.MessageBox.OK,
icon: Ext.MessageBox.ERROR // Ext.MessageBox.WARNING
});
},
success: function(form, response) {
pbar.hide();
//this.generate_code();
var callback = this.callback;
callback.call(this.scope||this,response.result.message);

}
,scope: this
});
}
}
}
]
},
{
items:[
{
xtype:"label",
text:"Codigo:",
style:"line-height:22px;",
width:70
},{
width:320,
name:'code',
readOnly:true
}
]
}
]
}
]
Ext.ux.InsertPictureWindow.superclass.initComponent.call(this);
this.on('show',function(){
var f=this.findByType('form')[0];
f.form.reset();
this.generate_code();
},this);
},
generate_code:function(){
var f=this.findByType('form')[0];
var o = this.get_form_real_values();
if(typeof(o.src)!='string' || o.src.trim().length<1){
this.buttons[1].setDisabled(true);return;
}
this.buttons[1].setDisabled(false);

var str='<img src="'+o.src+'"'+' />';

f.form.setValues({code:str});
},
get_form_real_values:function(){
var form=this.findByType('form')[0].form;
var values = {};
form.items.each(function(f){
if('code'!=f.getName())
values[f.getName()] = f.getValue();
});
return values;
},
get_code_value:function(){
var ret=null;
var form=this.findByType('form')[0].form;
form.items.each(function(f){
if('code'==f.getName()){
var v=f.getValue();
if(typeof(v)=='string' && v.trim().length>0)
ret=v;
}
});
return ret;
}
})

Fabyo
6 Nov 2009, 4:26 AM
my example extjs 3.0 online:
http://extjs.com.br/exemplos/htmleditor/

download:
http://extjs.com.br/exemplos/htmleditor/Ext.ux.HtmlEditor.zip

Firefox OK

using Ext.ux.UploadDialog, chooser.js and DataView-more.js

* Upload image
* Rename image
* Delete image


:D

Stephan Schrade
18 Nov 2009, 12:17 PM
Hi Fabyo,
thanks very much.
This works just perfect.

Thanks,
Stephan

suspiria
15 Mar 2010, 2:21 AM
my example extjs 3.0 online:
http://extjs.com.br/exemplos/htmleditor/

download:
http://extjs.com.br/exemplos/htmleditor/Ext.ux.HtmlEditor.zip

Firefox OK

using Ext.ux.UploadDialog, chooser.js and DataView-more.js

* Upload image
* Rename image
* Delete image


:D

Any chance someone could upload this? Links are dead :((

Fabyo
31 Mar 2010, 8:38 AM
Links OK \:D/

poolok
23 May 2010, 5:56 AM
i can see the type view.i use ie 7.20633.could you tell me why?.