我有一个 fiddle显示我的代码在做什么。我正在尝试使用 javascript/jquery 将表格插入到当前插入符号位置的内容可编辑 div 中。我正在使用 Tim Down's 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>
最佳答案
如果您想在无法有效包含它的选定节点之后立即删除新节点,请替换为:
range.insertNode(el);
用类似这样的东西:
var badNodes = {a: 1, p: 1};
// starting with the node at the beginning of the range,
// iterate to the "left" until we find a node that isn't
// a text node
var n = range.startContainer;
var tag = n.nodeName;
while (tag == '#text') {
n = n.parentNode;
tag = n.nodeName;
}
// if the node we landed on isn't one of our bad nodes ...
if (badNodes[tag.toLowerCase()]) {
// that we refuse to insert 'el' into, continue iterating to the
// "left" until we find a node we're willing to place 'el' after.
while (badNodes[n.parentNode.nodeName.toLowerCase()]) {
n = n.parentNode;
tag = n.nodeName;
}
n.parentNode.insertBefore(el, n.nextSibling);
} else {
range.insertNode(el);
}
查看我的 fiddle 叉:http://jsfiddle.net/zntwL/29/
更新 (我想这就是你想要的)
如果你想拆分无效节点并放入新节点,请改用这样的东西:
var badNodes = {a: 1, p: 1};
// starting with the node at the beginning of the range,
// iterate to the "left" until we find a node that isn't
// a text node
var n = range.startContainer;
var tag = n.nodeName;
while (tag == '#text') {
n = n.parentNode;
tag = n.nodeName;
}
// if the node we landed on is one of our "bad" nodes ...
if (badNodes[tag.toLowerCase()]) {
// continue iterating to the "left" until we find a "good" node
while (badNodes[n.parentNode.nodeName.toLowerCase()]) {
n = n.parentNode;
tag = n.nodeName;
}
// remove everything from our "good" node from the start of the
// range to the end of the node. this causes all bad nodes to be
// severed and auto-closed and auto-opened as necessary at the cut.
range.setEndAfter(n);
var clipped = range.extractContents();
// drop 'el' in after the break (right where we want it)
n.parentNode.insertBefore(el, n.nextSibling);
// and re-attach the clipped portion of the "good" node, which
// includes the auto-opened "bad" nodes.
el.parentNode.insertBefore(clipped, el.nextSibling);
} else {
range.insertNode(el);
}
您的最终解决方案可能需要一些调整。您可能需要以不同方式检测#text 节点以实现跨浏览器兼容。您需要对其进行模块化并适本地填充 badNodes
数组。但是,我认为这是一般的想法。
关于javascript - 将表格插入内容可编辑的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13300073/