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?