I want insert url from proment getting error ckeditorerror.ts:108 Uncaught CKEditorError: viewWriter.createContainerElement is not a function
Read more: https://ckeditor.com/docs/ckeditor5/latest/support/error-codes.html#error-viewWriter.createContainerElement is not a function
editor.model.schema.register( 'customMedia', {
allowWhere: '$block',
isObject: true,
allowAttributes: [ 'src' ]
});
// Define how the model is converted to the view
editor.conversion.for( 'dataDowncast' ).elementToElement({
model: 'customMedia',
view: ( modelElement, viewWriter ) => {
const src = modelElement.getAttribute( 'src' );
return viewWriter.createContainerElement( 'div', {
class: 'custom-media',
'data-src': src
});
}
});
editor.conversion.for( 'editingDowncast' ).elementToElement({
model: 'customMedia',
view: ( modelElement, viewWriter ) => {
const src = modelElement.getAttribute( 'src' );
const div = viewWriter.createContainerElement( 'div', {
class: 'custom-media',
'data-src': src
});
// Make the div a widget
return toWidget( div, viewWriter );
}
});
editor.conversion.for( 'upcast' ).elementToElement({
view: {
name: 'div',
classes: 'custom-media'
},
model: ( viewElement, modelWriter ) => {
const src = viewElement.getAttribute( 'data-src' );
return modelWriter.createElement( 'customMedia', { src } );
}
});
// Add a command to insert custom media
editor.commands.add( 'insertCustomMedia', new InsertCustomMediaCommand( editor ) );
// Add the button to the toolbar
editor.ui.componentFactory.add( 'customMedia', locale => {
const view = new ButtonView( locale );
view.set( {
label: 'Insert Custom Media',
icon: videoIcon,
tooltip: true
});
// Execute the command when the button is clicked
view.on( 'execute', () => {
const src = prompt( 'Media URL' );
editor.execute( 'insertCustomMedia', { src } );
});
return view;
});