I am trying to make an article element editable by including an attribute contenteditablethat works great. I can print new text and style it without additional JS.
My problem is editing the inline text editor, although this is great for basic things like <b>or <u>, and interrupts some of my default formatting. When I click enter, the text moves down [wrapping a new line of text in a new tag <p>], but then when I click backspace, as if it were returning to the original paragraph, my own editor wraps the text in the tag <span>.
If that were the case, I could handle unnecessary span tags, but, unfortunately, my own editor also adds an inline style to the span tag, drawing styles from the external element contenteditable, so this tag will now look like this:
<span style="font-size: 1.5em; line-height: 1.3em;">
This in itself is a problem when working with units em, since the text in <span>increases by 1.5 times, not to mention the confused line. Therefore, I would prefer the article element to be accessible for content, but turned off text editing by default and minimized my own in JS.
In essence: How to allow an element to be accessible for content, but disable the built-in text editing functions?
I should also add that I work in Chrome, if that matters. Does this happen in all browsers?