Как я могу иметь всплывающие подсказки с HTML, когда CKEditor искажает <span> - PullRequest
Новая
       8

Как я могу иметь всплывающие подсказки с HTML, когда CKEditor искажает <span>

0 голосов
/ 03 ноября 2018

Я играл с включенным CSS / HTML, чтобы реализовать всплывающие подсказки, которые я могу использовать внутри, чтобы обогатить их. Проблема в том, что веб-сайт, для которого он предназначен, имеет интерфейс CMS, который использует CKEditor (4), а CKEditor не любит элементы span - он, кажется, дублирует их и перемещает дублированный за пределы div. Кажется, это известная проблема / особенность.

У меня нет доступа к FTP, поэтому обход CKEditor невозможен, и в любом случае я нахожу WYSIWYG весьма полезным, особенно для таблиц.

Мой вопрос заключается в следующем: возможно ли использовать javascript, который выполняется, когда заканчивается загрузка страницы, которая захватывает HTML-код (я полагаю, строковую константу, объявленную в фрагменте javascript) и переносит ее в <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 Ответ

0 голосов
/ 03 ноября 2018

В ответ на ваш вопрос, да, вы можете использовать javascript для динамической вставки элементов после загрузки страницы, однако, если вы просто хотите использовать диапазон, но ошибка препятствует этому конкретному тегу, то почему бы просто не использовать другой встроенный элемент уровня (<i> or <label>). После всего этого весь промежуток.

редактировать

Я только что посмотрел на вашу html-разметку и понял, что вы упаковываете множество элементов уровня блока, таких как h3 и table, в свой встроенный диапазон уровня, который является недопустимым html. Я не думаю, что это на самом деле ошибка. Попробуйте это без h3 и таблицы внутри и посмотрите, будет ли он по-прежнему перемещать ваш диапазон. Кроме того, почему вы используете промежуток здесь? Если вы хотите, чтобы контейнер для h3 и таблицы был встроенным, измените span на div и установите div на display: inline-block

...