He creado varios botón que representan algunas etiquetas de HTML5 como por ejemplo un botón que al hacer click aparece la apertura y el cierre de la etiqueta <strong></strong>
Pero resulta que cuando hago ese click, la etiqueta me la coloca justo al final del texto y yo quiero que la coloque justo donde esta el cursor que dibuja las letras que escribo.
Estos son los botones:
<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>
Este es el código JavaScript que se encarga de escribir las tag cuando el usuario hace click en el botón
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>";
});
Espero que hayan entendido lo que quiero hacer