1

Estoy creando un editor de contenido, parecido a este editor de stack donde escribimos nuestras preguntas, con casi las mismas opciones para insertar imagenes, links, opción para poner texto negrita, cursiva, centrado, alineado a la izquierda o derecha, entre otras opciones. Dentro de mi editor habrán estos elementos html: h1, h3, p, a, es decir el usuario podrá insertar título con h1 y h3, insertar párrafo con p y links en etiqueta a. Tengo cada elemento por separado y los agrego dinamicamente. Cuando el usuario da click en el botón h1, se inserta automaticamente un elemento h1. El usuario puede editarlo dando doble click encima de este, entonces si el usuario escribe texto allí y luego quiere seleccionar un fragmento de ese texto y ponerlo negrita o cursiva, Cómo podría hacerlo? Que me detecte el texto seleccionado y al hacer click en el botón negrita, me le aplique, tal vez que me encierre ese texto seleccionado por ejemplo en un o con css le haga un font-weight... Algo así parecido, la idea es que sea solo al texto seleccionado.

Si de esta forma no es óptimo. Qué otra opción me recomendarían para lograr esto? Lo que quiero es tener la opción de poder poner parte del texto en negrita o cursiva, o aumentarle el tamaño de letra, o cambiarle el tipo de letra.

Aquí dejo un código de ejemplo:

$(document).ready(function(){

      $("#btnAddTitle").click(function(){

        var contador = $("#contador").val();

        var id = parseInt(contador) + 1;

        $("#contenedor").append("<h1 contenteditable='true' id='titulo-"+ id +"'>Titulo 1</h1>");

      });

      $("#btnAddSubtitle").click(function(){

        var contador = $("#contador").val();

        var id = parseInt(contador) + 1;

        $("#contenedor").append("<h3 contenteditable='true' id='subtitulo-"+ id +"'>Titulo 3</h3>");

      });

      $("#btnAddText").click(function(){

        var contador = $("#contador").val();

        var id = parseInt(contador) + 1;

        $("#contenedor").append("<p contenteditable='true' id='p-"+ id +"'>Parrafo</p>");

      });

      $("#btnAddLink").click(function(){

        var contador = $("#contador").val();

        var id = parseInt(contador) + 1;

        $("#contenedor").append("<a contenteditable='true' id='a-"+ id +"'>Link</a>");

      });

  });
.Toolbar-container
    {
      border: 1px solid grey;
      width: 90%;
      display: block;
      padding-left: 30px;
      padding-right: 30px;
      padding-top: 10px;
      padding-bottom: 10px;
    }

    .Text-container
    {
     width: 90%;
     display: block;
     border: 1px solid grey;
     padding: 30px;
    }

    .btn
    {
      border: none;
      background-color: transparent;
      text-align: center;
      font-size: 16px;
    }

    select
    {
      border: none;
      font-size: 16px;
      font-family:'FontAwesome';
      width: 150px;
    }

    #font-size-title
    {
      border: none;
      width: 40px;
      font-size: 16px;

    }

    #color-title
    {
      width: 20px;
    }

    #height-img, #width-img
    {
    border-radius: 5px;
    text-align: center;
    }

    #img-sizes
    {
      margin-left: 5px;
    }

    #btnAddTitle, #btnAddSubtitle, #btnAddText
    {
      font-family: 'Times New Roman', Times, serif;
    }

    .tooltip
      {display:none;
      position:absolute;
      background:white;
      border:1px black solid; 
      border-radius:8px;
      padding:8px;}
    .tooltip img{float:left;margin:0 8px 8px 0;}
     a:hover+.tooltip,.tooltip:hover{display:block;}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.12/css/all.css" integrity="sha384-G0fIWCsCzJIMAVNQPfjH08cyYaUtMwjJwqiRKxxE/rx96Uroj1BtIQ6MLJuheaO9" crossorigin="anonymous">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>


<div class="Toolbar-container">
  <span>
    
    <span>
      <button id="btnAddTitle" class="btn"><b>H1</b></button>
    </span>
    
    <span>
      <button id="btnAddSubtitle" class="btn">H3</button>
    </span>
    
    <span>
      <button id="btnAddText" class="btn"><i class="fa fa-file-text-o"></i> Text</button>
    </span>

    <span>
      <button id="btnAddImg" class="btn"><i class="fa fa-picture-o"></i></button>
    </span>

    <span>
      <button id="btnAddLink" class="btn"><i class="fa fa-link"></i></button>
    </span>

  </span>
  <span class="divider">|</span>
  
  <span>
    <span>
    <select class="font-familys" title="Fonts" id="font-family-title">
      <option value="" selected>&#xf031; Fonts</option>

      <option value="Arial, Helvetica, sans-serif">Arial Helvetica</option>
      <option value="‘Arial Black’, Gadget, sans-serif">Arial Black Gadget</option>
      <option value="‘Bookman Old Style’, serif">Bookman Old Style</option>
      <option value="Garamond, serif">Garamond</option>
      <option value="Georgia, serif">Georgia</option>
      <option value="‘Comic Sans MS’, cursive">Comic Sans MS cursive</option>
      <option value="Courier, monospace">Courier monospace</option>
                                    <option value="‘Courier New’, Courier, monospace">Courier New Courier monospace</option>
                                    <option value="Impact, Charcoal, sans-serif">Impact Charcoal</option>
                                    <option value="‘Lucida Console’, Monaco, monospace">Lucida Console Monaco monospace</option>
                                    <option value="‘Lucida Sans Unicode’, ‘Lucida Grande’, sans-serif">Lucida Sans Unicode</option>
                                    <option value="‘MS Sans Serif’, Geneva, sans-serif">MS Sans Serif Geneva</option>
                                    <option value="‘MS Serif’, ‘New York’, sans-serif">MS Serif New York</option>
                                    <option value="‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif">Palatino Linotype</option>
                                    <option value="Symbol, sans-serif"> Symbol, sans-serif</option>
                                    <option value="Tahoma, Geneva, sans-serif"> Tahoma Geneva</option>
                                    <option value="‘Times New Roman’, Times, serif">Times New Roman</option>
                                    <option value="‘Trebuchet MS’, Helvetica, sans-serif">Trebuchet MS Helvetica</option>
                                    <option value="Verdana, Geneva, sans-serif">Verdana Geneva</option>
                                    <option value="Webdings, sans-serif">Webdings</option>
                                    <option value="Wingdings, ‘Zapf Dingbats’, sans-serif">Wingdings Zapf Dingbats</option>
      
    </select>
    </span>

    <span>
    <input type="number" id="font-size-title" min="14" max="100" value="34">
    </span>
    </span>

  <span class="divider">|</span>
  
  <span>
    <span>
      <button id="font-weight-title" class="btn"><i class="fa fa-bold"></i></button>
      <input type="hidden" id="valueB" value="inactive">
    </span>
    <span>
      <button id="font-style-title" class="btn"><i class="fa fa-italic"></i></button>
      <input type="hidden" id="valueI" value="inactive">
    </span>
    <span>
      <button id="subline" class="btn"><i class="fa fa-underline"></i></button>
      <input type="hidden" id="valueS" value="inactive">
    </span>
    <span>
      <input type="color" id="color-title" class="btn" value="#000002"><i class="fa fa-font" id="colo_icons"></i>
      <input type="hidden" id="valueA" value="inactive">
    </span>
    <span>
      <button id="left-aligne" class="btn"><i class="fa fa-align-left"></i></button>
      <input type="hidden" id="valueLL" value="inactive">
    </span>
    <span>
      <button id="center-aligne" class="btn"> <i class="fa fa-align-center"></i></button>
      <input type="hidden" id="valueLC" value="inactive">
    </span>
    <span>
      <button id="right-aligne" class="btn"><i class="fa fa-align-right"></i></button>
      <input type="hidden" id="valueLR" value="inactive">
    </span>
    <span>
      <button id="justify-aligne" class="btn"><i class="fa fa-align-justify"></i></button>
      <input type="hidden" id="valueLJ" value="inactive">
    </span>
  </span>
  <span class="divider">|</span>
  <span id="img-sizes">
    <span>
     <i class="fa fa-text-width"></i> <input type="number" id="width-img" min="20" max="2000" value="200">
    </span>

     <span>
     <i class="fa fa-text-height"></i> <input type="number" id="height-img" min="20" max="2000" value="200">
    </span>
  </span>
    
</div>

<input type="hidden" id="contador" value="0">
<div class="Text-container" id="contenedor">

 
<p id="text-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras faucibus, metus a placerat facilisis, nibh quam scelerisque felis, quis auctor ipsum metus vitae tellus. Pellentesque et ipsum hendrerit lacus consectetur aliquet et sed tortor. Sed tincidunt pulvinar condimentum. Proin condimentum lectus eu tortor tempor vehicula. Proin fermentum porta metus, a pharetra tellus bibendum vel. Etiam nec leo felis. Nulla et libero vel nunc consectetur suscipit vitae eu diam. Curabitur magna erat, feugiat non mattis dictum, interdum non est. Donec purus urna, venenatis a scelerisque ac, iaculis adipiscing augue. Aliquam pharetra, lorem non condimentum luctus, odio magna lacinia nunc, eget gravida magna est at purus. Nunc volutpat elementum velit eget aliquet. Integer aliquet, ipsum in interdum consequat, tortor felis dictum lorem, nec congue quam lacus a lacus. Sed sed tellus nibh, sed porta quam. Nulla pulvinar neque non leo sodales eu tempus mi vulputate.</p>
<br>
 
</div>

2
  • Wao!! lo que quieres hacer es super complejo, te podria llevar semanas lograr lo que quieres... yo uso "tinymce", es super comodo y customizable... pero si lo que estas haciendo es para fines practicos y de aprendizaje.. me parece excelente... yo intente hacer uno hace mucho tiempo y me di por vencido, espero que no sea tu caso.... Se que en java hace clases que te permite realizar un editor de texto, yo siendo tu investigo un poco mas la mejor manera de realizarlo... porque si lo quisiera hacer de nuevo hoy en dia, no lo hiciera de sea manera como lo tienes.. Commented el 25 dic. 2018 a las 15:48
  • lo comence a hacer así por fines practicos. Para explorar más del lenguaje. He visto un editor de texto de pago, que hace algo parecido a esto que estoy haciendo pero le agrega una funcionalidad que hace que el contenido sea draggable, es decir que se puede mover ese contenido y posicionarlo en cualquier parte del editor. Me pareció interesante y quise ver si podia lograr algo similar. Ese editor que te comento es pago, cuesta bastante de hecho pero es genial. tinymce tiene una funcionalidad para hacerle drag and drop a al contenido que se crea ahi? Commented el 25 dic. 2018 a las 16:45

1 respuesta 1

1

A continuación viene un ejemplo básico. Primero seleccionas una parte del texto dentro del <textarea>, después haces click en el botón. En este momento recuperas la posición del texto seleccionado (desde hasta) e insertas primero el cierre de una etiqueta </strong> en la posición hasta. Después insertas <strong> en la posición desde Finalmente reemplazas el innerHTML del #resultado con el nuevoTexto1. Espero que sea útil.

resultado.innerHTML = Texto.value;

function seleccionarTexto() {
  let desde = Texto.selectionStart; 
  let hasta = Texto.selectionEnd;
  let elTexto = Texto.value;
  let sel = elTexto.substring(desde, hasta);
  if (sel.length > 0) {// si hay algo seleccionado
  // primero inserta el cierre de la etiqueta strong en la posición hasta
    let nuevoTexto  = [elTexto.slice(0, hasta), "</strong>", elTexto.slice(hasta)].join('');
  // después abres le etiqueta strong en la posición desde  
    let nuevoTexto1  = [nuevoTexto.slice(0, desde), "<strong>", nuevoTexto.slice(desde)].join('');
    resultado.innerHTML = nuevoTexto1;
  }
}

b.addEventListener("click",seleccionarTexto);
#Texto{width:95vw}
<textarea id="Texto" rows="12"> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</textarea>
<p><button id="b">ponlo en negrita</button></p>


<p id="resultado"></p>

actualización

Una manera todavía mejor, esta vez utilizando el método setRangeText:

resultado.innerHTML = Texto.value;

function seleccionarTexto() {
  let desde = Texto.selectionStart; 
  let hasta = Texto.selectionEnd;
  let elTexto = Texto.value;
  let sel = elTexto.substring(desde, hasta);
  if (sel.length > 0) {// si hay algo seleccionado
    Texto.setRangeText(`<strong>${sel}</strong>`,desde,hasta,'select')
    resultado.innerHTML = Texto.value;
  }
}

b.addEventListener("click",seleccionarTexto);
#Texto{width:90vw}
<textarea id="Texto" rows="12"> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</textarea>
<p><button id="b">ponlo en negrita</button></p>


<p id="resultado"></p>

actualización 2

El OP comenta que esto no funciona con etiquetas <h1>

Probablemente no lo has hecho como es debido. Si quieres poner parte del texto en un <h1> tienes que cerrar primero el <p> y solo después abrir el <h1>. De la misma manera primero cierras el </h1> y después abres el <p>. Así que <strong>${sel}</strong> vuelve a ser </p><h1>${sel}</h1><p>

resultado.innerHTML = Texto.value;

function etiquetar() {
  let desde = Texto.selectionStart; 
  let hasta = Texto.selectionEnd;
  let elTexto = Texto.value;
  let sel = elTexto.substring(desde, hasta);
  if (sel.length > 0) {// si hay algo seleccionado
    Texto.setRangeText(`</p><h1>${sel}</h1><p>`,desde,hasta,'select');
    resultado.innerHTML = Texto.value;
  }
}

b.addEventListener("click",etiquetar);
#Texto{width:90vw}
<textarea id="Texto" rows="12"> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</textarea>
<p><button id="b">h1</button></p>


<p id="resultado"></p>

5
  • Wow buenisimo! Se ve genial el funcionamiento de ese ejemplo. Solo tengo una pregunta, yo pienso aplicarlo a un texto que no esta dentro de un textarea sino dentro de un elemento p y en algunos casos lo aplicare en un texto que esta dentro de una etiqueta h1, igual me funcionaria.? Commented el 26 dic. 2018 a las 3:36
  • Desde luego que no. Para hacerlo necesitas utilizar un elemento <textarea> o un elemento <input type="text"> Sin embargo: utilizando la misma lógica puedes envolver tu texto dentro de etiquetas <h1> y <h3> y lo que tu quieres.
    – enxaneta
    Commented el 26 dic. 2018 a las 8:04
  • Entiendo. Lo intente aplicar envolviendo el texto en etiquetas p y h1 y utilizando la misma lógica pero no me funcionó. Commented el 27 dic. 2018 a las 4:39
  • Por supuesto que puedes hacerlo, aunque, esto sí, tienes que pensarlo un poco. He actualizado mi respuesta. Por favor échale un vistazo.
    – enxaneta
    Commented el 27 dic. 2018 a las 8:25
  • Gracias, le he echado un vistazo a tu actualización y es fantastica, justo lo que buscaba. Gracias. Commented el 28 dic. 2018 a las 0:10

Tu Respuesta

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

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.