我把这个在Quill游乐场的例子放在这里,但在这里复制它。
输入HTML
<div id="editor">
<ol>
<li>
<p>Outer Numbered para1</p>
<p>Outer numbered para2</p>
<ol>
<li>Inner Numbered List</li>
</ol>
</li>
</ol>
</div>JavaScript
var quill = new Quill('#editor', {
theme: 'snow'
});输出HTML
<div class="ql-editor" contenteditable="true">
<ol>
<li>Outer Numbered para1</li>
<li>Outer numbered para2</li>
<li class="ql-indent-1">Inner Numbered List</li>
</ol>
</div>问题
筑巢到哪里去了?我做错了什么?我怎样才能防止筑巢离开,或者把它拿回来?
版本
发布于 2017-07-25 10:06:01
在以下情况下,应将嵌套的列表值规范化:
您希望在quilljs编辑器中插入嵌套值,下面的代码可能会有所帮助:
function normalizeNestedList(editorValue){
if(document){
let tempEditorNode = document.createElement('div');
tempEditorNode.innerHTML = editorValue;
const olElems = tempEditorNode.querySelectorAll('ol');
const ulElems = tempEditorNode.querySelectorAll('ul');
moveNestedList(olElems);
moveNestedList(ulElems);
return tempEditorNode.innerHTML;
}
}
function moveNestedList(ContainerListElems){
const quillIntentConst = `ql-indent-`;
let currentParentToInserted = null;
for(let i=0; i< ContainerListElems.length; i++){
const containerListElem = ContainerListElems[i];
const listDepth = getMaxParents(containerListElem);
if(listDepth > 0) {
const containerListElemChilds = containerListElem.childNodes;
for (let j = 0; j < containerListElemChilds.length; j++) {
if (containerListElemChilds[j].nodeName === 'LI') {
containerListElemChilds[j].setAttribute('class',`${quillIntentConst}${listDepth}`);
}
}
insertAfter(currentParentToInserted,containerListElem.outerHTML);
containerListElem.remove();
}else {
currentParentToInserted = containerListElem;
}
}
}
function getMaxParents(elem){
let parentNode = elem.parentNode;
let count = 0;
if(parentNode !== null && typeof parentNode !== 'undefined') {
let nodeName = parentNode.nodeName;
while (parentNode !== null && typeof parentNode !== 'undefined' && (nodeName === 'UL' || nodeName === 'OL' || nodeName === 'LI')) {
parentNode = parentNode.parentNode;
nodeName = parentNode.nodeName;
if(nodeName === 'UL' || nodeName === 'OL' ) {
++count;
}
}
}
return count;
}
function insertAfter(newNode, referenceNode) {
newNode.insertAdjacentHTML('afterend', referenceNode);
}
您可以调用normalizeNestedList函数
https://stackoverflow.com/questions/43749322
复制相似问题