I am using CKEditor as a WYSIWYG rich text editor with Vue3.
The editor generates its output inside an IFrame, so in the end I guess an HTML body with the text a user entered, wrapped by HTML tags. Accessing the iframe content is done with document.querySelector('iframe').contentDocument which gives me innerTextr and innerHTML, and everything is accessible.
I am trying to limit the text length, so if a user writes this text:
I am an example text and this part is bold. and limitation is 23 characters, the . character will be deleted automatically. BTW this will be the output generated by the editor:
<p>I am an example text and <b>this part is bold.</b></p>
So I am able to get the stripped text by removing any HTML tag, storing the "clean" text in a variable and then getting its length. Moreover, I am able to delete this letter on a keyup trigger.
Issue is, whenever a letter is deleted, it also modifies the HTML tags and break their structure. So I get this: <p>I am an example text and <b>this part is bold instead of this: <p>I am an example text and <b>this part is bold</b></p>.
Is there any better way of planning this cusomization so I will get ONLY the inner text trimmed.
The way I worked around this problem was to
<p>I am an example text and <b>this part is bold<x> equal the number of </x>?), and close them if neededThere may be a better way, but I wrote that piece of code about 10 years ago and it does the work just fine.