I am trying to implement Ckeditor5 in my website and I want to allows 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
As you can see, the hanging indents when text is wrapped are not preserved.
I am trying something 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.