ckeditor / ckeditor5-vue

Official CKEditor 5 Vue.js component.
https://ckeditor.com/ckeditor-5
Other
361 stars 77 forks source link

Request for API to Retrieve Specific Node Data Using editor.getData() #288

Open oobg opened 4 months ago

oobg commented 4 months ago

Problem Description

I am currently trying to optimize the performance when inserting and editing large amounts of content in ckeditor-vue. Specifically, we need an API that returns the same data as editor.getData() but allows us to retrieve only specific nodes.

Current Implementation

To achieve this, I have implemented the following solution. However, I would like to know if there is an existing API in CKEditor that can handle this task more efficiently:

getContentAtIndex(index) {
    const modelElement = this.editor.model.document.getRoot().getChild(index);
    if (!modelElement) return "";

    const viewFragment = this.editor.data.toView(modelElement);
    let html = this.editor.data.processor.toData(viewFragment);

    let tagName = modelElement.name;
    if (modelElement.name.startsWith('heading')) {
        tagName = `h${modelElement.name.slice(-1)}`;
    } else if (modelElement.name === 'paragraph') {
        tagName = 'p';
    }

    const attributes = Array.from(modelElement.getAttributeKeys())
        .map(attrKey => `${attrKey}="${modelElement.getAttribute(attrKey)}"`)
        .join(' ');

    return `<${tagName}${attributes ? ` ${attributes}` : ''}>${html}</${tagName}>`;
}

This message is being posted via a translation tool, so there might be slight changes in meaning. Thank you for your understanding.