I am trying to implement Ckeditor5 in my website and I want to allwos the user to copy and paste from word, but the lists do not fully work.
When I copy this
1.Dfgdfgdfg
Dfgdfgdfgdf
2.Dfgdfgdfg kjdfhgjdfhghdfhjg
Dfgjhdfjhgjdhfghkjdhfghdfjg dfjjhg dfjgh dfjhj gh dfhdgf hjdgf hjdgfhjdgfhj dgfhj
3.Dfgdfgjhdfj
4.Dfgdfgdf
5.Dfgdfgdfg
6.Dfgdfgdf
I get this
1.Dfgdfgdfg
Dfgdfgdfgdf
2.Dfgdfgdfg kjdfhgjdfhghdfhjg
Dfgjhdfjhgjdhfghkjdhfghdfjg dfjjhg dfjgh dfjhj gh dfhdgf hjdgf hjdgfhjdgfhj dgfhj dgfdgfhjdfghjdfjh gdhfjg dfg
3.Dfgdfgjhdfj
4.Dfgdfgdf
5.Dfgdfgdfg
6.Dfgdfgdf
I am trying soimething like this
`
DecoupledEditor
.create( document.querySelector( '.editor' ), {
// Editor configuration.
link: {
addTargetToExternalLinks: true,
defaultProtocol: 'https://',
allowedProtocols: [ 'https'],
decorators: {
addTargetToExternalLinks: {
mode: 'automatic',
callback: url => /^(https?:)?///.test( url ),
attributes: {
target: '_blank',
rel: 'noopener noreferrer'
}
}
}
},
} )
.then( editor => {
window.editor = editor;
// Set a custom container for the toolbar.
document.querySelector( '.document-editor__toolbar' ).appendChild( editor.ui.view.toolbar.element );
document.querySelector( '.ck-toolbar' ).classList.add( 'ck-reset_all' );
// Assuming editor is already initialized
editor.editing.view.document.on('clipboardInput', (evt, data) => {
const htmlData = data.dataTransfer.getData('text/html');
if (htmlData) {
// Manipulate the HTML structure to properly integrate text into lists
const processedHtml = integrateTextIntoLists(htmlData);
const viewFragment = editor.data.htmlProcessor.toView(processedHtml);
const modelFragment = editor.data.toModel(viewFragment);
// Insert the transformed content
editor.model.change(writer => {
editor.model.insertContent(modelFragment, editor.model.document.selection);
});
// Stop the default processing to use our custom transformation
evt.stop();
}
});
} )
.catch( handleSampleError );
function handleSampleError( error ) {
const issueUrl = 'https://github.com/ckeditor/ckeditor5/issues';
const message = [
'Oops, something went wrong!',
`Please, report the following error on ${ issueUrl } with the build id "m7gmbfwakd12-rztuvf3ew3ra" and the error stack trace:`
].join( 'n' );
console.error( message );
console.error( error );
}
function integrateTextIntoLists(html) {
const parser = new DOMParser();
const doc = parser.parseFromString(html, 'text/html');
// Handle incorrect list item integration
const lists = doc.querySelectorAll('ol, ul');
lists.forEach(list => {
let lastLi = list.lastElementChild; // Track the last <li> element
// This is the node immediately following the current list
let followingNode = list.nextSibling;
while (followingNode) {
const nextFollowingNode = followingNode.nextSibling;
if (followingNode.nodeType === Node.ELEMENT_NODE && (followingNode.tagName === 'P' || followingNode.tagName === 'SPAN')) {
// Move the node inside the last <li> if it's a <p> or <span>
if (lastLi) {
lastLi.appendChild(followingNode);
} else {
// If no <li> exists, create one
lastLi = document.createElement('li');
lastLi.appendChild(followingNode);
list.appendChild(lastLi);
}
} else {
break; // Stop if the next node is not a <p> or <span>
}
followingNode = nextFollowingNode;
}
});
return new XMLSerializer().serializeToString(doc);
}
`
but it does not work