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. This is a known issue with the current version of CKE Editor and will be fixed in an upcoming release. This article describes how to avoid the inputs that specifically trigger the problem.

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.

 

Solution

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

 

Problem 1: 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. Testing so far hasn't been able to pinpoint exactly which add-ons cause this string to appear, but removing it should solve the problem and allow text to render correctly.

 

Problem 2: 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%;" >

This problem can be remedied by removing apostrophes from file names, which is in accordance with filename and site best-practices. For example, the above file could be renamed FAQs.png to avoid the problem.

 

Testing

After removing the problematic elements, pages should render normally without forcing text into lower case.

Comments

1 comment

  • 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

Please sign in to leave a comment.