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