search

OrchardCMS / OrchardCore

Orchard Core is an open-source modular and multi-tenant application framework built with ASP.NET Core, and a content management system (CMS) built on top of that framework.
https://orchardcore.net
BSD 3-Clause "New" or "Revised" License
7.36k stars 2.37k forks source link

WYSIWYG editor breaks font-awesome icons #4959

Open jagbarcelo opened 4 years ago

jagbarcelo commented 4 years ago

If you edit anything using the WYSIWYG editor and insert for instance the following text: <i class="fab fa-twitter"></i> when you Publish, it is converted to: <em><svg class="svg-inline--fa fa-twitter fa-w-16" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="twitter" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path></svg><!-- <i class="fab fa-twitter"></i> --></em> Sometimes you might want to use embeded SVGs, but the editor does this without any option to disable it.

You can simply test it with "The Agency Theme" just by editing and saving (without any changes) the default Footer Layer. Be sure to check how this Footer is rendered in any page and then update it. The sizes of the logos in the footer change.

It might be required to change the default editor for the HTML Widget. I cannot recall if the WYSIWYG editor is the default option or is it the multiline editor.

Skrypt commented 4 years ago

I think this is normal behavior of fontawesome but I need to confirm.

jagbarcelo commented 4 years ago

I think this is normal behavior of fontawesome but I need to confirm.

Correct me if I'm wrong, @Skrypt, but I think that the right behaviour for fontawesome is to automatically embed itself (with SVGs using AJAX) in the client-side (browser). At the server-side nothing should be done. We should have absolute control about the HTML code edit.

Maybe it is something about the WYSIWYG editor, which behaves itself as a client (browser), and hence the changes in the generated code.

Thanks.

agriffard commented 3 years ago

Is it because of the Html Sanitizer?

agriffard commented 3 years ago

https://alex-d.github.io/Trumbowyg/documentation/#tags-to-keep might work:

tagsToKeep: ['i'],

jagbarcelo commented 3 years ago

Furthermore, you do not need to publish the content at all to see this behaviour. Just switch forth and back from the code editor to the WYSIWYG editor and back to the code again, and the contents are changed. By the way, tagsToKeep already has the i tag in it.

fontawesome2

Skrypt commented 3 years ago

There's maybe a fix for this. I need to investigate.

PiemP commented 3 years ago

I believe is the normal behavior of fontawesome used in the OrcharCore backend. Probably trumbowyg trigger some events and fontawesome translate the html to an SVG. I have used fontawesome and when I load some DOM elements in async way, fontawesome, "translate" the i tag in an SVG way.

If you look in the admin menu code you can see the SVG of the icons and it's the same you can find in you example.

https://fontawesome.com/how-to-use/on-the-web/advanced/svg-javascript-core#comparing

hishamco commented 3 years ago

FYI I noticed that the font awseome are using SVG in rendering in the latest releases, nothing but the Trumbo editor shouldn't convert it into SVG

hishamco commented 3 years ago

@jagbarcelo could you try to set svgPath: false

jagbarcelo commented 3 years ago

Still the same behaviour. Configuring Trumbowyg editor with this: image And it makes no difference.

PiemP commented 3 years ago

I believe the problem is related to fontawesome. By default it looks at the DOM and convert an HTML tag I into an SVG.

If we want to disable this behavior we have to use fontawesome-svg-core instead of the default ones (https://fontawesome.com/how-to-use/on-the-web/advanced/svg-javascript-core#comparing).

I have created a backend theme without load the fontawesome script and trumbowyg doesn't convert the I tag.

For my opinion the use case is not clear. Some other guys could like this behavior and found an SVG in the frontend instead a tag I. Probably we could do something configurable if want to fix this.

Another solution could be create a trumbowyg plugin to avoid fontawesome from convert tag into the editor fields.

hishamco commented 3 years ago

I will try to have a look ...