1

I'm currently reading the CKEditor 5 docs, and trying to understand how I could achieve the following conversion:

For every paragraph model, convert the view to a div with an inner span.

The following gets me half way there...

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

And now all paragraph models are converted to divs (instead of <p> elements)

But how can I add the additional span element so that each paragraph model is rendered as:

<div><span>Text here...</span></div>

Will I have to switch to more specialized upcast, dataDowncast, and editorDowncast converters? Or can this still be handled via editor.conversion.elementToElement?

Update:

I've tried the following - which is very close:

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',
          })

However, this outputs the following:

<div>
 Text here...
 <span></span>
</div>

Struggling to get the modelElement inside the span :-(

Blue Waters
  • 725
  • 1
  • 4
  • 17

1 Answers1

0

For anyone else looking for this, I've posted a working solution here... CKEditor 5 Downcast Converter for Paragraph To Wrap Text in Span

Blue Waters
  • 725
  • 1
  • 4
  • 17