"merging" a picture and text into one entity

[DebMeri85]

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. http://need-help-with-text-editor.atspace.co.uk/

[Beverleyh]

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 http://www.tinymce.com/ 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.

[DebMeri85]

@Beverleyh:

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 (http://dojotoolkit.org/reference-gui...it/Editor.html), 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=http://img6.imageshack.us/img6/6136/82079139.jpg width=80><span id=test>A</span></div>

[djr33]

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:
http://www.dynamicdrive.com/forums/s...%28embedded%29

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.