PDA

View Full Version : HTMLEditorImage Plugin



dangreenfield
8 Apr 2008, 10:32 PM
I've been working on a plugin to allow a user to add an image to the HTMLEditor. I thought about a simple dialog box, like the Insert Link function, but I decided to create a more advanced one to allow the user to change and modify the attributes of the inserted image. I also wanted to cater for browsing and uploading images to the server as well.

This wasn't an easy task, and I'm still not finished. Both IE and Firefox have outstanding issues that I need to address. For instance, both browsers change relative paths to absolute paths when you specify the image source. I'm not sure if this is really a problem, so feel free to comment if you have an opinion on this. Also, IE loses its selection when you open a dialog box, which is a real pain. I refocus the editor before applying the image but it seems to simply forget that anything was selected. I don't know if this is an EXT problem or not, as it only seems to lose focus when you attempt to enter text in the dialog box. Opening the image browser and selecting an image doesn't seem to cause it.

Whatever, it somewhat works at the moment, and I will look at the outstanding problems when I get time.

You can see the demo here: http://coder.4realhost.com/htmleditorimage/.

Although I have disabled the upload and delete functions in the Image Browser, the PHP code is supplied and working, so you just need to delete and uncomment some code in the imagebrowser.js file.

Let me know your thoughts!

dangreenfield
9 Apr 2008, 12:27 PM
For those who don't like demos, here are images of the tool...

w011117
17 Apr 2008, 2:18 PM
Hello,
Thanks for the plugin.....

My problem is that the image dialog pops up behind the HtmlEditor which is displayed in a Window.
I tried adding "z-index: 9999;" using the style: config to the "window" in htmleditorimage.js but that did not fix the problem.

How can I make the image dialog show on top?

thanks,
Timmer

dangreenfield
17 Apr 2008, 7:23 PM
My problem is that the image dialog pops up behind the HtmlEditor which is displayed in a Window.
I tried adding "z-index: 9999;" using the style: config to the "window" in htmleditorimage.js but that did not fix the problem.

How can I make the image dialog show on top?

I haven't experimented with the HtmlEditor in a window, so I've never used the z-index config parameter before. Perhaps someone else has a solution?

Please include it here if you find a solution. Thanks.

haiiiiiyun
21 Apr 2008, 9:38 PM
Hello,
Thanks for the plugin.....

My problem is that the image dialog pops up behind the HtmlEditor which is displayed in a Window.
I tried adding "z-index: 9999;" using the style: config to the "window" in htmleditorimage.js but that did not fix the problem.

How can I make the image dialog show on top?

thanks,
Timmer

I have the same problem, anybody has a solution? thnx.

sunjoo
21 May 2008, 6:33 AM
Hello,

What is the license terms for image insert scripts ? It is a great plugin I think.

Cheers

dangreenfield
21 May 2008, 11:00 AM
Use and abuse to your hearts content. Mi c

kai5263499
22 May 2008, 7:58 AM
I added a 200ms defer to the htmleditorimage.js file based on this comment:
http://extjs.com/forum/showthread.php?p=118639#post118639

..and it seemed to do the trick without manipulating the zindex.

dangreenfield
22 May 2008, 1:30 PM
I added a 200ms defer to the htmleditorimage.js file based on this comment:
http://extjs.com/forum/showthread.php?p=118639#post118639

..and it seemed to do the trick without manipulating the zindex.

Well done, my friend. This one was bugging me because I didn't know how to solve it! Thanks for the tip! =D>

JorisA
26 May 2008, 2:47 AM
awesome!

spectrus
28 May 2008, 5:18 AM
dangreenfield,

An excellent plugin, thank you, lots to learn from it.

A question: I noticed that there are IE/FF-specific code blocks, and it doesn't quite work in Safari and Opera (chokes on insertImageByBrowser method). Could you please shed some light on the reasons, and what could be some ways to tackle this issue?

Thanks in advance!

dangreenfield
28 May 2008, 12:04 PM
I noticed that there are IE/FF-specific code blocks, and it doesn't quite work in Safari and Opera (chokes on insertImageByBrowser method). Could you please shed some light on the reasons, and what could be some ways to tackle this issue?

Yeah, I must admit, I've been a bit slack with Opera and Safari. I noticed a lot of tricky functionality was bypassed for these browsers in the native Ext code (perhaps they just couldn't do it), and since I had very little experience with them myself, I chose to exclude them as well.

Please feel free to apply your expertise to this and figure out any ways to add the functionality to these browsers. Don't forget to post your code! ;)

Ramsay
28 May 2008, 11:53 PM
This is brilliant, exactly what I'm looking for!

sunjoo
2 Jun 2008, 3:06 PM
Hi

Trying to figure out what I am missing with image insert window that appears behind the editor. However, if one window is open behind the editor, then from the second click it opens in FRONT of the editor.

the code is http://extjs.com/forum/showthread.php?t=37211

Any help would be appreciated.

Cheers
SunJoo

dangreenfield
2 Jun 2008, 4:20 PM
Hi

Trying to figure out what I am missing with image insert window that appears behind the editor. However, if one window is open behind the editor, then from the second click it opens in FRONT of the editor.

the code is http://extjs.com/forum/showthread.php?t=37211

Any help would be appreciated.

Cheers
SunJoo

Did you try what kai5263499 suggested in entry #8 of this thread?

cocely
30 Jun 2008, 6:57 PM
vrey good,i like=D>

dizelland
12 Jul 2008, 3:16 AM
dangreenfield,

An excellent plugin, thank you, lots to learn from it.

A question: I noticed that there are IE/FF-specific code blocks, and it doesn't quite work in Safari and Opera (chokes on insertImageByBrowser method). Could you please shed some light on the reasons, and what could be some ways to tackle this issue?

Thanks in advance!

i've added following code for insert image to opera:


var insertImageByBrowser = function() {

if (Ext.isIE) {

// ie-specific code
return function() {

// get selected text/range
var selection = editor.doc.selection;
var range = selection.createRange();

// insert the image over the selected text/range
range.pasteHTML(createImage().outerHTML);
};
}else if(Ext.isOpera){
return function(){
editor.relayCmd('inserthtml', createImage().outerHTML);
};
} else {

// firefox-specific code
return function() {

// get selected text/range
var selection = editor.win.getSelection();

// delete selected text/range
if (!selection.isCollapsed) {
selection.deleteFromDocument();
}

// insert the image
selection.getRangeAt(0).insertNode(createImage());
};
}
}();

marleone
27 Aug 2008, 8:00 AM
Thank you for a very interesting plugin. But, like you said yourself, unfortunately the plugin doesn't work so well in IE7 :((

Does anyone have a version of the HTMLEditorImage plugin, where some or all errors already is corrected?

Just want to know before I use a lot of hours developing further on the plugin (:|

temporary
17 Sep 2008, 9:26 AM
hi, the link in the first page is down...

can this extension be downloaded somewhere else? or has anyone saved it and could send it to me?

dangreenfield
17 Sep 2008, 2:17 PM
hi, the link in the first page is down...

can this extension be downloaded somewhere else? or has anyone saved it and could send it to me?

Sorry, the old free webhost seems to have gone. I have uploaded the demos to a new one.

Link: http://coder.4realhost.com/htmleditorimage/

mask_hot
19 Sep 2008, 4:02 AM
Hello Dan,

I would like to add a functionnality in a HTMLEditor :

In my HTMLEditor I will type reports and I would like to insert links about objects managed by my application.
So I would like to have , for example, a combobox listing people managed and when I'll select in my combo, it should insert a link to this people (for example open a new tab in my viewport, tab in which there will be informations about this people).

My questions :
- Do you think it's feasible? (everything is possible when we have time and skills...)
- Do you think it's easy to do?
- Do I have to follow the way of you HTMLEditorImage to incorporate my plugin?

dangreenfield
19 Sep 2008, 8:06 PM
Check out the HTMLEditor Styles Plugin (see http://extjs.com/forum/showthread.php?t=19059) as it provides a combo box with options that affect the code. It should be very easy to modify it to perform a simple link include.

turbovegas
10 Feb 2009, 7:31 AM
Dan,

Awesome extension! I've was working on this same problem for a couple of hours, and then found this thread and stopped working!

One thing I added to my extension was the use of the Ext.Msg.prompt for Links instead of the standard JS prompt window. Here's what I added:

Add a new property to validate urls (does a simple RegEx match on the beginning of the string):


enforceValidUrl: true,Then, override the current createLink method:



createLink: function() {

Ext.Msg.prompt("Create Link", this.createLinkText, function(v, url) {
if (v == "ok") {
if (this.enforceValidUrl && !url.match(/^http(s)*:\/\//)) {
Ext.Msg.alert("Url Error", "Your url [" + url +"] does not look like a valid url.");
return;
}
this.relayCmd('createlink', url);
}
},
this,
false,
this.defaultLinkValue);
},
I'm not really sure why they chose to use the standard JS prompt over their prompt, but I like their prompt better.

Dumas
6 Apr 2009, 6:47 AM
@turbovegas (http://extjs.com/forum/member.php?u=40440): good idea, like that Ext.Msg.prompt() ;)


enforceValidUrl: true,
Where do I have to add this? In which file/line/function?


about the HtmlEditorImage:

I've some strange bugs while displaying the Editor (no your demo, but my one, any idea what that could be? (there is no more css than all provided .css copied in one big file, in the same order als included in the demo ...
http://img207.imageshack.us/img207/2569/ie7.jpg


thx a lot
Dumas

turbovegas
6 Apr 2009, 12:15 PM
Dumas,

Yeah, that would probably help, huh ;)

In the HTMLEditor.js file, when Dan extends the Ext.form.HtmlEditor (begins on line 134) is where the enforceValidUrl property and createLink method will go. The can go anywhere inside that declaration.

Turbovegas

Dumas
7 Apr 2009, 7:52 AM
When it's finishoff course I can uplaod the modified version ;)

thx
Dumas

ROMAHi4_
14 Apr 2009, 10:14 AM
Awesome, you are monster B)

Dumas
20 Apr 2009, 4:48 PM
solved, there's just the strange IE bug left....

Dumas
18 May 2009, 4:48 PM
I've found a strange Bug:

I'm using the recordForm GridEditor (http://recordform.extjs.eu/) which opens a new window from the grid. Now by clicking on the image icon, but the HTMLEditorImage window appears behind the recordForm, not in front of it.
So I added this line of code: Ext.WindowMgr.bringToFront(win);
But still it's behind the recordForm, why?

thx
Dumas

cmendez21
30 Jul 2009, 8:31 AM
HI, it seems to be a nice plugin however the link its down and no where to download it can you send a link or a zip file to download it

thanks..!

moegal
1 Aug 2009, 9:11 AM
I could use the files as well. Anyone have them?

Marty

triptych1
11 Aug 2009, 5:35 AM
I found the source here:

http://trac.innovacode.com/browser/public/extjs/htmleditor/trunk/danwgreenfield?rev=78

moegal
11 Aug 2009, 5:50 AM
great, thanks

phamhphuc
3 Sep 2009, 10:15 PM
I can not checkout. Pls help me

kostik83
16 Mar 2011, 7:34 AM
Did anyone try to convert this to Ext 3.0?