У меня есть fiddle, показывающий, что делает мой код. Используя javascript/jquery, я пытаюсь вставить таблицу в редактируемый контент div в текущей позиции каретки. Я использую библиотеку Tim Down Rangy для этого. Я делаю это со следующим javascript.
var range = getFirstRange();
var el = document.createElement("table");
var tableHtml = "";
for (var a = 0; a <= tableY; a++) {
if(a%2==0){
tableHtml += '<tr class="zebra">';
}
else{
tableHtml += '<tr>';
}
for (var b = 0; b <= tableX; b++) {
tableHtml += '<td> </td>';
}
tableHtml += '</tr>';
}
$(el).html(tableHtml);
range.insertNode(el);
rangy.getSelection().setSingleRange(range);
На всякий случай здесь помогает функция getFirstRange.
function getFirstRange() {
var sel = rangy.getSelection();
return sel.rangeCount ? sel.getRangeAt(0) : null;
}
Мне нужно сделать допустимый html везде, где находится эта таблица. например, если каретка находится в середине ссылки, я пытаюсь избежать следующего html.
<p>some text <a href="#">text
<table>
<tr>
<td>table content</td>
</tr>
</table>
text</a> more text</p>
Я бы хотел, чтобы это выглядело так.
<p>some text <a href="#">text</a></p>
<table>
<tr>
<td>table content</td>
</tr>
</table>
<p><a href="#">text</a> more text</p>