Javascript TinyMCE自动丢失a标签和/或重新排列它们

我正在使用tinyMCE插件的模板选项。我正在加载一个工作正常的模板，但是在页面底部我看到一些不正常的行为；一些内部带有i标签的a标签正在重新排列。这会导致视图最终看起来与预期的模板不同

当我单击模板并在预览窗口中看到它时，我看到了它在模板中的排列方式，因此我假设代码在模板预览窗口中是正确的。但是，一旦我单击“确定”并将模板添加到HTMLEditor窗口，它将无法正确呈现。我已经尝试过的是通过添加以下内容使TinyMCE不验证我的HTML

valid_elements: "*[*]" 

我的tinymce.init（）函数（它确实帮助解决了我以前遇到的类似问题，但这次没有）

此代码（来自我加载的模板）

烙印

将模板添加到tinyMCE HTML编辑器后成为此代码

<h3 class="section-title">
<span> BRAND</span> 
<a id="nextBrand" class="link pull-right carousel-nav"></a><i class="fa fa-angle-right"></i> 
<a id="prevBrand" class="link pull-right carousel-nav"></a><i class="fa fa-angle-left"></i>
</h3>

烙印

正如你所看到的，a-tag被自动关闭，i-tag被添加到它后面，这使得它看起来很奇怪，很明显锚不再起作用

---

你知道我该如何解决这个问题吗？

在TinyMCE，

非常有效！非常感谢。
<h3 class="section-title">
<span> BRAND</span> 
<a id="nextBrand" class="link pull-right carousel-nav"></a><i class="fa fa-angle-right"></i> 
<a id="prevBrand" class="link pull-right carousel-nav"></a><i class="fa fa-angle-left"></i>
</h3>