Ckeditor5: Audio player not stored for editing again

[hybridpicker]

🐞 Bug report |

💻 Version of CKEditor

5.7.0.

Django-Version

2.2

📋 Steps to reproduce

Tried to store some audioplayer in the source code like:

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

✅ Result

While saving it works on my output, but if I wanted to edit it again it just gives me this instead of the audio code:

<p>Your browser does not support the audio element.</p>

[Mgsy]

Hi, can you provide more information about your issue? Are you storing the content on the server? As I understand, after loading data to the editor, it strips those two <source> tags, right?

[jodator]

The editor does not understand the <audio> tag - there is no such feature. For every unsupported tag the editor tries it's best and the best it can do is to convert text nodes to <paragraph>s as it become here.

The minimal stub that will enable audio in the editor (it will preserve it for save) could be something like this:

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        extraPlugins: [ Essentials, Paragraph, ... , function( editor ) {
            editor.model.schema.register( 'audio', {
                allowWhere: '$block',
                isBlock: true,
                isLimit: true,
                allowAttributes: [ 'controls' ]
            } );
            editor.model.schema.register( 'source', {
                allowIn: 'audio',
                allowAttributes: [ 'src', 'type' ]
            } );

            editor.conversion.elementToElement( { view: 'audio', model: 'audio' } );
            editor.conversion.elementToElement( { view: 'source', model: 'source' } );
            editor.conversion.attributeToAttribute( { view: 'src', model: 'src' } );
            editor.conversion.attributeToAttribute( { view: 'type', model: 'type' } );
            editor.conversion.attributeToAttribute( { view: 'controls', model: 'controls' } );
        } ]
    } )

but the above will only preserve the <audio> and <source> tags. A bit more work is required to make this content editable (UI, adding a widget controls) or keeping the " Your browser does not support the audio element." text.

Getting the data from the editor:

[hybridpicker]

Hi, can you provide more information about your issue? Are you storing the content on the server? As I understand, after loading data to the editor, it strips those two <source> tags, right?

I store it into a PostgresSQL DB. After reloading from the Admin-Section the error happens. But as @jodator mentions this is because the editor doesn't understand the