Ckeditor5 - 从 Office (Word) 复制和粘贴不适用于列表

Question

我正在尝试在我的网站中实现 Ckeditor5，我想让用户从 word 中复制和粘贴，但列表不能完全工作。

当我复制这个

1.Dfgdfgdfg
  Dfgdfgdfgdf
2.Dfgdfgdfg kjdfhgjdfhghdfhjg
  Dfgjhdfjhgjdhfghkjdhfghdfjg  dfjjhg dfjgh dfjhj gh dfhdgf
3.Dfgdfgjhdfj 
4.Dfgdfgdf
5.Dfgdfgdfg
6.Dfgdfgdf

我明白了

1.Dfgdfgdfg
Dfgdfgdfgdf
2.Dfgdfgdfg kjdfhgjdfhghdfhjg
Dfgjhdfjhgjdhfghkjdhfghdfjg  dfjjhg dfjgh dfjhj gh dfhdgf hjdgf  
3.Dfgdfgjhdfj 
4.Dfgdfgdf
5.Dfgdfgdfg
6.Dfgdfgdf

我正在尝试这个

`

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);
}

` 但它不起作用，我没有使用付费版本的 atm，因为我唯一需要的是能够使用项目列表或编号列表进行复制和粘贴

Answer 1

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);
}