当 CKEditor 破坏 <span> 时，我怎么能在其中包含 HTML 的工具提示

Question

我一直在使用包含的 CSS/HTML 来实现工具提示，我可以在其中使用 HTML 来丰富它们。问题是这个网站的目标网站有一个使用 CKEditor(4) 和 CKEditor 的 CMS 前端不喜欢 span 元素 - 它似乎复制了它们并且将复制的移动到 div 之外。这似乎是一个众所周知的issue/feature。

我也没有 FTP 访问权限，因此绕过 CKEditor 不是一个选项，而且我实际上发现所见即所得非常有用，尤其是对于表格。

我的问题是：使用 javascript 是否可行，它在页面完成加载时从某处获取 HTML 执行（我猜是在 [=39 的片段中声明的字符串常量=]) 并将其包装在 <span>..</span> 中并将其注入页面的正确位置？我准备试一试，但我想我应该先检查它是否是一个轻率的人 idea/it 不能 work/there 是更简单的方法。

.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 400px;
    background-color: lightyellow;
    color: maroon;
    text-align: left;
    font-family: Tahoma;
    border-radius: 6px;
    padding: 5px 5px;

    /* Position the tooltip */
    position: absolute;
    z-index: 1;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}

<div class="tooltip">Hover over me (tooltip HTML is inside a &lt;span&gt; - CKEditor breaks this HTML)
  <span class="tooltiptext">
  
  <h3>Tooltip using &lt;span&gt; and allowing HTML</h3><hr>
  <br>
  <table align="center" border="1" cellpadding="3" cellspacing="1" style="width:80%;">
    <tr>
      <td style="color:red;">Label 1:</td><td>data</td>
    </tr>
    <tr>
      <td style="color:blue;">Label 2:</td><td>data</td>
    </tr>
<tr>
  <td style="color:green;">Label 3:</td><td><img src="https://upload.wikimedia.org/wikipedia/commons/4/47/5bzH6DGdLHw.png" style="height: 24px; width: 24px; display: block; margin-left: auto;margin-right: auto;"/></td>
</tr>
  </table>
  </span>   
</div>
<br>
<br>

<div class="tooltip">Hover over me (tooltip HTML is inside a &lt;div&gt; - CKEditor doesn't break this HTML)
  <div class="tooltiptext"">
  
  <h3>Tooltip using &lt;div&gt; and allowing HTML</h3><hr>
  <br>
  <table align="center" border="1" cellpadding="3" cellspacing="1" style="width:80%;">
<tr>
  <td style="color:red;">Label 1:</td><td>data</td>
</tr>
<tr>
  <td style="color:blue;">Label 2:</td><td>data</td>
</tr>
<tr>
  <td style="color:green;">Label 3:</td><td><img src="https://upload.wikimedia.org/wikipedia/commons/4/47/5bzH6DGdLHw.png" style="height: 24px; width: 24px; display: block; margin-left: auto;margin-right: auto;"/></td>
</tr>
  </table> 
  </div>  
</div>
<br>
<br>

Answer 1

在回答您的问题时，是的，您可以使用 javascript 在页面加载后动态插入元素，但是，如果您只是想使用 span 但错误阻止了该特定标记，那么为什么不只是使用不同的内联级别元素 (<i> or <label>)。毕竟这就是一个跨度。

编辑

我刚刚查看了您的 html 标记并意识到您正在将大量块级元素（例如 h3 和 table 包装在无效的内联级范围内 html.我不认为这实际上是一个错误。在没有 h3 和 table 的情况下尝试它，看看它是否仍然移动你的跨度。另外你为什么在这里使用跨度？如果您希望 h3 和 table 的容器内联，则将跨度更改为 div 并将 div 设置为 display: inline-block

当 CKEditor 破坏 <span> 时，我怎么能在其中包含 HTML 的工具提示

How can I have tooltips with HTML in them when CKEditor mangles <span>'s

html

javascript

css

tooltip

ckeditor4.x