[英]Insert Table into content editable div
我有一個小提示,顯示我的代碼正在做什么。 使用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>
如果要在無法有效包含新節點的選定節點之后立即刪除新節點,請將其替換為:
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);
}
看我的小提琴叉: 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
數組。 但是,我認為這是一般的想法。
怎么樣的
var parentNode = range.commonAncestorContainer;
parentNode.inertNode(el);
替換你的
range.insertNode(el);
你可能不得不調整它以使表格在所有情況下准確到達你想要的位置,但至少它永遠不會出現在元素的中間。
作為一名iPhone應用程序開發人員,我發現以下內容適用於可編輯內容
function TableOfContentForSubHeading1() {
var level = 0;
document.getElementById("content").innerHTML =
document.getElementById("content").innerHTML.replace(/<h([\d])>([^<]+)<\/h([\d])>/gi, function (str, openLevel, titleText, closeLevel) {
if (openLevel != closeLevel) {
return str;
}
if (openLevel > level) {
toc += (new Array(openLevel - level + 1)).join("<ol>");
} else if (openLevel < level) {
toc += (new Array(level - openLevel + 1)).join("</ol>");
}
level = parseInt(openLevel);
var anchor = titleText.replace(/ /g, "_");
toc += "<li><a href=\"#" + anchor + "\">" + titleText + "</a></li>";
return "<h" + openLevel + "><a name=\"" + anchor + "\">" + titleText + "</a></h" + closeLevel + ">";
});
if (level) {
toc += (new Array(level + 1)).join("</ol>");
}
document.getElementById("content").innerHTML += toc;
}
希望它有效。
如果標題還包括CLASS參考或ID,我在下面做了一些改進。
<script>
window.onload = function () {
var toc = "";
var level = 0;
document.getElementById("contents").innerHTML =
document.getElementById("contents").innerHTML.replace(/<h([\d])([^<]+)>([^<]+)<\/h([\d])>/gi,
function (str, openLevel, classHeading, titleText, closeLevel) {
if (openLevel != closeLevel) {
return str;
}
if (openLevel > level) {
toc += (new Array(openLevel - level + 1)).join("<ul>");
} else if (openLevel < level) {
toc += (new Array(level - openLevel + 1)).join("</ul>");
}
level = parseInt(openLevel);
var anchor = titleText.replace(/ /g, "_");
toc += "<li><a href=\"#" + anchor + "\">" + titleText
+ "</a></li>";
return "<h" + openLevel + classHeading +"><a name=\"" + anchor + "\">"
+ titleText + "</a></h" + closeLevel + ">";
}
);
if (level) {
toc += (new Array(level + 1)).join("</ul>");
}
document.getElementById("toc").innerHTML += toc;
};
</script>
我在replace函數中添加了一個額外的參數:
([^<]+)
命名為classHeading並將其添加到return函數中
return "<h" + openLevel + classHeading + ....
這樣就保留了用於的類。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.