HTML Editor making text lower case

Overview

When using the HTML editor in your DNN site, some inputs may cause your text to be converted to lower case. An example block of HTML code is shown below, taken directly from the CKE Editor HTML mode. The problematic code is in red and the text to be rendered is green:

ProblemText02.png

Note that the words in green are all in upper case. When this text is saved, it displays as follows on the page:

NotUpperCase.png

All the upper case words have been converted to lower case, and a parsing error has caused a tag closure to be translated as text at the end.

 

Diagnosis

There are two known pieces of code that trigger this problem. Both are highlighted in the previously-used code block.

Unclosed double quote in any tag

Specific problems have been seen with some modules and addons that use Bootstrap generating code that contains a string like the following:

<p "="" ></p>

The problem may appear in other tags as well:

<img alt="ImageName" src="image.gif" "="">

When this malformed HTML tag is present, the text parsing will fail and cause text to appear in lower case.

 

src attributes that contain an apostrophe (')

When the source (src) for an image or element contains an apostrophe, it can cause a parsing error that results in text being rendered in lower case. The problematic text is from the previous image is bolded below:

<img src="/Portals/0/Images/FAQ's.png" alt="FAQ's" title="FAQ's" style="max-width: 100%;" >

 

Solution

This issue has been fixed in Evoq 9.6.15 (release notes). Please upgrade your DNN environment to resolve this problem.

 

Testing

After upgrading your DNN environment, the text in the HTML editor should not automatically convert into lowercase.

Comments

2 comments

  • Avatar
    Clifton Foster

    I can reproduce the issue using this simple line of code.

    <p><img src="/Portals/0/Images/District5.png" alt="District5" title="District5" style="max-width: 100%;">
    </p>

    When inserting an image from my server using the editor, this is how it formats it. What seems to cause the issue is if you manually add an image in the source code and leave off the style tag that the editor automatically inserts.

    So, to recreate the issue, remove the style="max-width: 100%;" and then click outside the code editor. Go back into the editor and, in the wysiwyg part, click on the image. Look at the code behind now and you will see the "="" inserted at the end of the img tag. Clicking outside the editor window will then add the &gt; symbol to the bottom of the code.

    If you manually add a style to your img tag, like style="border-radius: 15px", it will not create the issue. It seems that the editor wants to have an in-line style tag and just mal-forms it when trying to add it.

    0
    Comment actions Permalink
  • Avatar
    Lisa Hagley

    I'd love to find how to turn off the default style="max-width:100%;" that is always inserted.

    0
    Comment actions Permalink

Please sign in to leave a comment.