martynjpearson
asked on
Contenteditable spans and line breaks
Hi, I have the following HTML, the idea being that users can edit between the square brackets :
<HTML><BODY>some content [<SPAN CONTENTEDITABLE>editable text here</SPAN>] some more content</BODY></HTML>
Now, if the user presses carriage return whilst editing within the span, I would like the right hand bracket (and any other text to the right of the cursor) to drop down on to the next line, so the user can continue editing. However, this is not what happens. What actually happens is that any text to the left of the cursor within the span stays on the same line, with the remained of the span content, along with the text outside the span dropping down on to the next line.
So, say I press carriage return when the cursor is between "editable" and "text", what it looks like is this (assuming my spacing works!!) :
editable
some content [text here] some more content
What I want it to look like is
some content [editable
text here] some more content
Can you please give me some assistance in achieving the desired result.
Many thanks
Martyn
<HTML><BODY>some content [<SPAN CONTENTEDITABLE>editable text here</SPAN>] some more content</BODY></HTML>
Now, if the user presses carriage return whilst editing within the span, I would like the right hand bracket (and any other text to the right of the cursor) to drop down on to the next line, so the user can continue editing. However, this is not what happens. What actually happens is that any text to the left of the cursor within the span stays on the same line, with the remained of the span content, along with the text outside the span dropping down on to the next line.
So, say I press carriage return when the cursor is between "editable" and "text", what it looks like is this (assuming my spacing works!!) :
editable
some content [text here] some more content
What I want it to look like is
some content [editable
text here] some more content
Can you please give me some assistance in achieving the desired result.
Many thanks
Martyn
I don't know if I understood correctly. Would adding a <br> tag where you want the line break to be solve your problem?
ASKER
Hi
No, I'm afraid that does the same as the user pressing carriage return, in that the result is as above.
Thanks
Martyn
No, I'm afraid that does the same as the user pressing carriage return, in that the result is as above.
Thanks
Martyn
I don't quite follow your explanation ...
Could you give it another try?
Could you give it another try?
Hi
I can get it to look like this (assuming spacing works) when I press return between "editable" and "text"...
some content [ editable
text here ] some more content
dont know if that would be any use to you?
Scott
I can get it to look like this (assuming spacing works) when I press return between "editable" and "text"...
some content [ editable
text here ] some more content
dont know if that would be any use to you?
Scott
ASKER
It's probably easier to paste the html above into notepad to see what I mean, but hopefully this explains things clearer....
When showing a page containing the HTML above in the browser, placing the cursor in the contenteditable area (say between the words editable and text) and pressing return causes the whole line to descend, leaving just the word editable on the original line. The bottom of the span appears to be aligned with the bottom of the surrounding text, and pressing carriage return maintains this alignment. i,e, you get something like this
editable
some content [text here] some more content
However, what I want to happen when pressing carriage return is for it to look how a word processor would look, i.e. the remainder of the span, and the text following the span get moved on to the next line, like so
some content [ editable
text here ] some more content
Hopefully that makes things clearer!
Cheers,
Martyn
When showing a page containing the HTML above in the browser, placing the cursor in the contenteditable area (say between the words editable and text) and pressing return causes the whole line to descend, leaving just the word editable on the original line. The bottom of the span appears to be aligned with the bottom of the surrounding text, and pressing carriage return maintains this alignment. i,e, you get something like this
editable
some content [text here] some more content
However, what I want to happen when pressing carriage return is for it to look how a word processor would look, i.e. the remainder of the span, and the text following the span get moved on to the next line, like so
some content [ editable
text here ] some more content
Hopefully that makes things clearer!
Cheers,
Martyn
ASKER
Scott (Collosseo) - my aim is to get the span to flow round fully, but certainly getting it to display how you show it would be a big step forward, so your solution would certainly be of use!
Cheers
Martyn
Cheers
Martyn
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Sean, Scott
Thanks for your replies. They both do the trick in making the text after the span appear on the right line, but (just to tax you further!) do you know if it is possible to make the text flow to the start of the line, i.e.
some content [ editable
text here] some more content
Rather than
some content [ editable
text here ] some more content
Thanks for your help
Martyn
Thanks for your replies. They both do the trick in making the text after the span appear on the right line, but (just to tax you further!) do you know if it is possible to make the text flow to the start of the line, i.e.
some content [ editable
text here] some more content
Rather than
some content [ editable
text here ] some more content
Thanks for your help
Martyn
Not going to happen I'm afraid...
...because, text generates boxes. So what you're asking for is this:
------------- ------------------------
| | | |
| | | |
-------------- ------------------------
-------------------- ------------------------
| | | |
| | | |
-------------------- ------------------------
------------- ------------------------
| | | |
| | | |
-------------- ------------------------
-------------------- ------------------------
| | | |
| | | |
-------------------- ------------------------
I have to agree with sean i just dont think it is possible because the other content is outwith the span so what is happening is this...
some content | span1 |
| span1 | some other content
whereas what you want is this
some content | span1 |
| span1 | some other content
Maybe someone can think of something else though
Scott
some content | span1 |
| span1 | some other content
whereas what you want is this
some content | span1 |
| span1 | some other content
Maybe someone can think of something else though
Scott
... so to do what you need, you would have to nest the initial content "inside" the editable region and float it, which may produce some strange results:
<span style="vertical-align:top; " CONTENTEDITABLE> <span style="float:left;">some content [</span> editable text here</span>
<span style="vertical-align:bott om;">] some more content</span>
<span style="vertical-align:top;
<span style="vertical-align:bott
ASKER
I think I'll make do with the text not wrapping back to the beginning of the line - at least it works properly in the span!!
Many thanks for your help on this
Martyn
Many thanks for your help on this
Martyn
Okay, and thanks for the A :-)
Yeah thanks Martyn... did you have any luck with seans idea around floating spans?
ASKER
The problem with the floating spans was that I could move text that was supposed to be read only. However, it's given me some more inspiration and some more things to try!!!
All the best
Martyn
All the best
Martyn
>> was that I could move text that was supposed to be read only
Yes - that's the problem. You "could" set the internal span to false - but the box itself would still be selectable, though uneditable. I have no idea how compliant nesting contenteditable regions is...
<span style="vertical-align:top; " contenteditable> <span style="float:left;" contenteditable="false">so me content [</span> editable text here</span>
<span style="vertical-align:bott om;">] some more content</span>
Yes - that's the problem. You "could" set the internal span to false - but the box itself would still be selectable, though uneditable. I have no idea how compliant nesting contenteditable regions is...
<span style="vertical-align:top;
<span style="vertical-align:bott