0

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>

7
  • ¿Por qué no, en vez de intentar inventar la rueda (a menos que ese sea el objetivo), utilizas un componente existente para eso? Por ejemplo SCEditor. Commented el 22 mar. 2017 a las 2:40
  • Ahora te hago un ejemplo un momento, que se tarda un poco. Entiendo que quieres aprender como se hace.
    – cgardev
    Commented el 22 mar. 2017 a las 3:25
  • @FerGarcía No me gusta el diseño de los editores, rompen el diseño de la página. Ya he usado TinyMCE y funciona genial, pero quisiera intentar añadir los botones para poder implementar el diseño en ellos acorde a los de la web. Un saludo.
    – user27826
    Commented el 22 mar. 2017 a las 3:31
  • @cgardev Te lo agradezco enormemente. Cuando puedas, las horas que son aquí debería estar durmiendo :)
    – user27826
    Commented el 22 mar. 2017 a las 3:32
  • Pero quieres un editor BBCode, un editor markdown, un editor wysiwyg? El que te recomendaron más abajo yo lo he probado y hace todo lo que pides usando la propiedad contenteditable de HTML5. A mí personalmente me gusta más el markdown porque es universal, se lee limpiamente y es ideal para hablar sobre código.
    – ffflabs
    Commented el 22 mar. 2017 a las 9:32

4 respuestas 4

4

Estaba dispuesto a crear un ejemplo, pero he encontrado una librería que te lo hará todo muy fácil. Ya que lo que pretendes simplemente es integrar una funcionalidad manteniendo el diseño de la web, no implementarla.

https://mindmup.github.io/bootstrap-wysiwyg/

https://github.com/mindmup/bootstrap-wysiwyg/

Esta librería te permite hacer exactamente so de forma muy simple. Depende de jquery y boostrap tal y como dice en la documentación, pero puedes adaptar todo el estilo a tu web sin problemas. Creo que es la mejor solución a tu problema.

NOTA: Para adaptar cualquier cosa de boostrap a tu web lo unico que hay que hacer es escribir en un fichero css lo que quieres rediseñar.

He hecho un ejemplo de uso aquí:

A continuación, un snippet funcionando (cortesía de @Amenadiel)

jQuery(document).ready(function() {

    $('#editor').wysiwyg();

});
#editor {
	max-height: 230px;
	height: 170px;
	background-color: white;
	border-collapse: separate; 
	border: 1px solid rgb(204, 204, 204); 
	padding: 4px; 
	box-sizing: content-box; 
	-webkit-box-shadow: rgba(0, 0, 0, 0.0745098) 0px 1px 1px 0px inset; 
	box-shadow: rgba(0, 0, 0, 0.0745098) 0px 1px 1px 0px inset;
	border-top-right-radius: 3px; border-bottom-right-radius: 3px;
	border-bottom-left-radius: 3px; border-top-left-radius: 3px;
	overflow: scroll;
	outline: none;
}
 

div[data-role="editor-toolbar"] {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.dropdown-menu a {
  cursor: pointer;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://mindmup.github.io/bootstrap-wysiwyg/external/jquery.hotkeys.js"></script>

<script src="https://mindmup.github.io/bootstrap-wysiwyg/bootstrap-wysiwyg.js"></script>


<div class="btn-toolbar" data-role="editor-toolbar" data-target="#editor">

      <div class="btn-group">
        <a class="btn dropdown-toggle" data-toggle="dropdown" title="Font Size"><i class="icon-text-height"></i>&nbsp;<b class="caret"></b></a>
          <ul class="dropdown-menu">
          <li><a data-edit="fontSize 5"><font size="5">Huge</font></a></li>
          <li><a data-edit="fontSize 3"><font size="3">Normal</font></a></li>
          <li><a data-edit="fontSize 1"><font size="1">Small</font></a></li>
          </ul>
      </div>
      <div class="btn-group">
        <a class="btn" data-edit="bold" title="Bold (Ctrl/Cmd+B)"><i class="icon-bold"></i></a>
        <a class="btn" data-edit="italic" title="Italic (Ctrl/Cmd+I)"><i class="icon-italic"></i></a>
        <a class="btn" data-edit="strikethrough" title="Strikethrough"><i class="icon-strikethrough"></i></a>
        <a class="btn" data-edit="underline" title="Underline (Ctrl/Cmd+U)"><i class="icon-underline"></i></a>
      </div>
      <div class="btn-group">
        <a class="btn" data-edit="insertunorderedlist" title="Bullet list"><i class="icon-list-ul"></i></a>
        <a class="btn" data-edit="insertorderedlist" title="Number list"><i class="icon-list-ol"></i></a>
        <a class="btn" data-edit="outdent" title="Reduce indent (Shift+Tab)"><i class="icon-indent-left"></i></a>
        <a class="btn" data-edit="indent" title="Indent (Tab)"><i class="icon-indent-right"></i></a>
      </div>
      <div class="btn-group">
        <a class="btn" data-edit="justifyleft" title="Align Left (Ctrl/Cmd+L)"><i class="icon-align-left"></i></a>
        <a class="btn" data-edit="justifycenter" title="Center (Ctrl/Cmd+E)"><i class="icon-align-center"></i></a>
        <a class="btn" data-edit="justifyright" title="Align Right (Ctrl/Cmd+R)"><i class="icon-align-right"></i></a>
        <a class="btn" data-edit="justifyfull" title="Justify (Ctrl/Cmd+J)"><i class="icon-align-justify"></i></a>
      </div>
</div>      
    <div id="editor" contenteditable="true">
      Escriba algo aquí
    </div>

Cuando quieras obtener el contenido de lo que escribiste, no servirá usar jQuery('#editor').val() porque ese div no es un input válido. En cambio tienes que pedir jQuery('#editor').html();

6
  • Muchas gracias por tomarte la molestia en crear el ejemplo. Estoy intentando implementarlo en el código pero no lo acabo de conseguir. He copiado todo el js al fichero javascript, el CSS3 y he cogido la sección de los botones y la del editor, que por otra parte, me sorprende que no sea un textarea. Soy novel en programación y no había visto nada parecido. Los iconos tampoco se me cargan, y no veo en el <head>de dónde los está cargando para cargarlos yo también.
    – user27826
    Commented el 22 mar. 2017 a las 11:17
  • En mi respuesta dejé un ejemplo funcional, pero el mérito sigue siendo de @cgardev. Si él está de acuerdo, puedo editar su respuesta añadiendo mi snippet y borrando la mia.
    – ffflabs
    Commented el 22 mar. 2017 a las 11:27
  • Por partes, los archivos incluidos en code pen osea los que estarian en el <head> no se indican en el codigo sino en una zona de configuración. Si te fijas encima de la caja de código hay como una rosca, pues si le das allí aparece que cosas he incluido tanto de js como de css.
    – cgardev
    Commented el 22 mar. 2017 a las 20:58
  • Parte 2: como que no hay un area de texto? Porque en las areas de texto no se puede poner texto en negrita ni en cursiva ni nada, Entonces la tecnica utilizada es simular un area de texto, lo cual es bastante complicado de hacer pero ejemplo facebook hace exactamente eso en el muro por muchas razones.
    – cgardev
    Commented el 22 mar. 2017 a las 21:02
  • Parte 3: @amenadiel si me pare bien,
    – cgardev
    Commented el 22 mar. 2017 a las 21:02
2

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.

2
  • ¡Muchas gracias! La solución finalmente era esta. Es lo que estaba buscando, aunque sería recomendable que aplicase los consejos que se me han dado aquí, pero en sí, la pregunta buscaba una respuesta como esta.
    – user27826
    Commented el 22 mar. 2017 a las 12:40
  • El único problema que tengo es que el texto que se envía no es el seleccionado sino todo lo que haya escrito, a ver si lo puedo solucionar.
    – user27826
    Commented el 22 mar. 2017 a las 12:56
1
<script type="text/javascript">
    function getSel(first,second,elemID) // javascript
    {
        // obtiene todo el contenido del <textarea>
        var txtarea = document.getElementById(elemID);
        // Posición inicial del texto que tenemos seleccionado
        var start = txtarea.selectionStart;
        // Posición final del texto que tenemos seleccionado
        var finish = txtarea.selectionEnd;
        // extraemos el texto seleccionado
        var sel = txtarea.value.substring(start, finish);
        // agregamos las etiquetas al texto seleccionado
        var sel = second ? first+sel+second : first+sel;
        // nos devolvería todo
        txtarea.value = txtarea.value.substring(0, start)+sel+txtarea.value.substring(finish, txtarea.length);
    }
</script>
<a href="javascript:void(0)" onclick="getSel('<b>', '</b>','txt2');">Negrita</a> 
<!-- Se enviar 3 variables text2 se cambia si tienes otros campos a donde poner texto -->
0

(Mi respuesta alude a la solución de betaM) Yo hace años utilizo (y me funciona) una función basada en algo similar (3 parámetros): tag de inicio + texto + tag de cierre. Ese código me sirve, salvo en los casos de tags de "autocierre". A esa idea, podrías agregarle un color diferente para destacarlo, así que podrías poner un 4º parámetro en tu función, como el color del string resultante. P. ej. para lograr esto: <b style="color: red;">texto</b>, utilizarías una función asi:

cadena (first,second,elemID,color) ...(No la desarrollo, porque se aparta del tema de la consulta.)

Pero se complica con los tags de autocierre, ya que requiere algo mas elaborado. PD: sobre el "autocierre", existe este tema aquí: ¿Es correcto el uso del close tag (cerrar todas las etiquetas) en HTML?

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.