Estoy creando un creador de posts, como los de aquí. Al pulsar sobre algunos botones, se muestran unas etiquetas en el textarea
. Hasta aquí todo bien.
El problema es que por ejemplo, lo que quiero es que al seleccionar un trozo de texto, y pulsar el botón, las etiquetas se me sitúen al inicio y al final del texto seleccionado. Pongo un ejemplo, imaginemos que tengo el siguiente texto "Buenos días". Si selecciono el texto y pulso el botón para poner el texto en negrita me queda:
Buenos días[b][/b]
Mi objetivo es que al seleccionar el texto me quede así:
[b]Buenos días[/b]
Evidentemente este comportamiento lo quiero tener con ese tipo de "etiquetas" [b][/b], [img[/img]...etc, lo digo porque tengo algún botón que me agrega el icono @.
Os dejo el código que tengo hasta ahora:
function insertText(elemID, text) {
var elem = document.getElementById(elemID);
elem.innerHTML += text;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<div class="botones_crear_hilo">
<button type="button" accesskey="b" data-code="[b]" data-close="[/b]" onclick="insertText('txt1', '[b][/b]');" title="Negrita: [b]texto[/b] (Alt+B)">
<i class="fa fa-bold fa-fw"></i>
</button>
<button type="button" accesskey="i" data-code="[i]" data-close="[/i]" onclick="insertText('txt1', '[i][/i]');" title="Cursiva: [i]texto[/i] (Alt+I)">
<i class="fa fa-italic fa-fw"></i>
</button>
<button type="button" accesskey="u" data-code="[u]" data-close="[/u]" onclick="insertText('txt1', '[u][/u]');" title="Subrayado: [u]texto[/u] (Alt+U)">
<i class="fa fa-underline fa-fw"></i>
</button>
<button type="button" accesskey="q" data-code="[quote]" data-close="[/quote]" onclick="insertText('txt1', '[quote][/quote]');" title="Cita: [quote]texto[/quote] (Alt+Q)">
<i class="fa fa-quote-right fa-fw"></i>
</button>
<button type="button" accesskey="c" data-code="[code]" data-close="[/code]" onclick="insertText('txt1', '[code][/code]');" title="Código: [code]texto[/code] (Alt+C)">
<i class="fa fa-code fa-fw"></i>
</button>
<button type="button" name="img" accesskey="p" onclick="insertText('txt1', '[img][/img]');" title="Imagen: [img]http://www.ejemplo.com/imagen.jpg[/img] (Alt+P)">
<i class="fa fa-picture-o fa-fw"></i>
</button>
<button type="button" name="url" accesskey="w" onclick="insertText('txt1', '[url][/url]');" title="URL: [url]http://www.ejemplo.com[/url] o [url=http://www.ejemplo.com]texto[/url] (Alt+W)">
<i class="fa fa-link fa-fw"></i>
</button>
<button type="button" accesskey="s" data-code="[spoiler]" data-close="[/spoiler]" onclick="insertText('txt1', '[spoiler][/spoiler]');" title="Spoiler: [spoiler]texto[/spoiler]">
<i class="fa fa-list-alt fa-fw"></i>
</button>
<button type="button" name="mention" title="Mención">
<span class="fa-fw" onclick="insertText('txt1', '@');" style="display: inline-block">@</span>
</button>
</div>
<div class="col-100">
<textarea id="txt1" name="texto_hilo" placeholder="Texto:"></textarea>
<div class="col-emoticonos-enviar">
<input type="text" name="guardar_borrador" value="Guardar borrador">
<input type="text" name="crear_hilo" value="Crear hilo">
</div>
</div>