保存ckeditor 5后块没有被删除

问题描述 投票:0回答:0

我在写我的插件,保存的时候出问题了,插入的时候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;
}

保存的数据:

如何删除和保存? 代码中可能有错误

javascript ckeditor ckeditor5
© www.soinside.com 2019 - 2024. All rights reserved.