I have created several buttons that represent some HTML5 tags, such as a button that when clicked appears the opening and closing of the tag<strong></strong>
But it turns out that when I make that click, the label places it right at the end of the text and I want it to be placed right where the cursor is that draws the letters I write.
These are the buttons:
<button id="p" type="button" class="waves-effect pink darken-2 btn">p</button>
<button id="strong" type="button" class="waves-effect pink darken-2 btn">strong</button>
<button id="b" type="button" class="waves-effect pink darken-2 btn">B</button>
<button id="a" type="button" class="waves-effect pink darken-2 btn">Enlace</button>
<button id="h2" type="button" class="waves-effect pink darken-2 btn">h2</button>
<button id="h3" type="button" class="waves-effect pink darken-2 btn">h3</button>
This is the JavaScript code that is responsible for writing the tag when the user clicks on the button
var cuerpo = document.querySelector('#cuerpo');
var parrafo = document.querySelector('#p');
var strong = document.querySelector('#strong');
var b = document.querySelector('#b');
var a = document.querySelector('#a');
var h2 = document.querySelector('#h2');
var h3 = document.querySelector('#h3');
parrafo.addEventListener('click', () => {
cuerpo.value += "<p></p>";
});
strong.addEventListener('click', () => {
cuerpo.value += "<strong></strong>";
});
b.addEventListener('click', () => {
cuerpo.value += "<b></b>";
});
a.addEventListener('click', () => {
cuerpo.value += "<a href='' class='blue-text'></a>";
});
h2.addEventListener('click', () => {
cuerpo.value += "<h2 class='flow-text'></h2>";
});
h3.addEventListener('click', () => {
cuerpo.value += "<h3 class'flow-text'></h3>";
});
I hope you have understood what I want to do
researching I found this code
do you put the h2 where the cursor position is and put the cursor inside the h2
If you need something else tell me.
the blinking line is called the cursor.
I can't get it to be in the middle of the cursor but I can get the cursor to be in the middle. And it could be done this way
(You made me research for half an hour) =)