ckeditor5 удаляет теги видео из содержимого

#javascript #html #ckeditor #ckeditor5

#javascript #HTML #ckeditor #ckeditor5

Вопрос:

Я добавил содержимое записи в базу данных.

    <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>
 

И когда я открываю содержимое этого сообщения с ckeditor5 помощью, оно преобразует вышеуказанное html следующим образом:

 <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>
 

Мои коды следующие:

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 => {
            } );
 

Я также использовал Laravel8 на стороне сервера.

Как можно помешать ckeditor сделать это мирным путем?

Комментарии:

1. ckeditor имеет параметры конфигурации. По умолчанию они настроены так, чтобы разрешать только определенные общие, не вызывающие проблем теги. Вы можете начать исследование того, как это настроить: Почему редактор отфильтровывает мой контент (стили, классы, элементы)? Где это config.allowedContent = true ?