[Python] django-ckeditor-5 media embed config for youtube shorts

I am having django project with django-ckeditor-5 package.

The default media providers of ckeditor-5 has youtube. However, I could find from the original source that the regex for youtube do not include shorts url. So, I had to add extraProviders. I tried various ways, but none of them worked.

"mediaEmbed": {
"previewsInData": "true",
"extraProviders": [
{
"name": "youtube-shorts",
"url": [
r"^(https?:\/\/)?(www\.)?youtube\.com\/shorts\/([a-zA-Z0-9_-]+)$",
r"/^(?:m\.)?youtube\.com\/shorts\/(.+)/",
],
"html": (
'<div style="position: relative; padding-bottom: 100%; height: 0; padding-bottom: 56.2493%;">'
'<iframe src="https://www.youtube.com/embed/{matched}" '
'style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;" '
'frameborder="0" allow="autoplay; encrypted-media" allowfullscreen>'
"</iframe>"
"</div>"
),
},
],
},


this is one of the method I tried, and it gives the below error.



If I use like below for allowing all it works without the preview image like the screenshot below though.

mediaEmbed": {
"previewsInData": "true",
"extraProviders": [
{
"name": "all",
"url": r"/^.+/",
},
],
},




Anyone had experience make this work?

==========update=========

I gave up adding it to settings, but tried using javascript to override the configs like below.

{% block javascript %}
<script>
const editor = document.querySelector('.ck-editor-container');

const config = {
"toolbar": [
"heading",
"|",
"bold",
"italic",
"link",
"bulletedList",
"numberedList",
"blockQuote",
"imageUpload",
"mediaEmbed",
],
"mediaEmbed": {
"previewsInData": "true",
"extraProviders": [{
name: 'youtube-shorts',
url: [
/^(?:m\.)?youtube\.com\/shorts\/([\w-]+)(?:\?t=(\d+))?/
],
html: match => {
const id = match[1];
const time = match[2];

return (
'<div style="position: relative; padding-bottom: 100%; height: 0; padding-bottom: 56.2493%;">' +
`<iframe src="https://www.youtube.com/embed/${ id }${ time ? `?start=${ time }` : '' }" ` +
'style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;" ' +
'frameborder="0" allow="autoplay; encrypted-media" allowfullscreen>' +
'</iframe>' +
'</div>'
);
}
}, ],
},
};

ClassicEditor.create(editor, config)
.then(editor => {
console.log("Editor was initialized", editor);
})
.catch(error => {
console.error("There was a problem initializing the editor", error);
});
</script>
{% endblock javascript %}


This works perfectly on the form, however, the content is saving just nothing. In database, I can see only <p>&nbsp;</p>.

I investigated more and found out it is not overriding the existed one, but creating new and bring it up front to hide the old one.



I used const editor = document.querySelector('.ck-editor-container'); this instead const editor = window.editors["id_content"]; that is from django-ckeditor-5 documentation because when running server it returns "undefined". However, when I test on browser console it returns the correct editor.



Anyone has any idea how to fix this?

Continue reading...