Adding <i> </i> with any Favicon icon and its automatically creating <SVG> tags in Trumbowyg Editor

Question

Here, In the Trumbowyg editor of project getting some issue.

Actually when I am trying to add code this in source code:

<p>hello</p><p><br></p>

<label class="click_aerrow">
     <i class="fa fa-angle-down"></i> 
</label>

It's Automatically converting this code later with SVG tags like below:

<p>hello</p><p><br></p>

<label class="click_aerrow">
     <svg class="svg-inline--fa fa-angle-down fa-w-10" aria-hidden="true" focusable="false" data-prefix="fa" data-icon="angle-down" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" data-fa-i2svg=""><path fill="currentColor" d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z"></path></svg><!-- <i class="fa fa-angle-down"></i> --> 
</label>

I don't want to use SVGs in my code. so anyways I can stop this in Trumbowyg Editor?

I tried multiple ways as mentioned in Documentation.

First of all, I tried to use:

$.trumbowyg.svgPath = false;

Then:

$.trumbowyg.svgAbsoluteUsePath = true;

Then I tried to Use semantic Property to remove tags and then I tried to use tagsToKeep property as well. I tried all this options with different combination but some how unable to solve the issue.

I just want that if I write :

<i class="fa fa-angle-down"> </i>

in source code of editor. It should not convert this code to SVG tag. Please anyone help me with this issue.

Here, check video recording.

Answer 1

 <script type="text/javascript">
       window.FontAwesomeConfig = { 
       autoReplaceSvg: false }
 </script>

You can try with above scripting code in your main view file.

Answer 2

Obviously your page also loads the fontAwesome javaScript.

By default fontAwesome will automatically replace all <i> elements with fa classes.

Since trumbowyg displays the editor content in an editable div, the fontAwesome svg replacement also affects this div.

As a workaround you can disable the svg auto replacement via data-attribute

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/js/all.min.js" data-auto-replace-svg="false"></script>

or JS like so

let trumbo = $('#trumbowyg');
trumbo.trumbowyg({
    autogrow: true,
    semantic: false,
});

trumbo.trumbowyg('html', `<p><i class="fa fa-angle-down"></i></p>`);

// disable svg replacement and automatic updating
window.FontAwesome.config.autoReplaceSvg = false;
window.FontAwesome.config.observeMutations = false;

// enable for specific container
window.FontAwesome.dom.i2svg({
  node: document.getElementById('replaceFA')
})

i.fa{
  color:red
}

<!-- fontAwesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" />

<!-- disable via data attribute -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/js/all.min.js" data-data-auto-replace-svg="false"></script>

<!-- trumbowyg -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="
https://cdn.jsdelivr.net/npm/[email protected]/dist/ui/trumbowyg.min.css
" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/trumbowyg.min.js"></script>

<div id="trumbowyg"></div>

<div id="replaceFA">
  <p ><i class="fa fa-angle-down"></i> SVG</p>
  <p ><i class="fa fa-angle-up"></i> SVG</p>
</div>

<div id="dontreplaceFA">
  <p ><i class="fa fa-angle-down"></i> Font</p>
  <p ><i class="fa fa-angle-up"></i> Font</p>
</div>