Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #25871 > unrolled thread

new line in a contentEditable div

Back to article view | Back to comp.lang.javascript

Contents

  new line in a contentEditable div Julien Arlandis <julien.arlandis@laposte.net> - 2014-10-03 11:33 +0000
    Re: new line in a contentEditable div JJ <jj4public@vfemail.net> - 2014-10-03 19:46 +0700
      Re: new line in a contentEditable div Julien Arlandis <julien.arlandis@laposte.net> - 2014-10-03 13:13 +0000
        Re: new line in a contentEditable div JJ <jj4public@vfemail.net> - 2014-10-04 09:29 +0700
          Re: new line in a contentEditable div Julien Arlandis <julien.arlandis@laposte.net> - 2014-10-04 06:09 +0000
            Re: new line in a contentEditable div "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2014-10-04 08:47 +0200
            Re: new line in a contentEditable div JJ <jj4public@vfemail.net> - 2014-10-04 21:34 +0700
              Re: new line in a contentEditable div Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-10-22 20:09 +0200
    Re: new line in a contentEditable div "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2014-10-03 15:00 +0200
      Re: new line in a contentEditable div Julien Arlandis <julien.arlandis@laposte.net> - 2014-10-03 13:18 +0000
      Re: new line in a contentEditable div "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2014-10-03 16:23 +0200
        Re: new line in a contentEditable div Julien Arlandis <julien.arlandis@laposte.net> - 2014-10-03 15:16 +0000
          Re: new line in a contentEditable div "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2014-10-03 18:28 +0200
            Re: new line in a contentEditable div "Christoph M. Becker" <cmbecker69@arcor.de> - 2014-10-03 18:54 +0200
              Re: new line in a contentEditable div "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2014-10-03 19:07 +0200
                Re: new line in a contentEditable div "Christoph M. Becker" <cmbecker69@arcor.de> - 2014-10-03 19:32 +0200
    Re: new line in a contentEditable div "Jukka K. Korpela" <jkorpela@cs.tut.fi> - 2014-10-03 16:21 +0300

#25871 — new line in a contentEditable div

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.nemoweb.net>

[toc] | [next] | [standalone]

#25872

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.

[toc] | [prev] | [next] | [standalone]

#25874

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.nemoweb.net>

[toc] | [prev] | [next] | [standalone]

#25884

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) {
    var htmlToInsert = '</div><div class="a">';
    var newHtml = html.substr(0, insertPos) +
                  insertHtml + html.substr(insertPos + 1);
    div.innerHtml = newHtml;
  }
}

[toc] | [prev] | [next] | [standalone]

#25885

Le 04/10/2014 à 04:29, JJ a écrit :
> 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) {
>     var htmlToInsert = '</div><div class="a">';
>     var newHtml = html.substr(0, insertPos) +
>                   insertHtml + html.substr(insertPos + 1);
>     div.innerHtml = newHtml;
>   }
> }

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

[toc] | [prev] | [next] | [standalone]

#25886

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

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

[toc] | [prev] | [next] | [standalone]

#25887

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.

[toc] | [prev] | [next] | [standalone]

#25973

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.

[toc] | [prev] | [next] | [standalone]

#25873

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)

[toc] | [prev] | [next] | [standalone]

#25876

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

[toc] | [prev] | [next] | [standalone]

#25878

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)

[toc] | [prev] | [next] | [standalone]

#25879

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.nemoweb.net>

[toc] | [prev] | [next] | [standalone]

#25880

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)

[toc] | [prev] | [next] | [standalone]

#25881

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

[toc] | [prev] | [next] | [standalone]

#25882

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

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

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.


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

[toc] | [prev] | [next] | [standalone]

#25883

Evertjan. wrote:

> "Christoph M. Becker" <cmbecker69@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

[toc] | [prev] | [next] | [standalone]

#25877

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/

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web