Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    Regular Coder
    Join Date
    Dec 2002
    Posts
    109
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Internet Explorer CONTEXTEDITABLE, and other IE foolishness

    I hate to do it, but please look at the source of this page 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.
    seldom ruined but by myself

  • #2
    Regular Coder
    Join Date
    Feb 2003
    Posts
    638
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The InsertImage Command 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.
    hmm... ?

  • #3
    Regular Coder
    Join Date
    Feb 2003
    Posts
    638
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Originally Posted by

    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
    hmm... ?

  • #4
    Regular Coder
    Join Date
    Dec 2002
    Posts
    109
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    seldom ruined but by myself

  • #5
    Regular Coder
    Join Date
    Feb 2003
    Posts
    638
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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...
    hmm... ?

  • #6
    Regular Coder
    Join Date
    Dec 2002
    Posts
    109
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

    Code:
    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.
    seldom ruined but by myself

  • #7
    Regular Coder
    Join Date
    Jan 2004
    Location
    Maryland
    Posts
    468
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #8
    Regular Coder
    Join Date
    Feb 2003
    Posts
    638
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Shecky
    Now if anyone can help me with part 3 of my problem, the smileys to increase and decrease in size with my font.
    document.queryCommandValue("FontSize"); will return a number between 1 and 7, so...
    hmm... ?

  • #9
    Regular Coder
    Join Date
    Dec 2002
    Posts
    109
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by squirellplaying
    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.
    seldom ruined but by myself

  • #10
    Regular Coder
    Join Date
    Dec 2002
    Posts
    109
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by swmr
    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
    seldom ruined but by myself


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •