new line in a contentEditable div

[Julien Arlandis]

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=4b3afe79c9bbea337122...@news.nemoweb.net>

[JJ]

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.]

Julien Arlandis <julien....@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]

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=7405a2508bc3fc78b67d...@news.nemoweb.net>

[Julien Arlandis]

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=a2dd0d703703f18542e8...@news.nemoweb.net> .

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=a2dd0d703703f18542e8...@news.nemoweb.net>

[Julien Arlandis]

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=51f05d53215c286d6b61...@news.nemoweb.net> .

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=51f05d53215c286d6b61...@news.nemoweb.net>

[Jukka K. Korpela]

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/~jkorpela/

[Evertjan.]

Julien Arlandis <julien....@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.

[Julien Arlandis]

Le 03/10/2014 à 16:22, "Evertjan." a écrit :
> Julien Arlandis <julien....@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=f8eb75a99cf32a4f76c9...@news.nemoweb.net>

[Evertjan.]

Julien Arlandis <julien....@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.

[Christoph M. Becker]

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_Mozilla>

--
Christoph M. Becker

[Evertjan.]

"Christoph M. Becker" <cmbec...@arcor.de> wrote on 03 okt 2014 in
comp.lang.javascript:

Read again:

> "Rich-text editing is initialized by setting the designMode property of
> a document to "On", such as the document inside an iframe. Once
> designMode has been set to "On", the document becomes a rich-text
> editing area and the user can type into it as if it were a textarea. The
> most basic keyboard commands such as copy and paste are available, all
> others need to be implemented by the website.
>
> Similarly, setting contentEditable to "true" allows you to make
> individual elements of a document editable."

So "contentEditable" is only for the content of "individual elements",
and IMHO that is just plain text.

Anyway,
you are just argumenting by authority,
if something is designed to fly,
does not mean it actually can fly.

[Christoph M. Becker]

Evertjan. wrote:

> "Christoph M. Becker" <cmbec...@arcor.de> wrote on 03 okt 2014 in
> comp.lang.javascript:
>

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

>
>> "Rich-text editing is initialized by setting the designMode property of
>> a document to "On", such as the document inside an iframe. Once
>> designMode has been set to "On", the document becomes a rich-text
>> editing area and the user can type into it as if it were a textarea. The
>> most basic keyboard commands such as copy and paste are available, all
>> others need to be implemented by the website.
>>
>> Similarly, setting contentEditable to "true" allows you to make
>> individual elements of a document editable."
>
> So "contentEditable" is only for the content of "individual elements",
> and IMHO that is just plain text.

I suggest that you read the first paragraph that you have quoted again,
especially:

| Once designMode has been set to "On", the document becomes a rich-text

| editing area [...]

Anyway, what is the content of div#foo (an individual element) in the
following example:

<div id="foo">
<div id="bar">
blah
</div>
</div>

> Anyway,
> you are just argumenting by authority,

No, I'm arguing by (what comes closest to a) specification.

> if something is designed to fly,
> does not mean it actually can fly.

So you are arguing that, for instance,
<http://www.tinymce.com/tryit/basic.php> doesn't allow rich-text editing?

--
Christoph M. Becker

[JJ]

On Fri, 03 Oct 14 13:13:42 +0000, Julien Arlandis wrote:
> Thanks for your answer, how I do to locate position of cursor in my
> contentEditable field transcribed in HTML?

That's one of the problem. There isn't any standard function to get the
caret position in a content editable element. So getting the position is not
possible, AFAIK.

One workaround is to use the insertText command using document.execCommand
to insert a splitting marker. The marker can be any character, but an
invisible one like the zero-width space character ("\u200B") would be
suitable for this. e.g.:

document.execCommand("insertText", true, "\u200b");

Once the marker has been inserted, use it to determine the insertion point.
e.g.:

var div = document.querySelector(".a");
if (div) {
var html = div.innerHtml;

var insertPos = html.indexOf("\u200b");
if (insertPos >= 0) {

[Julien Arlandis]

Thanks.
2 questions :
What happens if the delay between 2 repetition of enter key is less than
the execution time of the routine? Andhow to set the cursor position after
the change?

Julien


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

[Evertjan.]

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

> What happens if the delay between 2 repetition of enter key is less than
> the execution time of the routine?

use onkeyup

[JJ]

On Sat, 04 Oct 14 06:09:53 +0000, Julien Arlandis wrote:
> Andhow to set the cursor position after the change?
>
> Julien

No standard function for direct caret operations, unfortunately.

Simulating a click event using document.createEvent() and
element.dispatchEvent() may give the same effect as focusing a non-focused
content editable element. document.caretPositionFromPoint() may help you to
"feel" the element contents. Simulate navigational key presses to move the
caret.

[Thomas 'PointedEars' Lahn]

JJ wrote:

> On Sat, 04 Oct 14 06:09:53 +0000, Julien Arlandis wrote:
>> Andhow to set the cursor position after the change?
>

> No standard function for direct caret operations, unfortunately.

None that you have been aware of.

<http://www.w3.org/TR/2014/PR-html5-20140916/forms.html#dom-textarea/input-select>

--
PointedEars
FAQ: <http://PointedEars.de/faq> | SVN: <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-matrix>
Please do not Cc: me. / Bitte keine Kopien per E-Mail.