Cómo hacer un editor de texto web muy simple en JS

La mayoría de los editores trabajan (incluidos los de Quora) utilizando la propiedad Editable de contenido.

Establecer eso solo le permitirá escribir dentro de ese elemento HTML, y ahora solo necesita implementar sus características de texto “enriquecido”. Puede hacer esto mirando el texto seleccionado cuando se presionan los botones de control, sacando el texto seleccionado, envolviéndolo en su elemento html deseado, y luego reemplazando la selección con su nuevo texto.

¿Cómo reemplazar el texto seleccionado con html en un elemento contenteditable? entra en esto un poco.

Un “problema” a tener en cuenta es cómo manejar adecuadamente cuando alguien:

  1. Selecciona las primeras 3 palabras en una oración de 5 palabras.
  2. Los convierte en un título
  3. Selecciona las últimas 3 palabras en la misma oración de 5 palabras.
  4. Hace que los subrayados.

En este caso, la palabra del medio debe ser un Título y un subrayado, lo que significa que su html tendrá que verse así:

uno dos tres

cuatro cinco .

En lugar de reinventar la rueda, podría mirar algo que hace esto de una manera que le permite personalizar el diseño y qué características están habilitadas. Hace años solía usar http://xing.github.io/wysihtml5/ pero ahora parece abandonado.