我在写我的插件,保存的时候出问题了,插入的时候block是增删改查的,但是你保存了,没有删除。
在我看来,保存后的块没有被ckeditor 5检测到,所以它没有激活删除,但我不明白这有什么关系
整个代码:
import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
import { toWidget, toWidgetEditable } from '@ckeditor/ckeditor5-widget/src/utils';
import Widget from '@ckeditor/ckeditor5-widget/src/widget';
class GalleryImport extends Plugin {
static get requires() {
return [ Widget ];
}
init() {
const editor = this.editor;
this._defineSchema();
this._defineConverters();
editor.ui.componentFactory.add( 'galleryimport', () => {
// The button will be an instance of ButtonView.
const button = new ButtonView();
button.set( {
label: 'Insert gallery',
icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M13.75 9v2.25H16v1.5h-2.25V15h-1.5v-2.25H10v-1.5h2.25V9h1.5ZM0 9.661l7.005 2.71L9 11.598v1.687l-1.71.662a.791.791 0 0 1-.456.033l-.111-.033L0 11.348V9.662Zm0-3.48L7.005 8.89 14 6.186v1.687l-6.71 2.595a.781.781 0 0 1-.456.034l-.111-.034L0 7.869V6.181ZM7.135.015l.083.026L14 2.77v1.689L7.29 7.053a.791.791 0 0 1-.456.034l-.111-.034L0 4.455V2.767l.011.003L6.794.04a.566.566 0 0 1 .34-.026Zm-.13 1.257L1.717 3.431l5.288 2.044 5.312-2.055-5.312-2.148Z"/></svg>',
tooltip: true
} );
button.on( 'execute', () => {
editor.model.change( writer => {
editor.model.insertObject( creategalleryImport( writer, 'Gallery 2' , '151', 'background-image: url(https://catherineasquithgallery.com/uploads/posts/2021-02/1614385475_77-p-svetlo-zelenii-fon-abstraktsiya-80.jpg)') );
} );
} );
return button;
} );
}
_defineSchema() {
const schema = this.editor.model.schema;
schema.register( 'galleryImport', {
inheritAllFrom: '$blockObject',
allowContentOf: '$block',
allowAttributes: [ 'id', 'title', 'style', 'class' ]
} );
}
_defineConverters() {
const conversion = this.editor.conversion;
conversion.for( 'upcast' ).elementToElement( {
view: {
name: 'section',
classes: 'gallery-box',
attributes: [ 'id', 'title', 'style', 'class' ]
},
model: ( viewElement, { writer: viewWriter } ) => {
const section = viewWriter.createElement( 'galleryImport', { id: viewElement.getAttribute( 'id' ), title: viewElement.getAttribute( 'title' ), style: viewElement.getAttribute( 'style' ), class: 'gallery-box' } );
return toWidget( section, viewWriter, { label: 'gallery box widget' } );
}
} );
conversion.for( 'downcast' ).elementToElement( {
model: {
name: 'galleryImport',
classes: 'gallery-box',
attributes: [ 'id', 'title', 'style', 'class' ]
},
view: ( modelElement, { writer: viewWriter } ) => {
const section = viewWriter.createContainerElement('section', { id: modelElement.getAttribute( 'id' ), title: modelElement.getAttribute( 'title' ), style: modelElement.getAttribute( 'style' ), class: 'gallery-box' } );
return toWidget( section, viewWriter, { label: 'simple box widget' } );
}
} );
}
}
function creategalleryImport( writer , name, galleryid, imageUrl) {
const galleryImport = writer.createElement( 'galleryImport', {id: galleryid, title: name, style: imageUrl});
return galleryImport;
}
保存的数据:
如何删除和保存? 代码中可能有错误