everyone.
Now, I am studying attributes of the contenteditable in HTML.
When I push "ENTER" in contenteditable, I want to divide my article.
You can see the below picture that might help you understand.
When I push "ENTER" in contentediable.
It became the below picture.
I want to make the below picture.
AS-IS, HTML is the below.
<div id="recording-script" contenteditable="true">
<div class="speaker row">
<div class="speaker-label col-sm-12 col-md-3" contenteditable="false">
Speaker 1
</div>
<div class="speaker-script col-sm-12 col-md-9">
<span class="recording-unit">Hello</span>
<span class="recording-unit">World</span>
<span class="recording-unit">Welcome</span>
</div>
</div>
</div>
I want to make the below HTML, when I push "ENTER" between e and l in Hello(recording-unit).
TO-BE, HTML is the below.
<div id="recording-script" contenteditable="true">
<div class="speaker row">
<div class="speaker-label col-sm-12 col-md-3" contenteditable="false">
Speaker 1
</div>
<div class="speaker-script col-sm-12 col-md-9">
<span class="recording-unit">He</span>
</div>
</div>
<div class="speaker row">
<div class="speaker-label col-sm-12 col-md-3" contenteditable="false">
Speaker 2
</div>
<div class="speaker-script col-sm-12 col-md-9">
<span class="recording-unit">llo</span>
<span class="recording-unit">World</span>
<span class="recording-unit">Welcome</span>
</div>
</div>
</div>
The most important point is that I want to use undo(Ctrl+Z) function.
If I use Selection and Range in the javascript document, I can develop it.
However, if I use this, undo(Ctrl+Z) function is not working.
Please help me.