Estoy usando CKEditor como editor de texto enriquecido WYSIWYG con Vue3.
El editor genera su salida dentro de un IFrame, así que al final creo que es un cuerpo HTML con el texto que ingresó un usuario, envuelto por etiquetas HTML. El acceso al contenido del iframe se realiza con document.querySelector('iframe').contentDocument que me da innerTextr e innerHTML, y todo es accesible.
Estoy tratando de limitar la longitud del texto, por lo que si un usuario escribe este texto: I am an example text and this part is bold. y la limitación es de 23 caracteres, el . el carácter se eliminará automáticamente. Por cierto, este será el resultado generado por el editor: <p>I am an example text and <b>this part is bold.</b></p>
Entonces, puedo obtener el texto eliminado eliminando cualquier etiqueta HTML, almacenando el texto "limpio" en una variable y luego obteniendo su longitud. Además, puedo eliminar esta letra en un disparador de keyup .
El problema es que cada vez que se elimina una letra, también modifica las etiquetas HTML y rompe su estructura. Entonces obtengo esto: <p>I am an example text and <b>this part is bold en lugar de esto: <p>I am an example text and <b>this part is bold</b></p> .
¿Hay alguna forma mejor de planificar esta personalización para que SOLO recorte el texto interno?
La forma en que solucioné este problema fue
<p>I am an example text and <b>this part is bold<x> es igual al número de </x> ?) y ciérrelas si es necesarioPuede haber una mejor manera, pero escribí ese código hace unos 10 años y funciona muy bien.