[lnkForumImage]
TotalShareware - Download Free Software
Confronta i prezzi di migliaia di prodotti.
Asp Forum
 Home | Login | Register | Search 


 

Forums >

comp.lang.javascript

new line in a contentEditable div

Julien Arlandis

10/3/2014 11:33:00 AM

Hello,

If i insert a line break into this contentEditable div :

<div class="a">I insert a line break ^ here</div>

I get the result :

<div class="a">I insert a break <br> here</div>

But I want :

<div class="a">I insert a break</div>
<div class="a">here</div>

An idea?

Thanks.


--
Posted with Nemo : <http://news.nemoweb.net/?Jid=4b3afe79c9bbea3371221c48e0b0690a346b72d8@news.nemow...
17 Answers

JJ

10/3/2014 12:46:00 PM

0

On Fri, 03 Oct 14 11:33:23 +0000, Julien Arlandis wrote:
> Hello,
>
> If i insert a line break into this contentEditable div :
>
> <div class="a">I insert a line break ^ here</div>
>
> I get the result :
>
> <div class="a">I insert a break <br> here</div>
>
> But I want :
>
> <div class="a">I insert a break</div>
> <div class="a">here</div>
>
> An idea?
>
> Thanks.

Replace the DIV contents' HTML code.

var div = document.querySelector(".a");
if (div) {
var html = div.innerHtml; //e.g. "I insert a break here"
var insertPos = 16; //i.e. the space after "break"
var htmlToInsert = '</div><div class="a">';
var newHtml = html.substr(0, insertPos) +
insertHtml + html.substr(insertPos + 1);
div.innerHtml = newHtml;
}

Care must be taken when the insertion point splits another HTML tag within
the DIV.

Evertjan.

10/3/2014 1:00:00 PM

0

Julien Arlandis <julien.arlandis@laposte.net> wrote on 03 okt 2014 in
comp.lang.javascript:

> If i insert a line break into this contentEditable div :
>
> <div class="a">I insert a line break ^ here</div>
>
> I get the result :
>
> <div class="a">I insert a break <br> here</div>
>
> But I want :
>
> <div class="a">I insert a break</div>
> <div class="a">here</div>
>
> An idea?

I have.

I think it is a bad idea to have html-code
in a contentEditable element.

Perhaps you could change all < to &lt; onfocus,
and change them back onblur,
only if your users are html-wizzkids exclusively,
and refrain from inserting <s on their own.



--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

Julien Arlandis

10/3/2014 1:14:00 PM

0

Le 03/10/2014 à 14:46, JJ a écrit :
> On Fri, 03 Oct 14 11:33:23 +0000, Julien Arlandis wrote:
>> Hello,
>>
>> If i insert a line break into this contentEditable div :
>>
>> <div class="a">I insert a line break ^ here</div>
>>
>> I get the result :
>>
>> <div class="a">I insert a break <br> here</div>
>>
>> But I want :
>>
>> <div class="a">I insert a break</div>
>> <div class="a">here</div>
>>
>> An idea?
>>
>> Thanks.
>
> Replace the DIV contents' HTML code.
>
> var div = document.querySelector(".a");
> if (div) {
> var html = div.innerHtml; //e.g. "I insert a break here"
> var insertPos = 16; //i.e. the space after "break"
> var htmlToInsert = '</div><div class="a">';
> var newHtml = html.substr(0, insertPos) +
> insertHtml + html.substr(insertPos + 1);
> div.innerHtml = newHtml;
> }
>
> Care must be taken when the insertion point splits another HTML tag within
> the DIV.


Thanks for your answer, how I do to locate position of cursor in my
contentEditable field transcribed in HTML?


--
Ce message a été posté avec Nemo : <http://news.nemoweb.net/?Jid=7405a2508bc3fc78b67de288949d06f44864053d@news.nemow...

Julien Arlandis

10/3/2014 1:18:00 PM

0

Le 03/10/2014 à 14:59, "Evertjan." a écrit :
> I have.
>
> I think it is a bad idea to have html-code
> in a contentEditable element.
>
> Perhaps you could change all < to &amp;lt; onfocus,
> and change them back onblur,
> only if your users are html-wizzkids exclusively,
> and refrain from inserting <s on their own.

But it's for an editing message for usenet client, to understand my problem
go to my website <http://news.nemoweb.net/?Jid=a2dd0d703703f18542e89ab7f7458b3adb0b296f@news.nemow... .

and click on "Nouveau Sujet" then click on the </> button (at right of the
window).

Every line correspond to a citation level.


--
Ce message a été posté avec Nemo : <http://news.nemoweb.net/?Jid=a2dd0d703703f18542e89ab7f7458b3adb0b296f@news.nemow...

Julien Arlandis

10/3/2014 1:19:00 PM

0

Le 03/10/2014 à 14:59, "Evertjan." a écrit :
> I have.
>
> I think it is a bad idea to have html-code
> in a contentEditable element.
>
> Perhaps you could change all < to &amp;lt; onfocus,
> and change them back onblur,
> only if your users are html-wizzkids exclusively,
> and refrain from inserting <s on their own.

But it's for an editing message for usenet client, to understand my problem
go to my website <http://news.nemoweb.net/?Jid=51f05d53215c286d6b613f905da3d1b94cf46b8e@news.nemow... .

and click on "Répondre" button then click on the </> button (at right of
the window).

Every line correspond to a citation level.


--
Ce message a été posté avec Nemo : <http://news.nemoweb.net/?Jid=51f05d53215c286d6b613f905da3d1b94cf46b8e@news.nemow...

Jukka K. Korpela

10/3/2014 1:21:00 PM

0

2014-10-03 14:33, Julien Arlandis wrote:

> If i insert a line break into this contentEditable div :
>
> <div class="a">I insert a line break ^ here</div>
>
> I get the result :
>
> <div class="a">I insert a break <br> here</div>

The contenteditable="true" attribute has been defined just as making the
element content editable by the user. The user interface has been left
browser-dependent. This also applies to handling Enter, which actually
varies a lot. Some browsers generate br elements, some generate div
elements, and some generate p elements, etc.

> But I want :
>
> <div class="a">I insert a break</div>
> <div class="a">here</div>

What you need to do is to process the element content after user edits
and, if needed, modify it. Then you can, for example, split a div
element if it contains a br element. I won't write the code for you,
mainly because I don't know what you want as a whole. In addition to
tactical questions like dealing with a br element, you need a strategy:
what are you going to do with the element as modified user input, and if
it is to be converted to some specific canonical format, what exactly is
that format.

Note that user input may, for example produce b and i elements in the
content. It may also contain links etc., at least if it was copypasted.

--
Yucca, http://www.cs.tut.fi/...

Evertjan.

10/3/2014 2:23:00 PM

0

Julien Arlandis <julien.arlandis@laposte.net> wrote on 03 okt 2014 in
comp.lang.javascript:

> Le 03/10/2014 Çÿ 14:59, "Evertjan." a Ǹcrit :
>> I have.
>>
>> I think it is a bad idea to have html-code
>> in a contentEditable element.
>>
>> Perhaps you could change all < to &amp;lt; onfocus,
>> and change them back onblur,
>> only if your users are html-wizzkids exclusively,
>> and refrain from inserting <s on their own.
>
> But it's for an editing message for usenet client, to understand my
> problem ...

I don't understand your "but", Julien,
as your argument does not address my point of view.

If you want to edit a text-message,
usenet surely is about text-messages,
use <textarea></textarea>.

Even Google still makes a mess of it when using content-editable,
and they have more programmer hours to spend than any individual.

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

Julien Arlandis

10/3/2014 3:16:00 PM

0

Le 03/10/2014 à 16:22, "Evertjan." a écrit :
> Julien Arlandis <julien.arlandis@laposte.net> wrote on 03 okt 2014 in
> comp.lang.javascript:
>
>> Le 03/10/2014 ? ? 14:59, "Evertjan." a Ǹcrit :
>>> I have.
>>>
>>> I think it is a bad idea to have html-code
>>> in a contentEditable element.
>>>
>>> Perhaps you could change all < to &amp;lt; onfocus,
>>> and change them back onblur,
>>> only if your users are html-wizzkids exclusively,
>>> and refrain from inserting <s on their own.
>>
>> But it's for an editing message for usenet client, to understand my
>> problem ...
>
> I don't understand your "but", Julien,
> as your argument does not address my point of view.
>
> If you want to edit a text-message,
> usenet surely is about text-messages,
> use <textarea></textarea>.
>
> Even Google still makes a mess of it when using content-editable,
> and they have more programmer hours to spend than any individual.

Even in a text-message there is coloration for level citation, and further
the nemo client can display images and formatting text, so a textarea is
not sufficient for my application.

Look for example this message on Nemo, there is strong,
italic and underline words that you can't see on usenet :
<http://news.nemoweb.net/?Jid=f8eb75a99cf32a4f76c97abbc34285dadf024206@news.nemow...

Evertjan.

10/3/2014 4:28:00 PM

0

Julien Arlandis <julien.arlandis@laposte.net> wrote on 03 okt 2014 in
comp.lang.javascript:

> Even in a text-message there is coloration for level citation, and further
> the nemo client can display images and formatting text, so a textarea is
> not sufficient for my application.
>
> Look for example this message on Nemo, there is strong,
> italic and underline words that you can't see on usenet :

This is silly,
why bother making a usenet client that can produce
what cannot be seen on usenet anyway.

Usenet is for plain text, usenet has no italics.

==========================

But say you are making a non-usenet application,
wouldn't it be much better just to detect text input,
also of html-elements perhaps,
and do a DOM-repaint after every stroke.

You could have a stroke of luck that it actually works,
and not as stuttering as some highly complex applications
I have seen on the web, as DOM-repainting takes time.

Content-editable is not designed to change anything other
than plain text-nodes.

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

Christoph M. Becker

10/3/2014 4:54:00 PM

0

Evertjan. wrote:

> Content-editable is not designed to change anything other
> than plain text-nodes.

No. The contentEditable as well as designmode attribute have been
invented to allow so-called rich-text editing[1]. Otherwise a textarea
would be sufficient.

[1] <https://developer.mozilla.org/en/docs/Rich-Text_Editing_in_M...

--
Christoph M. Becker