How to wrap text within contenteditable with tag when exceeding the character limit

Question

Trying to handle the content of a reactive form control driven by contenteditable and the help of github.com/KostyaTretyak/ng-contenteditable directive.

Please see the StackBlitz where I'm at currently.

<div class="textarea"
    formControlName="description"
    contenteditable="true">
</div>

The contenteditable div is working great as a form control and I have its content as I type with:

this.form.controls['description'].valueChanges.subscribe(
    data => {
        console.log(data)
    })

How can I wrap the typed content that is over the character limit with <em> exactly as Twitter's tweet-box version?

UPDATE:

Here's some sudo logic I would be applying to the contenteditable content as the user types

characters = 'Lorem ipsum dolor... ' (about 200 characters for testing)

inLimit = characters.substring(0, 140);
outLimit = characters.substring(141);
tagged = '<em>' + outLimit + '</em>';
final = inLimit + tagged;
console.log(final); // over the limit characters wrapped in <em> tag

score 1 · Answer 1 · answered Oct 31 '17 at 19:33

This is not possible using ng-contenteditable.

You should fork this library and extend it to support size limit and automatic inserting/removing of DOM nodes (callOnChange method).

See Insert html at caret in a contenteditable div which provides pure JS example http://jsfiddle.net/jwvha/1/.

score 1 · Accepted Answer · answered Nov 01 '17 at 23:58

1

That was quite fun :) See result https://stackblitz.com/edit/angular-b4mzej . It still have some weird bug with jumping cursor after first application and characters count once you added value then cleared it and try adding again starting from the point when 0 characters left, but when I debugged it I realized that stackblitz itself changing code slightly, so I believe it should work fine under normal conditions.

Main trick was to use proper propValueAccessor, see https://github.com/KostyaTretyak/ng-contenteditable#options

answered Nov 01 '17 at 23:58

Vitalii Chmovzh

2,825
4
14
28

awesome work with the `propValueAccesor="innerHTML"` without that I had the `em` tags printing out... The bug you speak of exists when implemented. Seems that once the limit is reached blur happens... Any ideas? – Ben Racicot Nov 05 '17 at 00:24
I was thinking about something like this. https://stackoverflow.com/questions/6249095/how-to-set-caretcursor-position-in-contenteditable-element-div – Vitalii Chmovzh Nov 05 '17 at 00:31
I've tried to do .blur() and then .focus() immediately, but it stays at the beginning. Better to proceed with Range. Also you can try to .blur() then setTimeout(() => .focus()); but it's dirty and will probably cause some UI lag anyway due to next tick .focus() – Vitalii Chmovzh Nov 05 '17 at 00:32
I see, the cursor won't go "into" the `em` tagged text.. Hmm – Ben Racicot Nov 05 '17 at 00:38
If you can share your repo, I can look into it in the real conditions. I can create my own branch and then you can merge it if it works – Vitalii Chmovzh Nov 05 '17 at 00:45
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/158240/discussion-between-benracicot-and-vitalii-chmovzh). – Ben Racicot Nov 05 '17 at 00:47

score -1 · Answer 3 · answered Oct 24 '17 at 19:32

-1

You can enclose your content editable area under a css class (say .break_word), then specify a css code having the class style_

 .break_word em {word-break : break-all}

Try if it can help you.

answered Oct 24 '17 at 19:32

Chitholian

432
1
10
19

How to wrap text within contenteditable with tag when exceeding the character limit

3 Answers3