w3.unpo<code>todo

Un sencillo editor de texto

Para crear un sencillo editor de texto necesitamos un elemento <textarea> cuyo valor es el texto que queremos editar.

<textarea id="Texto" rows="5">Sed ut perspiciatis ...... sequi nesciunt.</textarea>

Texto en negrita

Si queremos poner el texto seleccionado dentro de una etiqueta <strong> hay que:

1. recuperar el valor del texto seleccionado. Para esto utilizamos las propiedades selectionStart y selectionEnd del texto seleccionado.

let desde = Texto.selectionStart; 
let hasta = Texto.selectionEnd;
let elTexto = Texto.value; // Texto es el textarea;
let sel = elTexto.substring(desde, hasta);

2. crear una cadena donde el texto seleccionado aparece entre etiquetas <strong>

<strong>el texto seleccionado</strong>

3. reemplazar el texto seleccionado con la nueva cadena de texto.
Para esto utilizamos el método setRangeText()

En el siguiente ejemplo además del elemento <textarea> hay un botón <button id="bold">. También hay un párafo <p id="resultado"></p> cuyo innerHTML es el valor del elemento <textarea>. Quiero que al hacer clic en el botón, el texto seleccionado del <textarea> aparezca entre etiquetas <strong>. Al mismo tiempo voy a actualizar el innerHTML del #resultado.

<textarea id="Texto" rows="5">Sed ut perspiciatis ...... sequi nesciunt.</textarea>
<p><button id="bold">Bold</button></p>

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

function etiquetaStrong() {
    //recuperar el valor del texto seleccionado
    let desde = Texto.selectionStart; 
    let hasta = Texto.selectionEnd;
    let elTexto = Texto.value; 
    let sel = elTexto.substring(desde, hasta);
    // si hay algo seleccionado
    if (sel.length > 0) {
      /*reemplazar el texto seleccionado con una cadena 
      donde el texto seleccionado aparece entre etiquetas strong*/
      Texto.setRangeText(`<strong>${sel}</strong>`,desde,hasta,'select');
      // actualizar el innerHTML del resultado
      resultado.innerHTML = Texto.value;
    }
  }

See the Pen Seleccionar texto y ponerlo en negrita*** by Gabi (@enxaneta) on CodePen.

Crear un encabezado

Si queremos crear un nuevo encabezado las cosas se complican un poco ya que, a diferencia de los elementos inline como <strong> un elemento <h1> - por ejemplo – es un elemento block. Recuerde que en el HTML hay un párafo <p id="resultado"></p> dentro de cual ponemos como innerHTML el valor del <textarea>. Voy a cambiar este párrafo con un <div id="resultado"></div>, y cada vez que actualice el valor del resultado voy a poner el valor del texto dentro de un párrafo:

resultado.innerHTML = `<p>${Texto.value}</p>`;

Para crear un nuevo encabezado, primero voy a cerrar el párrafo al inicio del texto seleccionado ( </p> ). A continuación voy a poner el texto seleccionado dentro de una etiqueta <h1> y, al final voy a abrir un nuevo párrafo ( <p> )  para el texto que viene a continuación. La estructura del HTML será más o menos así:
`</p><h1>${Texto_seleccionado}</h1><p>`

<div id="resultado">
<p>. . . . .</p>
<h1> Texto_seleccionado </h1>
<p>. . . . .</p>
</div>

See the Pen Crear un nuevo encabezado*** by Gabi (@enxaneta) on CodePen.

A continuación viene un ejemplo que me permite poner texto en negrita y añadir encabezados a la vez.

See the Pen Crear un sencillo editor de texto*** by Gabi (@enxaneta) on CodePen.