<h2> Editable Ordered List </h2>
<ol contenteditable>
<li> item A </li>
<li> item B </li>
<li> item C </li>
</ol>
<h2> Editable Definition List </h2>
<dl contenteditable>
<dt> term A </dt>
<dd> definition A </dd>
<dt> term B </dt>
<dd> definition B </dd>
<dt> term C </dt>
<dd> definition C </dd>
</dl>
</section>
<section id="test2" contenteditable>
<h2> Bullet List In Editable Section </h2>
<ul>
<li> item A </li>
<li> item B </li>
<li> item C </li>
</ul>
<h2> Ordered List In Editable Section </h2>
<ol>
<li> item A </li>
<li> item B </li>
<li> item C </li>
</ol>
<h2> Definition List In Editable Section </h2>
<dl>
<dt> term A </dt>
<dd> definition A </dd>
<dt> term B </dt>
<dd> definition B </dd>
<dt> term C </dt>
<dd> definition C </dd>
</dl>
</section>
</div>
function try2split(element, caretPos) {
// compute the requested position var len = element.textContent.length; var pos = -1;
switch (caretPos) {
case CARET_BEGIN:
pos = 0;
break;
case CARET_MIDDLE:
pos = Math.floor(len / 2);
break;
case CARET_END:
pos = len;
break;
}
// put the caret on the requested position var sel = window.getSelection();
for (var i = 0; i < sel.rangeCount; i++) { var range = sel.getRangeAt(i);
sel.removeRange(range);
}
range = document.createRange();
range.setStart(element.firstChild, pos);
range.setEnd(element.firstChild, pos);
sel.addRange(range);
// simulates two [Return] keypresses
synthesizeKey("KEY_Enter");
synthesizeKey("KEY_Enter");
}
// -----------------------------------------------------------------------
// #test1: editable lists should NOT be splittable
// -----------------------------------------------------------------------
const ul = test1.querySelector("ul");
const ol = test1.querySelector("ol");
const dl = test1.querySelector("dl");
// bullet list ul.focus();
try2split(ul.querySelector("li"), CARET_END);
is(test1.querySelectorAll("ul").length, 1, "The
list should not be splittable."
);
is(ul.querySelectorAll("li").length, 5, "Two new
elements should have been created."
);
// ordered list ol.focus();
try2split(ol.querySelector("li"), CARET_END);
is(test1.querySelectorAll("ol").length, 1, "The list should not be splittable.");
is(ol.querySelectorAll("li").length, 5, "Two new
elements should have been created."
);
// definition list dl.focus();
try2split(dl.querySelector("dd"), CARET_END);
is(test1.querySelectorAll("dl").length, 1, "The
list should not be splittable."
);
is(dl.querySelectorAll("dt").length, 5, "Two new
elements should have been created."
);
// -----------------------------------------------------------------------
// #test2: lists in editable blocks should be splittable
// -----------------------------------------------------------------------
test2.focus();
function testNewParagraph(expected) {
// bullet list
try2split(test2.querySelector("ul li"), CARET_END);
is(test2.querySelectorAll("ul").length, 2, "The
list should have been splitted."
);
is(test2.querySelectorAll("ul li").length, 3, "No new
element should have been created."
);
is(test2.querySelectorAll("ul+" + expected).length, 1, "A new " + expected + " should have been created in the
."
);
// ordered list
try2split(test2.querySelector("ol li"), CARET_END);
is(test2.querySelectorAll("ol").length, 2, "The list should have been splitted.");
is(test2.querySelectorAll("ol li").length, 3, "No new
element should have been created."
);
is(test2.querySelectorAll("ol+" + expected).length, 1, "A new " + expected + " should have been created in the .");
// definition list
try2split(test2.querySelector("dl dd"), CARET_END);
is(test2.querySelectorAll("dl").length, 2, "The
list should have been splitted."
);
is(test2.querySelectorAll("dt").length, 3, "No new
element should have been created."
);
is(test2.querySelectorAll("dl+" + expected).length, 1, "A new " + expected + " should have been created in the
Die Informationen auf dieser Webseite wurden
nach bestem Wissen sorgfältig zusammengestellt. Es wird jedoch weder Vollständigkeit, noch Richtigkeit,
noch Qualität der bereit gestellten Informationen zugesichert.
Bemerkung:
Die farbliche Syntaxdarstellung ist noch experimentell.