时间戳

首页 > 解决方案 > TinyMCE 自动关闭标签和/或重新排列它们

javascript - TinyMCE 自动关闭标签和/或重新排列它们

问题描述

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

当我单击模板并在预览窗口中查看它时，我看到的所有内容都与模板中的排列方式相同，因此我假设模板预览窗口中的代码是正确的。但是，一旦我单击“确定”并将模板添加到 HTMLEditor 窗口中，它就没有正确呈现。我已经尝试过的是让 TinyMCE 不通过添加这个来验证我的 HTML；

valid_elements: "*[*]"

到我的 tinymce.init() 函数（它确实有助于解决我之前遇到的类似问题，只是不是这个）。

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

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

将模板添加到 tinyMCE HTML-Editor 后成为此代码；

<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 被添加到它之后，这使它看起来很奇怪，显然锚点不再起作用了。

关于如何解决这个问题的任何想法？

标签： javascripttinymce

解决方案

在 TinyMCE 中，<a>没有href属性的标签被认为是锚点，默认情况下，锚点是折叠的，子元素会被移出锚点。

可以使用此选项禁用此默认行为：

https://www.tinymce.com/docs/configure/content-filtering/#allow_html_in_named_anchor

推荐阅读