Actualmente estoy tratando de crear un editor WYSIWYG personalizado para mi sitio y tengo un par de preguntas que me gustaría hacer que se relacionan entre sí. He estado viendo algunos tutoriales sobre cómo hacer un editor desde cero usando HTML, CSS y JavaScript, y todos usan (name for text field).document.execCommand(“(nameOfTypeOfTextFormatting)”, false, null) , sin embargo, he escuchado de algunos lugares que está desactualizado, y se debe usar algo como getSelection() y otros. También parece un poco limitado en comparación con lo que me gustaría hacer. Por lo tanto, me gustaría saber si existe un método alternativo mucho mejor para formatear texto que usar execCommand().

La estructura de mi editor WYSIWYG está encerrada en una etiqueta de formulario, con una etiqueta div que contiene todos los botones y luego una etiqueta iframe que es donde se escribe todo el contenido.

Una cosa que tengo un problema con execCommand() es que cada vez que intento ingresar etiquetas de encabezado y luego hago clic nuevamente en el mismo botón de encabezado, no lo elimina a diferencia de los botones en negrita o tachado. Además, cada vez que agrego una etiqueta de encabezado y hago clic en el botón de código fuente (para alternar entre mostrar el html real y el contenido que muestra el navegador), muestra que se agregan etiquetas <div> después.

Si desea ver cómo se ve una de las funciones para colocar un encabezado, aquí está:

<input type='button' value='Sub-H 3' onclick='editor_sub_heading_3()'>

...

 function editor_sub_heading_3() { editor_textbox.document.execCommand( "formatBlock", false, "H3" ); }

Otra cosa que noté es que cuando hice clic en el botón de superíndice, luego hice clic en la opción Encabezado (h1), luego hice clic en el botón de superíndice para eliminar el formato de superíndice, el texto del encabezado se volvió más pequeño de lo habitual. A lo cual, cuando revisé el código fuente, agregó una etiqueta de intervalo que define el tamaño de fuente de 13.3333... en lugar del tamaño de fuente de una etiqueta de encabezado normal.

Por lo tanto, me gustaría saber si (si todavía debo usar execCommand()) hay una manera de formatear texto como este sin tener que agregarle toda esta basura innecesaria, así como también pasar sin problemas de un formato de texto a otro sin ningún tipo de ocurriendo errores.

Finalmente, me gustaría preguntar cómo podría ingresar etiquetas html personalizadas con propiedades css. Por ejemplo, es posible que desee ingresar una tabla, que cuando se ingrese use una identificación css predefinida o un nombre de clase que formateará esa tabla justo cuando se ingrese, por ejemplo. Si hay una mejor manera de formatear el texto en lugar de execCommand(), ¿cómo podría lograrlo?

Si alguien pudiera ayudarme con esto sería genial! Gracias