代码之家 › 专栏 › 技术社区 › rossmcm

当CKEditor损坏<span>时,如何在工具提示中包含HTML

ckeditor4.x tooltip css html javascript

rossmcm · 技术社区 · 6 年前

我一直在玩这个游戏 CSS / HTML 实现工具提示,我可以在里面使用HTML来丰富它们。问题是,这个网站的目的是有一个CMS前端使用 CKEditor CK编辑器 span 元素-它似乎复制了它们,并将复制的元素移到外部 div

我也没有FTP访问权限,所以绕过CKEditor不是一个选项,而且无论如何,我发现所见即所得非常有用,特别是对于表。

<span>..</span> 把它注入到页面的正确位置?我准备试一试,但我想我应该先看看这是不是一个愚蠢的想法/它行不通/有更简单的方法。

.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>

1 回复 | 直到 6 年前

Coffee bean 6 年前

回答您的问题,是的,您可以使用javascript在页面加载后动态插入元素,但是,如果您只是想使用一个span,但是一个bug阻止了这个特定的标记,那么为什么不使用一个不同的内联级别的元素呢( <i> or <label>

编辑

我刚刚查看了您的html标记,并意识到您正在内联级别范围内包装大量块级元素,如h3和table,这是无效的html。我不认为这是一个真正的错误。在没有h3和桌子的情况下试一下,看看它是否还能移动你的跨度。还有,你为什么在这里用跨度?如果希望h3和表的容器是内联的,那么将span更改为div并将div设置为 display: inline-block