PDA

View Full Version : [2.x] Ext.ux.plugins.HtmlEditorImageInsert



george.antoniadis
28 Nov 2007, 7:58 AM
Ext.ux.plugins.HtmlEditorImageInsert v.0.1

This is a very first draft of a plugin I needed for the HtmlEditor.
Allows the user to add images in the editor by specifying their URL.

Example:
http://noodles.gr/resources/javascript/extjs/2.0-rc1-lab/Ext.ux.plugins.HtmlEditorImageInsert.html

Usage:


<script type="text/javascript">
Ext.onReady(function(){
Ext.QuickTips.init();

new Ext.FormPanel({
renderTo: 'form',
defaultType: 'textfield',
items: [{
xtype:'htmleditor',
fieldLabel:'some label',
width: 650,
height: 350,
plugins: new Ext.ux.plugins.HtmlEditorImageInsert({
popTitle: 'Image url?',
popMsg: 'Please insert an image URL...',
popWidth: 400,
popValue: 'http://www.google.gr/intl/en_com/images/logo_plain.png'
})
}
]
});
});
</script>


Ext.ux.plugins.HtmlEditorImageInsert.js:


Ext.namespace('Ext.ux', 'Ext.ux.plugins');

Ext.ux.plugins.HtmlEditorImageInsert = function(config) {

config = config || {};

Ext.apply(this, config);

this.init = function(htmlEditor) {
this.editor = htmlEditor;
this.editor.on('render', onRender, this);
};

this.imageInsertConfig = {
popTitle: config.popTitle || 'Image URL',
popMsg: config.popMsg || 'Please select the URL of the image you want to insert:',
popWidth: config.popWidth || 350,
popValue: config.popValue || ''
}

this.imageInsert = function(){
Ext.MessageBox.show({
title: this.imageInsertConfig.popTitle,
msg: this.imageInsertConfig.popMsg,
width: this.imageInsertConfig.popWidth,
buttons: Ext.MessageBox.OKCANCEL,
prompt: true,
value: this.imageInsertConfig.popValue,
scope: this,
fn: function(btn, text){ if ( btn == 'ok' ) this.editor.relayCmd('insertimage', text); }
});
}

function onRender() {
if (!Ext.isSafari) {
this.editor.tb.add({
itemId : 'htmlEditorImage',
cls : 'x-btn-icon x-edit-insertimage',
enableToggle: false,
scope: this,
handler:function(){ this.imageInsert(); },
clickEvent:'mousedown',
tabIndex:-1
});
}
}

}


All plugin params are optional and for now are only used for the prompt message box.
This is very basic but should work ok...

I'm trying to make this play nice with something like JSakalos' fileTree thingie...
If anyone has any suggestions on the structure of the plugin please let me know cause it's my first attempt at one and I ain't sure it's the right way to go...

based on cmendez21's post (http://extjs.com/forum/showthread.php?t=15104)...

tidal
28 Nov 2007, 10:55 AM
Hi!


This is very basic but should work ok...

Thx a lot, this very cool :D

Basics teach everybody a lot more then featuritis ;)

So don

zican
11 Dec 2007, 3:11 AM
I change the source a little
insert image at the current cursor position
when MessageBox shown, focus in Editor losted
IE & FF OK
please fix my poor english skill, sorry all


this.imageInsert = function(){
var range;
if(Ext.isIE) range = this.editor.doc.selection.createRange();
Ext.MessageBox.show({
title: this.imageInsertConfig.popTitle,
msg: this.imageInsertConfig.popMsg,
width: this.imageInsertConfig.popWidth,
buttons: Ext.MessageBox.OKCANCEL,
prompt: true,
value: this.imageInsertConfig.popValue,
scope: this,
fn: function(btn, text) {
if ( btn == 'ok' ) {
if(Ext.isIE) range.select();
this.editor.relayCmd('insertimage', text);
}
}
});
}

marcing
12 Jan 2008, 5:44 AM
Is there any way to put the image button before the source edit button?

I noticed that You htmleditor generates valid xhtml (<span style="">), while mine generates "<font face="times new roman">", any ideas why could it be?

EDIT: I know the solution for the font/span issue - the problem was the "black theme", others work well.

apaa
16 Jan 2008, 10:14 PM
Maybe add the tooltip to the button make sense,so I add some code like this:


function onRender() {
if (!Ext.isSafari) {
this.editor.tb.add({
itemId : 'htmlEditorImage',
cls : 'x-btn-icon x-edit-insertimage',
enableToggle: false,
scope: this,
handler:function(){ this.imageInsert(); },
clickEvent:'mousedown',
tooltip : config.buttonTip || {
title: 'Insert Image',
text: 'Insert Image to htmlEditor',
cls: 'x-html-editor-tip'
}
tabIndex:-1
});
}
}

fgerneth
17 Jan 2008, 3:37 AM
Looks quite good for me & i like the idea of the imageselect adapter. Just one thing which would be helpfull, is to be able to set some css-properties of the window (like the textflow) so that you can really include pictures into your text without having these breaks in your text. Anyway good work :)

george.antoniadis
17 Jan 2008, 4:25 AM
I'm trying to figure out a way to add a plugin for the plugin :P
I've finished a crude and hard-coded file manager instead of the "type-a-url" aproach but needs to be stripped down a bit and made into an actuall plugin.

Image properties is a must for me too... but still need the plugin-in-plugin way figured >_<

apaa
17 Jan 2008, 8:04 PM
desired to see it....

fangzhouxing
26 Jan 2008, 6:46 AM
This plugin is very useful, but I encountered a problem:
My htmleditor is in a popup window, when I click the insert image button, the MessageBox show behind the popup window.
How can I bringit to Front?
I have used WindowMgr.bringToFront method, but not succeed!
Can anyone help me ? Thanks in advance.

george.antoniadis
26 Jan 2008, 7:40 AM
I've got the same exact problem when I click the button and try to load another window... :/

I've tried everything from css z-index, window manager visibility and stuff... no luck...

cmendez21
26 Jan 2008, 10:45 AM
Wow it looks so cool B)
its nice to see somebody has used or based the code i posted long ago for something new..!

Even my code wasn't the great deal but its so cool to see something new about this subject :D

When i started with ext i didn't know how to use all the components very well
but i may suggest a list of things that would be nice taking advantage of the window?


Href tag (with target)
Alt tag
Border tag


Well i could mention a lot more but the idea its to make it simple and functional

Keep the good work..!

fangzhouxing
1 Feb 2008, 12:25 AM
My htmleditor is in a popup window, when I click the insert image button, the MessageBox show behind the popup window

Anyone?

Thomas_K
1 Feb 2008, 7:01 AM
Just set z-index:9000; in the class and its fixed.

mschering
1 Feb 2008, 9:35 AM
i had the same problem. I didn't use the standard prompt because I'm building a more complex image insert window. I solved it by putting a 200 ms defer on the show function.

this.imageInsertWindow.show.defer(200, this.imageInsertWindow);

Good luck!

fangzhouxing
2 Feb 2008, 7:24 PM
Thanks for reply! I have solved the problem by mschering's solution as follows:



this.imageInsert = function() {
var range;
if (Ext.isIE)
range = this.editor.doc.selection.createRange();
var msg = Ext.MessageBox.show( {
title : this.imageInsertConfig.popTitle,
msg : this.imageInsertConfig.popMsg,
width : this.imageInsertConfig.popWidth,
buttons : Ext.MessageBox.OKCANCEL,
prompt : true,
value : this.imageInsertConfig.popValue,
scope : this,
fn : function(btn, text) {
if (btn == 'ok') {
if (Ext.isIE)
range.select();
this.editor.relayCmd('insertimage', text);
}
}
});
var win = msg.getDialog()
win.show.defer(200, win)
}

Frank
23 Feb 2008, 9:13 AM
nice plugins to me:)

dddu88
8 Apr 2008, 12:45 PM
Can we use this to insert an image file from my local machine file system?

Thanks

Dave

george.antoniadis
8 Apr 2008, 10:35 PM
you'd have to combine it together with another UX like saki's filetree.

Yuri
28 Apr 2008, 1:11 PM
This plugin is very useful, but I encountered a problem:
My htmleditor is in a popup window, when I click the insert image button, the MessageBox show behind the popup window.
How can I bringit to Front?
I have used WindowMgr.bringToFront method, but not succeed!
Can anyone help me ? Thanks in advance.

I think the only safe solution is to manipulate zseed parameter of the popup window. You set it once for your window group and the problem is solved for all popups & messageboxes.

sunjoo
2 Jun 2008, 2:24 PM
Hi

I have the same problem, any clue yet ? The code is here http://extjs.com/forum/showthread.php?t=37211

Fabyo
13 Oct 2009, 10:01 AM
is this plugin for extjs 3.0?

mschering
13 Oct 2009, 10:33 PM
Should also work in 3.0.

Fabyo
14 Oct 2009, 3:10 AM
but does not work, the error :


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

this.id.indexOf is not a function
Ext.DomHelper=function(){var s=null,j=/^...b.stopEvent();this.completeEdit()}}}});\n