Results 1 to 4 of 4

Thread: "merging" a picture and text into one entity

  1. #1
    Join Date
    Nov 2012
    Thanked 0 Times in 0 Posts

    Default "merging" a picture and text into one entity

    Hi all. Sorry if this is the wrong forum or section, I am new here

    I am trying to "combine" an image and text, in such a way that they can be manipulated as 1 entity. So I should be able to, for instance, click the entity (image or text) as a whole, and cut/paste it elsewhere in a text editor (see link below), or delete it with a single key press (backspace or DEL key), etc. I am not sure what features HTML supports, but is there a feature that is equivalent to a container/wrapper that "merges" the picture and text into one? (kinda like a "textbox" in MS Word)

    I posted my code online, feel free to take a look.

  2. #2
    Join Date
    Jul 2008
    Derbyshire, UK
    Thanked 599 Times in 575 Posts
    Blog Entries


    I think there are 2 questions here - what will HTML allow? and what will the editor js allow?

    In HTML, the way to group text and image together as one is with a div. Put the text and image inside the div tags and that becomes a container that groups child elements together to allow easier manipulation in HTML / with CSS.

    But you ask for the editor to also treat the grouped elements as one. I can't say what will happen with that as I'm currently on iPhone but that I presume would boil down to the way the editor js interprets the grouping, (and possibly any CSS associated with the text/image grouping) which might produce unusual behaviours. For example, the delete action may delete everything in one click but the editor might not interpret the CSS for a text/image overlay inside the editing window, meaning that whats inside the editing window doesnt look the same as the way HTML displays it normally.

    I guess you could just have a play with the div container in place though and see what happens.

    I haven't used this particular editor script so I'm not sure of what it can do. As an alternative, I can suggest TinyMCE which I know does what you want. It can display any HTML inside of its editing window, with your own CSS applied, which means that you can make the stuff inside the editor look very almost identical to how its displayed on a normal page in a browser.

    Report back and let us know your findings.
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  3. #3
    Join Date
    Nov 2012
    Thanked 0 Times in 0 Posts



    Thank you for the quick response, appreciate it!

    The code I posted above is not actually a part of my webapp that I am currently working on. In my experience though, 99% of (modern) Rich text editor's offer the same basic functionality, while others just enhance that with various "luxury" capabilities (emoticons, various font selection, etc).

    The editor I am actually using is the Dojo text editor (, but in order for me to post my question online in a timely fashion, I decided to use the text editor from DynamicDrive, rather than port over my dojo library and all the files. Any adjustments from one editor to the other (if any) would be minimal, so that was not of concern.

    I will look into the div tag and see what is possible, and I'll report back shortly. Also, no CSS is involved here. Just html and JS.

    Edit: Unfortunately the div tag didn't combine them together. Pressing the delete key, for example, still required that each item (pic, text) to be erased individually, rather than together as a whole (like a textbox, for example).

    Here is what I tried:

    <div id=letterA><img src= width=80><span id=test>A</span></div>
    Last edited by DebMeri85; 11-25-2012 at 04:48 PM.

  4. #4
    Join Date
    Mar 2006
    Illinois, USA
    Thanked 690 Times in 678 Posts


    I've been playing with some things similar to this. There is no functionality like that. The browser will automatically skip over HTML tags while typing. In my case I was using <p> and <em>/<strong>, but it's the same idea; it won't do what you want.

    You'll have to capture the keystrokes and do something else with them; that will be very difficult. We might want to keep in touch about updates with our respective projects to see if we find any better solutions, but I haven't found any.

    My current concept is to disable text editing beyond pure text-- somehow override the default allowing the cursor to move from one tag to another. (This is possible by setting one object as editable and not another, but it gets a little complicated to say the least.)

    Anyway, here's a link to my ongoing discussion on that, if it happens to help you:

    Eventually I'd like to include things like you're doing, but I'm starting with the basics.

    Don't let my post drag this conversation off-topic, but I have a feeling you'll soon run into exactly the same difficulties I have.
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

Similar Threads

  1. Replies: 0
    Last Post: 04-11-2009, 08:48 AM
  2. Fixing a "picture pyramid"
    By ModernRevolutions in forum HTML
    Replies: 2
    Last Post: 03-11-2009, 09:47 PM
  3. Replies: 3
    Last Post: 08-06-2008, 02:17 AM
  4. Adding line of HTML to slideshow to show "Picture 1 of xxx" etc
    By TabithaDas in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 10-10-2006, 03:42 PM
  5. "Submit a Picture" code
    By Crispy in forum HTML
    Replies: 6
    Last Post: 04-18-2006, 09:25 AM


Posting Permissions

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