Solved

Contenteditable spans and line breaks

Posted on 2004-08-13
18
1,498 Views
Last Modified: 2012-05-05
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
0
Comment
Question by:martynjpearson
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 7
  • 6
  • 4
  • +1
18 Comments
 
LVL 3

Expert Comment

by:pulupul
ID: 11791747
I don't know if I understood correctly. Would adding a <br> tag where you want the line break to be solve your problem?
0
 
LVL 8

Author Comment

by:martynjpearson
ID: 11791764
Hi

No, I'm afraid that does the same as the user pressing carriage return, in that the result is as above.

Thanks
Martyn
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 11791802
I don't quite follow your explanation ...
Could you give it another try?
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 15

Expert Comment

by:Colosseo
ID: 11791863
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
0
 
LVL 8

Author Comment

by:martynjpearson
ID: 11791864
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
0
 
LVL 8

Author Comment

by:martynjpearson
ID: 11791882
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
0
 
LVL 15

Assisted Solution

by:Colosseo
Colosseo earned 125 total points
ID: 11791896
Here you go then, not great but...

<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td valign="top">some content [ </td>
    <td><SPAN CONTENTEDITABLE>editable text here</SPAN></td>
    <td valign="bottom"> ] some more content</td>
  </tr>
</table>

Still working on getting what you are after but can't think of a good way at the moment

Regards

Scott
0
 
LVL 31

Accepted Solution

by:
seanpowell earned 125 total points
ID: 11791944
Do you mean like this?

<HTML>
<BODY>
some content [
<span style="vertical-align:top;" CONTENTEDITABLE>editable text here</span>
] <span style="vertical-align:bottom;">some more content</span>

</BODY>
</HTML>
0
 
LVL 8

Author Comment

by:martynjpearson
ID: 11791996
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
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 11792011
Not going to happen I'm afraid...
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 11792057
...because, text generates boxes. So what you're asking for is this:

 -------------  ------------------------
|                | |                             |
|                | |                             |
 --------------  ------------------------
 --------------------   ------------------------
|                        | |                             |
|                        | |                             |
 --------------------   ------------------------
0
 
LVL 15

Expert Comment

by:Colosseo
ID: 11792061
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
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 11792110
... 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:bottom;">] some more content</span>
0
 
LVL 8

Author Comment

by:martynjpearson
ID: 11792448
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
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 11792480
Okay, and thanks for the A :-)
0
 
LVL 15

Expert Comment

by:Colosseo
ID: 11792512
Yeah thanks Martyn... did you have any luck with seans idea around floating spans?
0
 
LVL 8

Author Comment

by:martynjpearson
ID: 11792549
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
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 11792596
>> 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">some content [</span> editable text here</span>
<span style="vertical-align:bottom;">] some more content</span>
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Send email using HTML and PHP in separate file 5 60
Triple line in an alert message 4 37
html form layout 4 53
HTML 5 Input Type Numeric 5 32
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

739 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question