...

View Full Version : CONTEXTEDITABLE, and other IE foolishness



Shecky
04-24-2004, 10:08 AM
I hate to do it, but please look at the source of this page (http://www.aimpics.com/testformat/format.htm) for reference. I've marked with some comment tags the area of interest.


I'm working on a contexteditable text input area that i've formated to look kinda like the AIM message input area (just for flare.)

I'm working on making it insert smiley faces like AIM does... but its a lot harder than it sounds.

My speedbumps
1. I need it to insert a smiley at the cursor position, then have the cursor after it. (thats how it is right now, sort of... I'm using 'insertAdjacentHTML' but that only works if the smiley is inserted at the very end of the text entered)

2. I'd like to be able to disable the resize handles on the smiley images.

3. I'd like to be able to adjust smiley sizes if they are contained within the current selection and the user clicks the increase or decrease font size buttons. (would be nice, would be hard, not really that necessary.)


I have some leads, some ideas, but I'm probably on the wrong track anyways. Anyone got any bright ideas? I pulled out mosta my hair looking through msdn documentation. :)

swmr
04-24-2004, 10:49 AM
The InsertImage Command (http://msdn.microsoft.com/workshop/author/dhtml/reference/constants/insertimage.asp) could work.
I can't remember if the handles can be toggled, but think not. Perhaps inserting smiley-text, such as the way this forum does, and later transforming that based on font-size (once design-mode is off) would be easiest.

swmr
04-24-2004, 11:08 AM
Originally Posted by :rolleyes:

I can't remember if the handles can be toggled...

Recalling where I'd seen that, take a look at the example of 2D-position here: onmove Event (http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/events/onmove.asp)

Shecky
04-24-2004, 11:33 AM
its awesome that someone is up so early to answer me questions :)

The problem with insert image is that right away when the image is inserted it selects it and shows the handles. I can do document.selection.empty() to deselect them, but Im not sure how to set the cursor position to just after that smiley, then. I thought something like insertAdjacentHTML would be the right way to go, giving me the ability to add an object reference if i needed it.

As far as diabling the handles goes, I thought maybe some kinda onfocus (or like event) would be able to keep the handles from activating, but thus far I haven't found the right one. Im not sure exactly what you mean Im supposed to do with the onmove event. That just turns all blocks in the contexteditable div into drag-and-drop elements. I already have drag-drop and pasting disabled on security and... umm.. complexity of input concerns.

swmr
04-24-2004, 12:26 PM
I didn't mean to suggest that you use onmove for anything; that's just where there happened to be an example for using the 2D-position execCommand (but that doesn't affect much after all... ;)).

All I can think of is to insert something like:

<span contenteditable="false"><img src="..."></span>

As for getting the position of the caret, there is an mshtml interface for that, though it seems non-accessible from script...

Shecky
04-24-2004, 02:54 PM
the span idea helped actually. it fixed it about half way. There's still some kinda bug where if you click the image while its selected it becomes a control range element or something. I'm confident I'll get that one clocked in no time, though. i managed to discover the solution to my smiley insertion looked something like this




var smileyval = "<span CONTENTEDITABLE='false'><img src='sm"+emot+"-"+smilesize+".gif'>";
var getpos = document.selection.createRange();
getpos.pasteHTML(smileyval);
}



I was reluctant to try pasteHTML in the first place cuz I had onpaste="return false" set to my contexteditable div... but upon closer inspection (like actually reading the description) i realized it had nothing to do with your clipboard :)

Now if anyone can help me with part 3 of my problem, the smileys to increase and decrease in size with my font. :cool:

squirellplaying
04-24-2004, 05:12 PM
That site is wicked nice. I had to do something like that but it didn't look nearly as nice as that. But FYI it doesn't work in firefox.

swmr
04-24-2004, 10:31 PM
Now if anyone can help me with part 3 of my problem, the smileys to increase and decrease in size with my font. :cool:


document.queryCommandValue("FontSize"); will return a number between 1 and 7, so...

Shecky
04-25-2004, 12:12 AM
That site is wicked nice. I had to do something like that but it didn't look nearly as nice as that. But FYI it doesn't work in firefox.

cross-browser isnt my thing. anyone who uses mozilla realizes that if a site doesn't work, its probably their fault, and they switch over to IE. If people didn't have such a hate for ms and a little anarchist streak in them, like it mattered what browser they used, they all use IE and we'd be one step closer to global unity... (or fascism ::shrug::)

Mozilla 1.3 actually had its own version of contextEditable... with as much headache as the IE version is giving me, though, I'm not extra excited to dive into another vat of proprietary commands.

Shecky
04-25-2004, 12:19 AM
document.queryCommandValue("FontSize"); will return a number between 1 and 7, so...

heh yeah i already got the font query thing, its how i decide what size the smiley is gunna be in the first place.

all i need is a way basically change the src value of the smiley if it is within the text selection.
something like createRange, inRange and a loop for a collection of smiley's. I just woke up so it'll take my brain about a half a pot of joe to get up to speed, someone give me the easy way out so I dont have to go back to that damned msdn site :p



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum