ckeditor5 removes video tags from content

Viewed 496

I have added the content of a post to the database.

   <div style="width: 1920px;" class="wp-video">
      <video class="wp-video-shortcode" id="video-0-8" width="1920" height="1080" preload="metadata" controls="controls">
         <source type="video/mp4" src="https://mywebsite.com/wp-content/uploads/2020/10/Lowerthird_2_73.mp4?_=8">
         <a href="https://mywebsite.com/wp-content/uploads/2020/10/Lowerthird_2_73.mp4">https://mywebsite.com/wp-content/uploads/2020/10/Lowerthird_2_73.mp4</a>
      </video>
   </div>

And when I open the content of this post with ckeditor5, it converts the above html as follows:

<p>
   <a href="https://mywebsite.com/wp-content/uploads/2020/10/Lowerthird_2_73.mp4" class="ck-link_selected">https://mywebsite.com/wp-content/uploads/2020/10/Lowerthird_2_73.mp4</a>
</p>

My codes are as follows:

HTML

<div class="document-editor editor">
     <div class="document-editor__toolbar"></div>
     <div class="document-editor__editable-container">
          <div class="document-editor__editable">
             {!!$product->description!!}
          </div>
     </div>
 </div>

JS

    let editor;

   DecoupledDocumentEditor
            .create( document.querySelector( '.document-editor__editable' ), {
                extraPlugins: [ MyCustomUploadAdapterPlugin ],
                placeholder: "Description",
                mediaEmbed: {
                    extraProviders: [
                        {
                            name: 'allow-all',
                            url: /^.+/,
                            html: match => embededMedia
                        },
                    ]
                },      
            } )
            .then( newEditor => {
                editor = newEditor;
        
                // 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' );
            } )
            .catch( error => {
            } );

I also used Laravel8 on the server side.

How can ckeditor be prevented from doing this peacefully?

0 Answers
Related