Al pulsar sobre un botón escribir en un textarea

publicado por: Anonymous

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:

_x000D_

_x000D_

function insertText(elemID, text) {_x000D_
  var elem = document.getElementById(elemID);_x000D_
  elem.innerHTML += text;_x000D_
}

_x000D_

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">_x000D_
_x000D_
<div class="botones_crear_hilo">_x000D_
  <button type="button" accesskey="b" data-code="[b]" data-close="[/b]" onclick="insertText('txt1', '[b][/b]');" title="Negrita: [b]texto[/b] (Alt+B)">_x000D_
    <i class="fa fa-bold fa-fw"></i>_x000D_
  </button>_x000D_
  <button type="button" accesskey="i" data-code="[i]" data-close="[/i]" onclick="insertText('txt1', '[i][/i]');" title="Cursiva: [i]texto[/i] (Alt+I)">_x000D_
    <i class="fa fa-italic fa-fw"></i>_x000D_
  </button>_x000D_
  <button type="button" accesskey="u" data-code="[u]" data-close="[/u]" onclick="insertText('txt1', '[u][/u]');" title="Subrayado: [u]texto[/u] (Alt+U)">_x000D_
    <i class="fa fa-underline fa-fw"></i>_x000D_
  </button>_x000D_
  <button type="button" accesskey="q" data-code="[quote]" data-close="[/quote]" onclick="insertText('txt1', '[quote][/quote]');" title="Cita: [quote]texto[/quote] (Alt+Q)">_x000D_
    <i class="fa fa-quote-right fa-fw"></i>_x000D_
  </button>_x000D_
  <button type="button" accesskey="c" data-code="[code]" data-close="[/code]" onclick="insertText('txt1', '[code][/code]');" title="Código: [code]texto[/code] (Alt+C)">_x000D_
    <i class="fa fa-code fa-fw"></i>_x000D_
  </button>_x000D_
  <button type="button" name="img" accesskey="p" onclick="insertText('txt1', '[img][/img]');" title="Imagen: [img]http://www.ejemplo.com/imagen.jpg[/img] (Alt+P)">_x000D_
    <i class="fa fa-picture-o fa-fw"></i>_x000D_
  </button>_x000D_
  <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)">_x000D_
    <i class="fa fa-link fa-fw"></i>_x000D_
  </button>_x000D_
  <button type="button" accesskey="s" data-code="[spoiler]" data-close="[/spoiler]" onclick="insertText('txt1', '[spoiler][/spoiler]');" title="Spoiler: [spoiler]texto[/spoiler]">_x000D_
    <i class="fa fa-list-alt fa-fw"></i>_x000D_
  </button>_x000D_
  <button type="button" name="mention" title="Mención">_x000D_
    <span class="fa-fw" onclick="insertText('txt1', '@');" style="display: inline-block">@</span>_x000D_
  </button>_x000D_
</div>_x000D_
<div class="col-100">_x000D_
  <textarea  id="txt1" name="texto_hilo" placeholder="Texto:"></textarea>_x000D_
_x000D_
  <div class="col-emoticonos-enviar">_x000D_
    <input type="text" name="guardar_borrador" value="Guardar borrador">_x000D_
    <input type="text" name="crear_hilo" value="Crear hilo">_x000D_
  </div>_x000D_
</div>

_x000D_

_x000D_

_x000D_

solución

Buenas amigo, intenta este código.

function insertText(elemID, first, second) {
         var elem = document.getElementById(elemID);
         elem.value = second ? first + elem.value + second : first + elem.value;
     }

Le envías tres parámetros a la función.

Aquí un ejemplo:

onclick="insertText('txt1', '[b]','[/b]');"

Y para el caso del @

onclick="insertText('txt1', '@', false);"

Espero haberte ayudado.

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *