Limiting the number of characters in a contenteditable div to store in a database

This is my current system:

• I have a contenteditable div where users can insert text, images, links etc.
• The HTML from that div is inserted into a database.
• If the div has a data which exceeds the length of the field in the database the data is truncated.

I want to add a limit to the contenteditable div so that the data entered by the user will never be truncated however I don't know how to implement a limit to the div since the actual HTML is counted in the field space not just what the user sees like the text.

I'm not asking how to actually limit the number of characters since I already found another question which solves this, but I want to know how to limit data in a user friendly way without my validation saying something like "Your data must be at most 500 characters" when most of the characters could be made up of HTML which the user cannot see.

Are there any solutions to such an issue on the front end side or the database side? Thanks.