8

I'm trying to make a article element editable by including the attribute contenteditable, which works fine. I'm able to type new text and style it without additional JS.

My problem is the native rich text editing, although is great for basic things like <b> or <u>, breaks some of my default formatting. When I hit enter the text shifts down [wrapping the new line of text in a new <p> tag], but then when I hit backspace as if to add it back to original paragraph, the native editor wraps the text in a <span> tag.

If this were just the case, I could deal with unnecessary span tags, but unfortunately the native editor also adds inline styling to the span tag, pulling the styles from the outer contenteditable element, so the tag would now look like this:

<span style="font-size: 1.5em; line-height: 1.3em;">

This presents a problem in itself when working with em units, as now the text within the <span> increases in size 1.5 times, not to mention the messed up line height. Therefor I would much rather have the article element contenteditable, but disable the default rich text editing capabilities and roll my own in JS.

In essence: How do I allow an element to be contenteditable, but disable the native rich text editing functionality?

I should also add that I'm working in Chrome, if this makes a difference. Does this happen with all browsers?

6
  • 3
    Regarding to your last question: no, that doesn't happen in all the browsers. It's a bug specific to Chrome (but you should test everything for yourself, testing in several browsers is a must to begin to understand if there's a bug in your code or in the browser)
    – AlfonsoML
    Dec 31, 2013 at 18:27
  • 1
    So what features of a contenteditable element do you actually want?
    – Tim Down
    Dec 31, 2013 at 19:03
  • You'll save a lot of time by using one of popular WYSIWYG components, such as CKEditor. When it comes to contenteditable, there are extremely many bugs and inconsistencies between browsers. Dec 31, 2013 at 19:25
  • @TimDown to make the content... editable, but no rich text functionality (as I would add it myself) Jan 1, 2014 at 2:57
  • 1
    @Reinmar you can't create rich text styling inside a textarea Jan 2, 2014 at 17:30

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.