es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

CKEditor 5 Convertir Modelo de Párrafo a Div con Span Interno

28 Jul, 2023 Programación

Actualmente estoy leyendo la documentación de CKEditor 5 y tratando de entender cómo podría lograr la siguiente conversión:

Para cada modelo de párrafo, convertir la vista en un div con un span interno.

Lo siguiente me lleva a la mitad del camino…

editor.conversion.elementToElement({ model: ‘paragraph’, view: ‘div’, converterPriority: ‘high’ })

Y ahora todos los modelos de párrafo se convierten en divs (en lugar de elementos

).

Pero, ¿cómo puedo agregar el elemento span adicional para que cada modelo de párrafo se renderice como:

Texto aquí…

¿Tendré que cambiar a convertidores más especializados de upcast, dataDowncast y editorDowncast? ¿O aún se puede manejar a través de editor.conversion.elementToElement?

Actualización:

He intentado lo siguiente, que está muy cerca:

editor.conversion.for(‘downcast’).elementToElement({
model: ‘paragraph’,
view: (modelElement, conversionApi) => {
const { writer } = conversionApi
const divElement = writer.createContainerElement(‘div’)
const spanElement = writer.createAttributeElement(‘span’)
conversionApi.mapper.bindElements(modelElement, spanElement)
writer.insert(writer.createPositionAt(divElement, 0), spanElement)
return divElement
},
converterPriority: ‘high’,
})

Sin embargo, esto produce lo siguiente:

Texto aquí…

Luchando por conseguir el modelElement dentro del span 🙁

Tags:  

Answer

  1. Avatar for davy.ai
    davy.ai

    Para lograr la conversión deseada de cada modelo de párrafo a un div con un span interno, deberá utilizar convertidores especializados de upcast, dataDowncast y editorDowncast en lugar de solo editor.conversion.elementToElement.

    Aquí tienes un ejemplo de cómo puedes hacerlo utilizando los convertidores especializados:

    editor.conversion.for('upcast').elementToElement({
    model: 'paragraph',
    view: {
        name: 'div',
        classes: 'paragraph'
    }
});

editor.conversion.for('dataDowncast').elementToElement({
    model: 'paragraph',
    view: (modelElement, viewWriter) => {
        const div = viewWriter.createContainerElement('div', { class: 'paragraph' });
        const span = viewWriter.createContainerElement('span');
        viewWriter.insert(viewWriter.createPositionAt(div, 0), span);
        modelElement.forEach(child => {
            const childView = viewWriter.createChildElement('span', { class: 'span' });
            viewWriter.insert(viewWriter.createPositionAt(span, span.getChildIndex()), childView);
            viewWriter.upcastElement(child, childView);
        });
        return div;
    }
});

editor.conversion.for('editingDowncast').elementToElement({
    model: 'paragraph',
    view: (modelElement, viewWriter) => {
        const div = viewWriter.createContainerElement('div', { class: 'paragraph' });
        const span = viewWriter.createContainerElement('span');
        viewWriter.insert(viewWriter.createPositionAt(div, 0), span);
        modelElement.forEach(child => {
            const childView = viewWriter.createChildElement('span', { class: 'span' });
            viewWriter.insert(viewWriter.createPositionAt(span, span.getChildIndex()), childView);
            viewWriter.downcastElement(child, childView);
        });
        return div;
    }
});

    El convertidor upcast convertirá el modelo de paragraph en una vista de div con la clase paragraph. El convertidor dataDowncast convertirá el modelo de paragraph en una vista de div con la clase paragraph y un elemento interno span. El convertidor editingDowncast convertirá el modelo de paragraph en una vista de div con la clase paragraph y un elemento interno span, y también se encargará de la edición.

    Ten en cuenta que la clase span se agrega al elemento span interno para ayudar a aplicar estilos si es necesario.

Comments are closed.