//var targetNodes = $("*[contenteditable]"); var targetNodes = $(".demo3"); var MutationObserver = window.MutationObserver || window.WebKitMutationObserver; var myObserver = new MutationObserver (mutationHandler); var obsConfig = { childList: true, characterData: true, attributes: true, subtree: true}; //--- Add a target node to the observer. Can only add one node at a time. targetNodes.each ( function () { myObserver.observe (this, obsConfig); } ); var checkForSpan = false; function mutationHandler (mutationRecords) { mutationRecords.forEach ( function (mutation) { //console.log (mutation.type); //console.log (mutation.attributeName); if( checkForSpan ) { for (var i = 0; i < mutation.addedNodes.length; i++) { if (mutation.addedNodes[i].nodeName.toLowerCase() === 'span') { checkForSpan = false; //console.log ('added: '+mutation.addedNodes[i].nodeName.toLowerCase()); //console.log('anodes: '+mutation.addedNodes[i]); var jq = $(mutation.addedNodes[i]); jq.contents().unwrap(); } } } } ); } isWebkit = 'WebkitAppearance' in document.documentElement.style; if (isWebkit) { targetNodes.on("keydown keypress",function(e) { if( !document.getSelection().isCollapsed ) { saveSelectionState(); } else if(e.which==8 || e.which==46) { saveSelectionState(); } }); function saveSelectionState() { checkForSpan = true; } }
Esborrant des del final del primer element de la llista provoca que el segon element quedi envoltat per un span <div contenteditable="true" class="demo1"> <ul> <li>item1 </li> <li>item2</li> <li>item3 <span>span test</span></li> <li>item4</li> </ul> </div> <br/> No passa el mateix si la mida de la font s'ha definit en percentatge o pixels: <div contenteditable="true" class="demo2"> <ul> <li>item1</li> <li>item2</li> </ul> </div> <br/> Es pot corregir mitjançant un javascript que controli el layer contenteditable a cada pulsació: <div contenteditable="true" class="demo1 demo3"> <ul> <li>item1 <span>test</span></li> <li>item2</li> </ul> </div>
.demo1{ border:1px solid red; font-size:1.25em; } .demo2{ border:1px solid green; font-size:125%; } span{color:red;}