HTML code in editor different than what actually appears in UI

This is the place to report bugs and get support. When posting in this forum, please always provide as much detail as possible.

Please do not report problems with a custom build or custom code in this forum. If you are producing your own build from the source code and have problems or questions, ask in the developer forum, do not report it as a bug.

This is the place to report bugs and get support

When posting in this forum, please try to provide as many relevant details as possible. Particularly the following:

  • What operating system were you running when the bug appeared?
  • What database platform is your site using?
  • What version of mojoPortal are you running?
  • What version of .NET do you use?
  • What steps are necessary to reproduce the issue? Compare expected results vs actual results.
Please do not report problems with a custom build or custom code in this forum. If you are producing your own build from the source code and have problems or questions, ask in the developer forum.
8/3/2017 3:20:08 PM
Gravatar
Total Posts 8

HTML code in editor different than what actually appears in UI

mojoPortal version 2.5.0.0, DB MS SQL. I am using Framework customized with Bootswatch Yeti.

I have added a Font Awesome icon to a test web page using the code provided by Font Awesome. When I look at the mojoPortal UI, The icon appears correctly. But when I go into the HTML code, the code has been changed from what I entered and has completely disappeared. Here's what I entered:

<div class="container">
<p><i class="fa fa-camera-retro fa-lg"></i> fa-lg</p>
</div>

After hitting save, the icon appears on the page.

Here is what is there when I look at the source code:

<div class="container">
<p>fa-lg</p>
</div>

If I hit update after looking at the source code, the icon disappears. But if I hit cancel, the icon is still visible. I have tried both CKEditor and TinyMCE.

I've tried going back in and adding icons in again, but the second time they do not show up when I hit update.

Why is the editor rewriting the code I am entering (wrongly)?

8/4/2017 11:02:38 AM
Gravatar
Total Posts 8

Re: HTML code in editor different than what actually appears in UI

Incidentally, we are using .NET 4.6.

8/7/2017 10:32:12 AM
Gravatar
Total Posts 182
Community Expert

mojoPortal Hosting & Design @ i7MEDIA!

Re: HTML code in editor different than what actually appears in UI

Hi Julie,

This is caused by the WYSIWYG editor deleting empty elements. It is an attempt by the editor to "clean up" code that it thinks is incorrect, and can be pretty annoying. There are two ways to fix it:

  1. Simply add a comment inside your empty <i> tag, so it will read <i class="fa fa-camera-retro fa-lg"><!-- don't delete this icon! --></i>
    This will prevent the editor from seeing it as an empty element, so it won't be deleted.
  2. Change the WYSIWYG settings so that it no longer deletes empty elements. To do this, navigate to your site's root folder, then to /clientscripts/ckeditor-mojoconfig.js. Inside this file, you'll want to paste the following code at the very bottom (note: it must be after the last line, which should be }; ).
    $.each(CKEDITOR.dtd.$removeEmpty, function (i, value) {
        CKEDITOR.dtd.$removeEmpty[i] = false;
    });

Hope this helps!

8/7/2017 1:13:55 PM
Gravatar
Total Posts 8

Re: HTML code in editor different than what actually appears in UI

Yes, thank you.